Need for local state

Modern Web and mobile applications have become extremely data-driven. Building large single-page applications is complex because of the constantly changing data over time. Detecting these data changes and re-rendering the UI every time is painful.

We want to access all the properties stored in different components of our application in the most optimal way.

Enter Apollo Client

Apollo Client has built-in local state handling capabilities that allow you to store your local data inside the Apollo cache alongside your remote data. To access your local data, just query it with GraphQL. You can even request local and server data within the same query! — Apollo Docs

Let's dive into setting up apollo client and local state:

Setting up Apollo Client 🚀

Apollo Client Config

Now, Apollo Client consists of a few key parts.

Apollo link — This is used to configure the Apollo client’s network layer What that means is the apollo link lets you configure how your queries are sent over HTTP.

This is used to configure the Apollo client’s What that means is the apollo link lets you configure how your queries are sent over HTTP. Cache — Apollo Client uses an Apollo Cache instance to handle its caching strategy.

— Apollo Client uses an Apollo Cache instance to handle its caching strategy. Resolvers — To implement your local state update as a GraphQL mutation

— To implement your local state update as a GraphQL mutation TypeDefs — To optionally set a client-side schema to be used with Apollo Client. This schema is used for introspection in Apollo Client Devtools, where you can explore your schema in GraphiQL.

Lets wire up each of the above parts. We will set up a local state for a property called isDarkModeEnabled .

First, we create a new instance of Apollo InMemoryCache . This is where our local state will live. We then define our network layer so that apollo client connects to the GraphQL server.

getState and writeState are two helper functions that read and write data into the cache. The helper functions implement cache.readData and cache.writeData which act as getter and setter methods on the cache. Next, we initialize our apollo state with defaults. It is important to write an initial state to the cache so any components querying data before a mutation (updating the local state) is triggered don’t error out. Finally, we initialize our Apollo Client.

Let's proceed to define typeDefs and Resolvers. We have a simple schema that defines our application state.

Manging the cache 📝

Apollo cache is the single source of truth or the “store” in redux terms when you use Apollo Client to manage your application state.

With the help of readState and writeState helper functions, we query the initial/current state and then update it with new values. For querying the local state we used @client directive on state to indicate it should be resolved from the Apollo Client cache or a local resolver function.

Now, Let’s see how we can update the app state with a simple example