A Practical Guide to GraphQL: From the Client Perspective/

...

/

React GraphQL Pagination

React GraphQL Pagination

In this lesson, we will explore and implement pagination with list fields GraphQL in React.

We'll cover the following...

In the last lesson, we implemented a list field in GraphQL query, which fits into the flow of structuring the query with nested objects and a list responsible for showing partial results of the query in React. Now, we will combine that knowledge with pagination.

Initially, we will learn more about the arguments of list fields. Further, we will add one more nested list field to the query. Finally, we will fetch another page of the paginated issues list with the query.

Let’s start by extending the issues list field in your query with one more argument:

Press + to interact
const GET_ISSUES_OF_REPOSITORY = `
  query ($organization: String!, $repository: String!) {
    organization(login: $organization) {
      name
      url
      repository(name: $repository) {
        name
        url
        issues(last: 5, states: [OPEN]) {
          edges {
            node {
              id
              title
              url
            }
          }
        }
      }
    }
  }
`;

If you read the arguments for the issues list field using the “Docs” sidebar in GraphQL, you can explore which arguments you can pass to the field. One of these is the states argument, which defines whether or not to fetch open or closed issues. The previous implementation of the query has shown you how to refine the list field, in case you only want to show open issues. You can explore more arguments for the issues list field, but also for other list fields, using the documentation from Github’s API.

Implement Another Nested List for Pagination

Now we’ll implement another nested list field that could be used for pagination. Each issue in a repository can have reactions, essentially emoticons like a smiley or a thumbs up. Reactions can be seen as another list of paginated ...