Apollo GraphQL With React Native — Part 3

Streamline Local State Management with Apollo GraphQL

Previously, we learned about GraphQL and how to integrate Apollo Client into React Native.

In this part, we’ll explore real-world scenarios of local state management and how Apollo Client simplifies it.

Local State Management

Apollo Client stores the response of your GraphQL queries in the cache with the option to customize this behavior by configuring the fetch policy to suit your needs.

If we don’t define any fetch policy while executing the query, it takes the cache-first policy, which is the default one.

Now, let’s understand this with an example.

• In Part 2, we executed the GET_FEED query without defining any fetch policy, so the default behavior is cache-first.
• Under the cache-first policy, Apollo Client initially checks the cache for the requested data. If the required data is present, it returns the result directly from the cache. This reduces the number of network requests made by the application.
• If the requested data is not available in the cache, Apollo Client will execute a query to the GraphQL server and get the data from the server after storing it in the cache.

Methods to Use Cache

Once we have the query result from the server in our cache, we can use it through the app without any network requests.

Here’s how:

readQuery

We can use the readQuery method to read the cached query result.

To use this method, we require an instance of Apollo Client, which can be obtained via the useApolloClient hook:

By using this method, we can retrieve the result of a previously executed feed query without the need for additional network requests.

Note: When reading data from the cache, it’s necessary to provide the required variables (params) if they were used when initially executing the query.

Let’s explore the readQuery method.

writeQuery

The writeQuery method allows us to write data to the cache. Assuming the result of the feed query is already present in our cache, here’s a brief overview:

After using the writeQuery method to update the data, it is important to provide it in the same format as the query result.

Also, remember that the writeQuery method only modifies the changes to the local cache and does not impact the server data.

Local only Queries

We can create a new query and manage local states without sending it to the GraphQL server.

For example, we can manage a user’s cart items, which are meant to be managed locally without impacting the server.

Here, we have defined the new local query CART_ITEMS for managing cart items locally. We can add or update items in the cart using the writeQuery writeQuery method and access cart data using the readQuery method.

Wrapping Up

By defining GraphQL queries and using the Apollo Client, we can manage local states simply and efficiently in React Native applications.

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

Stay tuned with the Simform Engineering blog for more updates on the latest tools and technologies.

Follow Us: Twitter | LinkedIn