Apollo GraphQL With React Native — Part 2

Flexible and efficient data fetching and state management

In Part 1, we learned about GraphQL and its benefits.

Here, we will explore real-world use cases and how Apollo Client simplifies data fetching and state management.

What is an Apollo Client?

Apollo Client is a comprehensive state management library that provides access to GraphQL for managing local and remote data. It allows you to fetch, cache, and modify application data, which helps organize your code in an efficient, predictable, and declarative manner.

With its smart caching and declarative approach to data fetching, Apollo Client enables you to work faster with less code.

Integrate Apollo Client with React Native

You can create a new React Native project or integrate it into an existing project.

1. Configure Apollo Client

The first step is to install dependencies.

yarn add @apollo/client graphql

After installing dependency, initiate the Apollo Client.

Here, uri would be our GraphQL API endpoint, and cache is an instance of InMemoryCache, which Apollo Client uses to cache query results after fetching them.

2. Connect Apollo Client with React Native

Now, connect the Apollo Client to React Native using the ApolloProvider component, which can be compared to React’s Context Provider.

The ApolloProvider wraps our React Native app and places the Apollo Client in the context. This enables us to access it anywhere in our component tree.

You can wrap the ApolloProvider at the top of your app and pass the client to the ApolloProvider.

Commonly Used Apollo Hooks

useQuery

To retrieve data from the server in our React Native application, we can utilize the useQuery hook.

After integration, we can initiate data requests using this hook, which connects to GraphQL.

To do this, define the GraphQL query and enclose the query string with the gql tag, as demonstrated below.

Here, we have passed the GET_FEED query to the useQuery hook. The useQuery hook returns loading, error, and data values, which will change depending on the operations performed.

As the Feed component renders, the useQuery hook executes, and during execution, the query loading state will switch to true.

If an error occurs during the query execution, we can access it directly through the error value. After the query executes successfully, we will obtain the result in the data property of the useQuery hook.

useMutation

This hook is used to mutate the data on the server to add, update, or delete.

To get started, we have to define the GraphQL mutation, similar to a query, and wrap the mutation string within a gql tag, as shown below:

Next, we will use the useMutation hook to send mutation requests to a server and update the data accordingly.

Here, we have passed the ADD_LINK mutation to the useMutation hook. This hook returns an array, with the first element being the mutate function (in our case, addLink), which is used to execute the mutation.

The second element is an object that contains loading, error, and data values, and these values change based on the operations we perform.

In the above example, the mutate function (addLink) returned by the useMutation hook is invoked by the ‘Add Link’ button that sends the request to the server to add a new link to the feed.

The mutate function also accepts different options. As shown in the example, we’ve provided variables to the mutate function.

To do this, we pass the request parameters (URL and description) in the variables option. In the mutation string, we define these variables using the $ symbol.

useSubscription

To receive real-time updates of data changes from the server, we utilize the useSubscription hook.

Before using this subscription, we need to make some modifications to the Apollo Client configuration. To do so, install the subsciptions-transport-ws library with the command provided below:

yarn add subscriptions-transport-ws

Let’s modify the Apollo Client configuration.

Note: If your GraphQL server is using the latest web socket protocol (which is not required for this tutorial), you should install the graphql-ws library instead of subsciptions-transport-ws and make the necessary configuration changes as shown below.

Next, let’s define a subscription for new links.

We have defined a NEW_LINK subscription and passed it to the useSubscription hook. We can implement this hook in the component where we want real-time updates of new links. It actively listens for changes.

This subscription is associated with the ADD_LINK mutation, which we used in the previous mutation example.

When we execute the ADD_LINK mutation and it succeeds, the data on the server is updated, and we can observe the latest changes in the data object retrieved through the useSubscription hook.

The component will automatically re-render wherever we have implemented the useSubscription hook to listen for these changes.

Conclusion

In this section, we delved into the practical implementation of Apollo Client with React Native. In Part 3, we’ll get hands-on with Apollo Client Local State Management in React Native.

To learn more about Apollo GraphQL, refer to the official documentation.

Meanwhile, stay tuned with the Simform Engineering blog for more updates on the latest tools and technologies.

Follow us: Twitter | LinkedIn