1// @flow
 2import CircularProgress from '@material-ui/core/CircularProgress';
 3import gql from 'graphql-tag';
 4import React from 'react';
 5import { Query } from 'react-apollo';
 6import BugRow from './BugRow';
 7import List from './List';
 8
 9const QUERY = gql`
10  query($first: Int = 10, $last: Int, $after: String, $before: String) {
11    defaultRepository {
12      bugs: allBugs(
13        first: $first
14        last: $last
15        after: $after
16        before: $before
17      ) {
18        totalCount
19        edges {
20          cursor
21          node {
22            ...BugRow
23          }
24        }
25        pageInfo {
26          hasNextPage
27          hasPreviousPage
28          startCursor
29          endCursor
30        }
31      }
32    }
33  }
34
35  ${BugRow.fragment}
36`;
37
38const ListQuery = () => (
39  <Query query={QUERY}>
40    {({ loading, error, data, fetchMore }) => {
41      if (loading) return <CircularProgress />;
42      if (error) return <p>Error: {error}</p>;
43      return <List bugs={data.defaultRepository.bugs} fetchMore={fetchMore} />;
44    }}
45  </Query>
46);
47
48export default ListQuery;