Gain insights into GraphQL from a client perspective. Explore practical exercises, React integration, Apollo Client, and a live VM for real-time coding with GitHub’s GraphQL API.

GraphQLClient.tar.gz

REACT_APP_GITHUB_PERSONAL_ACCESS_TOKEN

GITHUB_PERSONAL_ACCESS_TOKEN

RunApp

RunApolllo

RunGraphQLReact

This course was written to be as practical as possible. It offers an interactive learning experience, starting off with a general introduction to GraphQL and proceeding to allow you to play with GraphQL Queries and Mutations using GitHub’s GraphQL API.

After getting you comfortable with the basics of GraphQL, the course moves on to how to use GraphQL with React and then on how to integrate it with Apollo Client. You'll implement an issue tracker application using GraphQL combined with both React and Apollo Client.

Finally, with this course Educative introduces its newest feature: A live VM. You will now have access to a terminal with a native look and feel where you can modify code and see changes in real time - all inside your browser!

A Practical Guide to GraphQL: From the Client Perspective

# Why Do we Need Pagination?

This is where we return to the concept of **pagination** mentioned in the previous chapter. Imagine we have a list of repositories in our GitHub organization, but we only want to retrieve a few of them to display on our UI. It could take ages to fetch a list of repositories from a large organization. In GraphQL, you can request paginated data by providing arguments to a **list field**, such as an argument that specifies how many items you are expecting from the list. 

query OrganizationForLearningReact {
  organization(login: "the-road-to-learn-react") {
    name
    url
    repositories(first: 2) {
      edges {
        node {
          name
        }
      }
    }
  }
}

thefinalimage.tar.gz

An argument, namely `first`, is passed to the `repositories` list field that specifies how many items from the list are expected in the result. The query shape doesn’t need to follow the `edges` and `node` structure, but it’s one from a few solutions to define paginated data structures and lists with GraphQL. Actually, it follows the interface description of Facebook’s GraphQL client called Relay. GitHub followed this approach and adopted it for their own GraphQL pagination API.

# Solution: Cursor Field

After executing the query, we should see two items from the list in the repositories field. However, we still need to figure out how to fetch the next two repositories in the list. The first result of the query is the first **page** of the paginated list, the second query result should be the second page. In the following code, we will see how the query structure for paginated data allows us to retrieve meta information to execute successive queries. This is done by allowing each edge to come with its own cursor field to identify its position in the list.

In this lesson, we will be introducing the GraphQL feature: pagination.

An Introduction to GraphQL

How to Get Started

Exploring GitHub's GraphQL API

Combining React with GraphQL

Introducing Apollo Client with GraphQL

React with Apollo and GraphQL

Local Installation Guide

GraphQL Pagination