Docs
Launch GraphOS Studio

Managing local state

Interacting with local data in Apollo Client


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

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 cache). You then define the logic that Apollo Client uses to fetch and populate that local data when you a particular . You can even include both local and remotely fetched in the same :

GraphQL ServerCacheApollo ClientGraphQL ServerCacheApollo ClientCalculates local fieldsResolves remote fieldsCaches remote fields*Time passes…Calculates local fieldsFetches remote fields (now cached)Queries local and remote fieldsQueries remote fieldsReturns remote fieldsReturns ALL fieldsExecutes same queryReturns ALL fields

To support this flow, 3 introduces two complementary mechanisms for managing local state:

and
reactive variables
.

* The

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

Field policies and local-only fields
Since 3.0

Field policies enable you to define what happens when you 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

.

A single can include both local-only 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.

Reactive variables enable you to read and write local data anywhere in your application, without needing to use a to do so. The

of a local-only can use a reactive to populate the field's current value.

Reactive aren't stored in the 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, automatically detects that change. Every active with a that depends on the changed variable automatically updates.

In earlier versions of , you define local resolvers to populate and modify local-only . These are similar in structure and purpose to the

.

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

Previous
keyArgs
Next
Local-only fields
Edit on GitHubEditForumsDiscord

© 2024 Apollo Graph Inc.

Privacy Policy

Company