Quick Summary

Apart from fetching, storing and modifying GraphQL queries with Apollo client, we can also use it to manage global state/variables in our application. It could be used similarly to a redux state where we define the shared states at the global level so that they can be accessed or modified from anywhere in the application. In this post, we will take a look at how to achieve this using the Apollo client.

Getting started

To get started with using a global state, we need to look at the following

• Defining a local variable

• Reading a local variable

• Writing and updating a local variable

While using Apollo client or GraphQL, anything that is not fetched from the server is known as a local variable or a local state. But it should not be confused as a local state in the context of React, where local state usually means a component's state which can not be accessed outside of the component or globally.

Defining a local variable

To define a local variable, Apollo provides the makeVar method. It is very similar to using the useState hook from React and perhaps a bit more simplified.

import { makeVar } from '@apollo/client';

export const username = makeVar('');

Here, we have defined a local variable called username using makeVar. The value passed to the makeVar method is the initial value of the variable.

While using typescript, the type for the variable can be defined with makeVar.

export const username = makeVar<string>('');

We can also include them in the query fields while fetching data from the server by using @client keyword after the local fields in our query.

 query UserDetails($userID: ID!) {
  user(id: $userID) {
    name
    language
    username @client # local-only field
  }
}

These local variables can be defined anywhere in the application but to keep things organised we can define them close to or in the same directory where we initialise the Apollo client.

Depending upon our application size and how extensively we are using local variables, we can define them all in a single file or structure them in multiple files and directories.

Now we can start using username as a global variable in our application.

Reading a local variable

To read the variable that we just defined, we will import it into a component and execute it as a function to get the value stored in it.

import { username } from 'src/graphql/cache';

console.log(username()); // output ''

Reading a local variable is quite straightforward. Unlike redux, It does not require wrapping the component with connect and so forth. Which also makes it easy to use outside of just react components.

Writing and updating a local variable

To write or update the value of the local variable, we need to import it and execute it similarly to the reading part but this time we will be passing an argument to it.

const onChangeUsername = (value) => {
    username(value)
}

Assuming onChangeUsername is our onChange event handler for the username input. So when it is triggered, we call the username method while passing the value to it as an argument. This will update the current value of the username variable.

Now if we try to read the username, it will return the current value that we updated.

With this, we can start defining variables that are used globally in the application and manage them using the Apollo client.

Conclusion

We defined a simple variable using the makeVar method from Apollo client. And we learned how to read and update the variable from anywhere in the application.