Using GraphQL

Earlier in this chapter, we discussed what GraphQL is and how it allows us to specify the exact data we want from the server, reducing the amount of transferred data and speeding up data fetching.

In this example, we will explore GraphQL in conjunction with the @apollo/client library, which provides similar functionality to React Query but works with GraphQL queries.

To begin, let’s install the necessary dependencies using the following command:

npm install @apollo/client graphql

Next, we need to add a provider to our application:

const client = new ApolloClient({
  uri: "https://api.github.com/graphql",
  cache: new InMemoryCache(),
  headers: {
    Authorization: 'Bearer YOUR_PAT', // Put your GitHub personal access token here
  },
});
ReactDOM.createRoot(document.getElementById("root")!).render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>
);

At this stage, during...