11 files changed, 97 insertions, 119 deletions
diff --git a/webui/src/bug/LabelChange.js b/webui/src/bug/LabelChange.js
index 4773e7eb..df8ab0a5 100644
--- a/webui/src/bug/LabelChange.js
+++ b/webui/src/bug/LabelChange.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -40,22 +39,4 @@ function LabelChange({ op }) {
   );
 }
 
-LabelChange.fragment = gql`
-  fragment LabelChange on TimelineItem {
-    ... on LabelChangeTimelineItem {
-      date
-      ...authored
-      added {
-        ...Label
-      }
-      removed {
-        ...Label
-      }
-    }
-  }
-
-  ${Label.fragment}
-  ${Author.fragment}
-`;
-
 export default LabelChange;
diff --git a/webui/src/bug/LabelChangeFragment.graphql b/webui/src/bug/LabelChangeFragment.graphql
new file mode 100644
index 00000000..07b1d351
--- /dev/null
+++ b/webui/src/bug/LabelChangeFragment.graphql
@@ -0,0 +1,15 @@
+#import "../Author.graphql"
+#import "../Label.graphql"
+
+fragment LabelChange on TimelineItem {
+  ... on LabelChangeTimelineItem {
+    date
+    ...authored
+    added {
+      ...Label
+    }
+    removed {
+      ...Label
+    }
+  }
+}
diff --git a/webui/src/bug/Message.js b/webui/src/bug/Message.js
index 06c12815..4c22745f 100644
--- a/webui/src/bug/Message.js
+++ b/webui/src/bug/Message.js
@@ -1,6 +1,5 @@
 import { makeStyles } from '@material-ui/styles';
 import Paper from '@material-ui/core/Paper';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import { Avatar } from '../Author';
@@ -69,30 +68,4 @@ function Message({ op }) {
   );
 }
 
-Message.createFragment = gql`
-  fragment Create on TimelineItem {
-    ... on CreateTimelineItem {
-      createdAt
-      ...authored
-      edited
-      message
-    }
-  }
-
-  ${Author.fragment}
-`;
-
-Message.commentFragment = gql`
-  fragment AddComment on TimelineItem {
-    ... on AddCommentTimelineItem {
-      createdAt
-      ...authored
-      edited
-      message
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default Message;
diff --git a/webui/src/bug/MessageCommentFragment.graphql b/webui/src/bug/MessageCommentFragment.graphql
new file mode 100644
index 00000000..83cc9f61
--- /dev/null
+++ b/webui/src/bug/MessageCommentFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment AddComment on TimelineItem {
+  ... on AddCommentTimelineItem {
+    createdAt
+    ...authored
+    edited
+    message
+  }
+}
diff --git a/webui/src/bug/MessageCreateFragment.graphql b/webui/src/bug/MessageCreateFragment.graphql
new file mode 100644
index 00000000..e753444f
--- /dev/null
+++ b/webui/src/bug/MessageCreateFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment Create on TimelineItem {
+  ... on CreateTimelineItem {
+    createdAt
+    ...authored
+    edited
+    message
+  }
+}
diff --git a/webui/src/bug/SetStatus.js b/webui/src/bug/SetStatus.js
index 070bbb8f..eb7f5bfe 100644
--- a/webui/src/bug/SetStatus.js
+++ b/webui/src/bug/SetStatus.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -22,16 +21,4 @@ function SetStatus({ op }) {
   );
 }
 
-SetStatus.fragment = gql`
-  fragment SetStatus on TimelineItem {
-    ... on SetStatusTimelineItem {
-      date
-      ...authored
-      status
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default SetStatus;
diff --git a/webui/src/bug/SetStatusFragment.graphql b/webui/src/bug/SetStatusFragment.graphql
new file mode 100644
index 00000000..56e22c2b
--- /dev/null
+++ b/webui/src/bug/SetStatusFragment.graphql
@@ -0,0 +1,9 @@
+#import "../Author.graphql"
+
+fragment SetStatus on TimelineItem {
+  ... on SetStatusTimelineItem {
+    date
+    ...authored
+    status
+  }
+}
diff --git a/webui/src/bug/SetTitle.js b/webui/src/bug/SetTitle.js
index e4c30a8d..b20ed9ca 100644
--- a/webui/src/bug/SetTitle.js
+++ b/webui/src/bug/SetTitle.js
@@ -1,5 +1,4 @@
 import { makeStyles } from '@material-ui/styles';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
@@ -28,17 +27,4 @@ function SetTitle({ op }) {
   );
 }
 
-SetTitle.fragment = gql`
-  fragment SetTitle on TimelineItem {
-    ... on SetTitleTimelineItem {
-      date
-      ...authored
-      title
-      was
-    }
-  }
-
-  ${Author.fragment}
-`;
-
 export default SetTitle;
diff --git a/webui/src/bug/SetTitleFragment.graphql b/webui/src/bug/SetTitleFragment.graphql
new file mode 100644
index 00000000..a15c3eb3
--- /dev/null
+++ b/webui/src/bug/SetTitleFragment.graphql
@@ -0,0 +1,10 @@
+#import "../Author.graphql"
+
+fragment SetTitle on TimelineItem {
+  ... on SetTitleTimelineItem {
+    date
+    ...authored
+    title
+    was
+  }
+}
diff --git a/webui/src/bug/TimelineQuery.graphql b/webui/src/bug/TimelineQuery.graphql
new file mode 100644
index 00000000..7a8bc736
--- /dev/null
+++ b/webui/src/bug/TimelineQuery.graphql
@@ -0,0 +1,25 @@
+#import "./MessageCreateFragment.graphql"
+#import "./MessageCommentFragment.graphql"
+#import "./LabelChangeFragment.graphql"
+#import "./SetTitleFragment.graphql"
+#import "./SetStatusFragment.graphql"
+
+query Timeline($id: String!, $first: Int = 10, $after: String) {
+  defaultRepository {
+    bug(prefix: $id) {
+      timeline(first: $first, after: $after) {
+        nodes {
+          ...LabelChange
+          ...SetStatus
+          ...SetTitle
+          ...AddComment
+          ...Create
+        }
+        pageInfo {
+          hasNextPage
+          endCursor
+        }
+      }
+    }
+  }
+}
diff --git a/webui/src/bug/TimelineQuery.js b/webui/src/bug/TimelineQuery.js
index ebb20f9d..0c9305b1 100644
--- a/webui/src/bug/TimelineQuery.js
+++ b/webui/src/bug/TimelineQuery.js
@@ -1,53 +1,25 @@
 import CircularProgress from '@material-ui/core/CircularProgress';
-import gql from 'graphql-tag';
 import React from 'react';
-import { Query } from 'react-apollo';
-import LabelChange from './LabelChange';
-import SetStatus from './SetStatus';
-import SetTitle from './SetTitle';
 import Timeline from './Timeline';
-import Message from './Message';
 
-const QUERY = gql`
-  query($id: String!, $first: Int = 10, $after: String) {
-    defaultRepository {
-      bug(prefix: $id) {
-        timeline(first: $first, after: $after) {
-          nodes {
-            ...LabelChange
-            ...SetStatus
-            ...SetTitle
-            ...AddComment
-            ...Create
-          }
-          pageInfo {
-            hasNextPage
-            endCursor
-          }
-        }
-      }
-    }
-  }
-  ${Message.createFragment}
-  ${Message.commentFragment}
-  ${LabelChange.fragment}
-  ${SetTitle.fragment}
-  ${SetStatus.fragment}
-`;
+import { useTimelineQuery } from './TimelineQuery.generated';
 
-const TimelineQuery = ({ id }) => (
-  <Query query={QUERY} variables={{ id, first: 100 }}>
-    {({ loading, error, data, fetchMore }) => {
-      if (loading) return <CircularProgress />;
-      if (error) return <p>Error: {error}</p>;
-      return (
-        <Timeline
-          ops={data.defaultRepository.bug.timeline.nodes}
-          fetchMore={fetchMore}
-        />
-      );
-    }}
-  </Query>
-);
+const TimelineQuery = ({ id }) => {
+  const { loading, error, data, fetchMore } = useTimelineQuery({
+    variables: {
+      id,
+      first: 100,
+    },
+  });
+
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+  return (
+    <Timeline
+      ops={data.defaultRepository.bug.timeline.nodes}
+      fetchMore={fetchMore}
+    />
+  );
+};
 
 export default TimelineQuery;