Setup Apollo Client for graphQL requests in React

Introduction

This article will demonstrate how to set up a React app for graphQL requests using the ApolloClient library. The goal is to show how to configure the app and provide an example of how to make requests.

Libs

• 
  @apollo/client: lib that enables state management and makes graphQL requests


• 
  graphql: lib that allows parsing GraphQL queries

To add the libs to the project:

yarn add @apollo/client graphql --dev

Configuration

Below, I will show how to configure ApolloClient to enable graphQL requests.

First, an ApolloClient context will be created so that everything contained as its children can make graphQL requests:

import {

  ApolloClient,

  ApolloProvider,

  HttpLink,

  InMemoryCache

} from '@apollo/client'



function ExampleApolloProvider({ children, token, uri }) {

  const httpLink = new HttpLink({

    uri: uri,

    headers: {

      authorization: `Bearer ${token}`,

    },

  })



  const client = new ApolloClient({

    cache: new InMemoryCache(),

    link: httpLink,

  })



  return <ApolloProvider client={client}>{children}</ApolloProvider>

}



export { ExampleApolloProvider as ApolloProvider }

In const client, the ApolloClient is initialized, specifying the endpoint through the defined link and the cache using an instance of InMemoryCache, which ApolloClient uses to cache query results.

In httpLink, the uri of the graphQL api is set, along with the necessary headers for the requests. In this example, a Bearer token is used.

Finally, the return and export are defined to allow its use inside the app.

Considering that this is an app where the token is saved in localStorage after login, and the goal is to enable graphQL requests throughout the app, the ApolloProvider defined in the previous file is used:

import { ApolloProvider } from './contexts/ApolloContext'

import AppContent from './components/AppContent'



const token = localStorage.getItem('@tokenId')

// endpoint of your graphQL api

const graphqlURI = 'https://www.example.com'



const App = () => {

  return (

    <ApolloProvider token={token} uri={graphqlURI}>

      <AppContent />

    </ApolloProvider>

  )

}

In this example, the token is retrieved from localStorage (in this case, as if it were saved with the key @tokenId), and the uri is defined inside the same file, then passed to the ApolloProvider. The AppContent is passed as the children of the ApolloProvider, meaning everything contained inside it, the entire app, will be able to make graphQL requests.

In practice, when having different environments for testing and production, the graphqlURI could come from an environment variable, with the uri for each environment defined accordingly.

Starting with a query called user that the api exposes, which returns the user's name and occupation, a file will be defined with the query to be called:

import { gql } from '@apollo/client'



const GET_USER = gql`

  query GetUser {

    user {

      name

      occupation

    }

  }

`



export default GET_USER

GET_USER corresponds to how the query will be called in the React app, and user is the name of the query to be used from the api.

In the file that defines AppContent, the GET_USER query will be called and its return will be used:

import { useQuery } from '@apollo/client';



import GET_USER from './query/UserQuery'



const AppContent = () => {

  const { loading, error, data } = useQuery(GET_USER)



  if (loading) return <p>Loading...</p>

  if (error) return <p>Request failed</p>



  return (

    <>

      <h1>Welcome!</h1>

      <p>Name: {data.user.name}</p>

      <p>Occupation: {data.user.occupation}</p>

    </>

  )

}

The useQuery hook will execute the query defined in GET_USER, returning loading as true while the request is still in progress, returning error if the request fails, and returning data when the request successfully completes. Until data is returned, it will display the message Loading... on the screen. If the request ends with an error, it will display the message Request failed. If the request is successful, the user's name and occupation (name and occupation) will be displayed on the screen.

This way, the ApolloClient is configured for graphQL requests and ready for use.

Conclusion

The idea was to demonstrate how to configure ApolloClient to allow a React app to make graphQL calls, showing the definition of the context, the usage of this context, and an example of how to execute a query.

Here is the link to the ApolloClient documentation for anyone who wants to dive deeper.