1import React from "react";
 2import { Query } from "react-apollo";
 3import gql from "graphql-tag";
 4
 5import CircularProgress from "@material-ui/core/CircularProgress";
 6
 7import Bug from "./Bug";
 8
 9const QUERY = gql`
10  query GetBug($id: String!) {
11    defaultRepository {
12      bug(prefix: $id) {
13        ...Bug
14      }
15    }
16  }
17
18  ${Bug.fragment}
19`;
20
21const BugPage = ({ match }) => (
22  <Query query={QUERY} variables={{ id: match.params.id }}>
23    {({ loading, error, data }) => {
24      if (loading) return <CircularProgress />;
25      if (error) return <p>Error.</p>;
26      return <Bug bug={data.defaultRepository.bug} />;
27    }}
28  </Query>
29);
30
31export default BugPage;