GraphQL is a query language and runtime for APIs, and is often used as an alternative to REST APIs. In this article, I will show you how to set up a GraphQL Apollo client in a React Native application. At the end of the article we will have our ApolloClient ready to use.

To get started, you will need to install the necessary dependencies. You can use either the Apollo Client or the urql library to handle your GraphQL requests. To install the Apollo Client, run the following command:

npm install @apollo/client graphql 

OR

yarn add @apollo/client graphql

Once done now its time to configure Apollo client according to our need. For now we are configure our client to support following.

• Setting header
• HttpLink with file upload
• Error handling
• Retry the request

We are using ApolloLink to customise the flow of data between Apollo Client and your GraphQL server. 

Setting headers

To set the header in the request we need to intercept the request using ApolloLink as below:

HttpLink with file upload

With HttpLink we are configuring our server url and fetchPolicy with use of apollo-upload-client for Apollo Client that fetches a GraphQL multipart request if the GraphQL variables contain files (by default FileList, File, Blob, or ReactNative File instances), or else fetches a regular GraphQL POST or GET request (depending on the config and GraphQL operation).

Use following command to install

npm install apollo-upload-client

OR

yarn add apollo-upload-client

Once done we can configure the client with following code:

For now we are setting fetchPolicy to catch-and-network which means Apollo Client executes the full query against both the cache and your GraphQL server. The query automatically updates if the result of the server-side query modifies cached fields.

Error handling

To handle common errors we can create error interceptor like below:

We have 2 types of errors. One is graphQLError which is server error i.e. 503 server is not able to handle the request or 428 data error etc. and another is network error which occurs due to network issue like wife or data is not enabled or internet connectivity issues. We can show some common errors from the client it self instead of handling errors in every component.

Retry the request

This is optional configuration for us to set the client retry the request in case of error or timeout. We will use RetryLink to configure the client as folowing:

Let’s understand the configuration of RetryLink.

in retryIf you can add specific condition as I’ve set if the error message is Network request failed then it will return true or else false. When we return true the client will attempt retry according to options or else it gave up and don’t retry.

Configure ApolloClient with ApolloLinks.

Now its time to combine the links created above and create instance of ApolloClient as below:

by using ApolloLink.from we can combine all the links and create and export client.

Using ApolloClient

In App.js file we will import the client and wrap our root component with ApolloProvider.

In my case I am using Home as root component of the project but you can use Navigator root component instead.

Full Code

That’s it for configuration part. in the next article we will see how to use GraphQL with React-Native.

Hope you like the article. If have any query/doubts, Feel free to reach out to me via comment, Twitter & LinkedIn.

Please leave this field empty

Don’t miss the latest posts!

Email Address *

We don’t spam! Read our privacy policy for more info.

Thank you for joining newsletter. We promise we never spam and disappoint you!!