ListQuery.js

 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(first: $first, last: $last, after: $after, before: $before) {
13        totalCount
14        edges {
15          cursor
16          node {
17            ...BugRow
18          }
19        }
20        pageInfo{
21          hasNextPage
22          hasPreviousPage
23          startCursor
24          endCursor
25        }
26      }
27    }
28  }
29
30
31  ${BugRow.fragment}
32`
33
34const ListQuery = () => (
35  <Query query={QUERY}>
36    {({loading, error, data, fetchMore}) => {
37      if (loading) return <CircularProgress/>
38      if (error) return <p>Error: {error}</p>
39      return <List bugs={data.defaultRepository.bugs} fetchMore={fetchMore}/>
40    }}
41  </Query>
42)
43
44export default ListQuery