Apollo Client Setup for graphQL requests in React

Introduction

This article will show how to configure a React app for graphQL requests, for this the APollClient lib will be used. The idea is to present how to configure the app and an example of how to make requests.

libs

• @apollo/client: lib that allows you to manage state and make requests with GraphQL
• graphql: lib that allows parsing of GraphQL queries

To add the libs to the project:

yarn add @apollo/client graphql --dev

Settings

Next 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 passing the information about where it will hit from the defined link, and the cache from an instance of InMemoryCache, which the APolloClient uses to cache the results of the queries.
In httpLink, the uri of the graphQL api is passed and the necessary headers for the requests are defined, in this case one that uses Bearer token is exemplified.
Finally, the return and export are defined to allow use within the application.

Considering that it is an app that after login saves the token in localStorage, and that you want to allow graphQL requests for the entire app in general, the ApolloProvider that was defined in the file above is used:

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

const token = localStorage.getItem('@tokenId')
// endpoint da sua api graphQL
const graphqlURI = 'https://www.example.com'

const App = () => {
  return (
    <ApolloProvider token={token} uri={graphqlURI}>
      <AppContent />
    </ApolloProvider>
  )
}

In this case of the example, the token is being taken from localStorage (in this example, as if it were saved with the @tokenId key there) and the uri is defined in the file itself, being passed to ApolloProvider. The AppContent is being passed as children of the ApolloProvider, so everything contained within it, which would be the app as a whole, will be able to make graphQL requests.
In practice, having different environments for testing and production, the graphqlURI could come from an env defined with the uri of each environment.

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

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 by the React app and user the name of the query that is searched in the api.

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

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 }

The useQuery hook will execute the query defined in GET_USER, returning loading true while the request is not completed, returning error if the request fails and returning data when the request is completed successfully. As long as the date has not been returned, the message Loading... will appear on the screen. If the request ends with an error, it will display the message Request Failed. If the request is completed successfully, the user's name and profession (name and occupation) will be displayed on the screen.
This way, ApolloClient is configured for graphQL requests and ready to use.

Conclusion

The idea was to present how to configure APolloClient to enable React apps to make graphQL calls, showing the definition of the context, the use of this context and an example of how to execute a query.
Follow the link to the ApolloClient documentation for those who want to delve deeper.

The above is the detailed content of Apollo Client Setup for graphQL requests in React. For more information, please follow other related articles on the PHP Chinese website!