Launch GraphOS Studio

Managing local state

Interacting with local data in Apollo Client

At its core, Apollo Client is a state management library that happens to use GraphQL to interact with a remote server. Naturally, some application state doesn't require a remote server because it's entirely local.

Apollo Client enables you to manage local state alongside remotely fetched state, meaning you can interact with all of your application's state with a single API.

How it works

You can store your application's local state any way you want (such as in localStorage or the Apollo Client cache). You then define the logic that Apollo Client uses to fetch and populate that local data when you query a particular . You can even include both local and remotely fetched s in the same query:

Apollo ClientCacheGraphQL ServerQueries local and remote fieldsCalculates local fieldsQueries remote fieldsResolves remote fieldsReturns remote fieldsCaches remote fields*Returns ALL fieldsTime passes…Executes same queryCalculates local fieldsFetches remote fields (now cached)Returns ALL fieldsApollo ClientCacheGraphQL Server

To support this flow, Apollo Client 3 introduces two complementary mechanisms for managing local state: field policies and reactive variables.

* The local resolver API from previous versions of Apollo Client is also available but is deprecated. Some additional steps may occur when using this, e.g. the @client(always:true) would recalculate local s after remote fields are cached.

Field policies and local-only fields
Since 3.0

Field policies enable you to define what happens when you query a particular , including fields that aren't defined in your GraphQL server's schema. By defining policies for these local-only fields, you can populate them with data that's stored anywhere, such as in localStorage or reactive variables.

A single GraphQL query can include both local-only s and remotely fetched fields. In the field policy for each local-only field, you specify a function that defines how that field's value is populated.

Get started with local-only fields

Reactive variables enable you to read and write local data anywhere in your application, without needing to use a GraphQL to do so. The field policy of a local-only can use a reactive to populate the field's current value.

Reactive s aren't stored in the Apollo Client cache, so they don't need to conform to the strict structure of a cached type. You can store anything you want in them.

Whenever the value of a reactive changes, Apollo Client automatically detects that change. Every active query with a that depends on the changed variable automatically updates.

Get started with reactive variables

In earlier versions of Apollo Client, you define local resolvers to populate and modify local-only s. These s are similar in structure and purpose to the resolvers that your GraphQL server defines.

This functionality is still available in Apollo Client 3, but will be moved out of the core module in a future major release.

Learn more about local resolvers

Local-only fields
Edit on GitHubEditForumsDiscord