10 files changed, 68 insertions, 73 deletions
diff --git a/webui/src/.gitignore b/webui/src/.gitignore
index 5134e469..52b71a15 100644
--- a/webui/src/.gitignore
+++ b/webui/src/.gitignore
@@ -1 +1,3 @@
 fragmentTypes.js
+gqlTypes.ts
+*.generated.*
diff --git a/webui/src/Author.graphql b/webui/src/Author.graphql
new file mode 100644
index 00000000..76d66b91
--- /dev/null
+++ b/webui/src/Author.graphql
@@ -0,0 +1,8 @@
+fragment authored on Authored {
+  author {
+    name
+    email
+    displayName
+    avatarUrl
+  }
+}
diff --git a/webui/src/Author.js b/webui/src/Author.js
index 237a7956..7bb1bf3c 100644
--- a/webui/src/Author.js
+++ b/webui/src/Author.js
@@ -1,4 +1,3 @@
-import gql from 'graphql-tag';
 import Tooltip from '@material-ui/core/Tooltip/Tooltip';
 import MAvatar from '@material-ui/core/Avatar';
 import React from 'react';
@@ -15,17 +14,6 @@ const Author = ({ author, ...props }) => {
   );
 };
 
-Author.fragment = gql`
-  fragment authored on Authored {
-    author {
-      name
-      email
-      displayName
-      avatarUrl
-    }
-  }
-`;
-
 export const Avatar = ({ author, ...props }) => {
   if (author.avatarUrl) {
     return <MAvatar src={author.avatarUrl} {...props} />;
diff --git a/webui/src/Label.graphql b/webui/src/Label.graphql
new file mode 100644
index 00000000..22522ada
--- /dev/null
+++ b/webui/src/Label.graphql
@@ -0,0 +1,8 @@
+fragment Label on Label {
+  name
+  color {
+    R
+    G
+    B
+  }
+}
diff --git a/webui/src/Label.js b/webui/src/Label.js
index e5b00b12..fdb8ed4d 100644
--- a/webui/src/Label.js
+++ b/webui/src/Label.js
@@ -1,5 +1,4 @@
 import React from 'react';
-import gql from 'graphql-tag';
 import { makeStyles } from '@material-ui/styles';
 import {
   getContrastRatio,
@@ -48,15 +47,4 @@ function Label({ label }) {
   );
 }
 
-Label.fragment = gql`
-  fragment Label on Label {
-    name
-    color {
-      R
-      G
-      B
-    }
-  }
-`;
-
 export default Label;
diff --git a/webui/src/bug/Bug.graphql b/webui/src/bug/Bug.graphql
new file mode 100644
index 00000000..112024aa
--- /dev/null
+++ b/webui/src/bug/Bug.graphql
@@ -0,0 +1,14 @@
+#import "../Label.graphql"
+#import "../Author.graphql"
+
+fragment Bug on Bug {
+  id
+  humanId
+  status
+  title
+  labels {
+    ...Label
+  }
+  createdAt
+  ...authored
+}
diff --git a/webui/src/bug/Bug.js b/webui/src/bug/Bug.tsx
index 5a159f0f..75b6ffff 100644
--- a/webui/src/bug/Bug.js
+++ b/webui/src/bug/Bug.tsx
@@ -1,11 +1,11 @@
-import { makeStyles } from '@material-ui/styles';
+import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography/Typography';
-import gql from 'graphql-tag';
 import React from 'react';
 import Author from '../Author';
 import Date from '../Date';
 import TimelineQuery from './TimelineQuery';
 import Label from '../Label';
+import { BugFragment } from './Bug.generated';
 
 const useStyles = makeStyles(theme => ({
   main: {
@@ -51,7 +51,11 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
-function Bug({ bug }) {
+type Props = {
+  bug: BugFragment
+};
+
+function Bug({ bug }: Props) {
   const classes = useStyles();
   return (
     <main className={classes.main}>
@@ -85,20 +89,4 @@ function Bug({ bug }) {
   );
 }
 
-Bug.fragment = gql`
-  fragment Bug on Bug {
-    id
-    humanId
-    status
-    title
-    labels {
-      ...Label
-    }
-    createdAt
-    ...authored
-  }
-  ${Label.fragment}
-  ${Author.fragment}
-`;
-
 export default Bug;
diff --git a/webui/src/bug/BugQuery.graphql b/webui/src/bug/BugQuery.graphql
new file mode 100644
index 00000000..caa247ed
--- /dev/null
+++ b/webui/src/bug/BugQuery.graphql
@@ -0,0 +1,9 @@
+#import "./Bug.graphql"
+
+query GetBug($id: String!) {
+  defaultRepository {
+    bug(prefix: $id) {
+      ...Bug
+    }
+  }
+}
diff --git a/webui/src/bug/BugQuery.js b/webui/src/bug/BugQuery.js
deleted file mode 100644
index dbf24c31..00000000
--- a/webui/src/bug/BugQuery.js
+++ /dev/null
@@ -1,30 +0,0 @@
-import CircularProgress from '@material-ui/core/CircularProgress';
-import gql from 'graphql-tag';
-import React from 'react';
-import { Query } from 'react-apollo';
-
-import Bug from './Bug';
-
-const QUERY = gql`
-  query GetBug($id: String!) {
-    defaultRepository {
-      bug(prefix: $id) {
-        ...Bug
-      }
-    }
-  }
-
-  ${Bug.fragment}
-`;
-
-const BugQuery = ({ match }) => (
-  <Query query={QUERY} variables={{ id: match.params.id }}>
-    {({ loading, error, data }) => {
-      if (loading) return <CircularProgress />;
-      if (error) return <p>Error: {error}</p>;
-      return <Bug bug={data.defaultRepository.bug} />;
-    }}
-  </Query>
-);
-
-export default BugQuery;
diff --git a/webui/src/bug/BugQuery.tsx b/webui/src/bug/BugQuery.tsx
new file mode 100644
index 00000000..6bf525e6
--- /dev/null
+++ b/webui/src/bug/BugQuery.tsx
@@ -0,0 +1,20 @@
+import CircularProgress from '@material-ui/core/CircularProgress';
+import React from 'react';
+import { RouteComponentProps } from 'react-router-dom';
+
+import { useGetBugQuery } from './BugQuery.generated';
+import Bug from './Bug';
+
+type Props = RouteComponentProps<{
+  id: string
+}>;
+
+const BugQuery: React.FC<Props> = ({ match }: Props) => {
+  const { loading, error, data } = useGetBugQuery({ variables: { id: match.params.id } });
+  if (loading) return <CircularProgress />;
+  if (error) return <p>Error: {error}</p>;
+  if (!data?.defaultRepository?.bug) return <p>404.</p>;
+  return <Bug bug={data.defaultRepository.bug} />;
+};
+
+export default BugQuery;