Apollo Client 3 State Management Examples
Learn how to use AC3 for local and remote state management
Apollo Client 3 is a GraphQL client that allows you to easily query the exact data you need from a GraphQL server. In addition to fetching and mutating data, Apollo analyzes your queries and their results to construct a client-side cache of your data, which is kept up to date as further queries and mutations are run, fetching more results from the server.
We have found that it can be challenging for developers coming from another state management library (like Redux) to fully grasp the AC3-way of doing things.
What we're building
This repo contains several versions of the same Todo app, both Apollo Client and Redux examples, to demonstrate best practices on using Apollo Client to build applications using solely local state in addition to the real-world remote state use case.
Apollo Local State Example
Summary: Using Apollo Client 3's Reactive Variables API (docs/blog post coming soon), we can store the entire application state locally (and optionally persist it using local storage).
Apollo Remote State Example
Summary: Hooking Apollo Client up to a remote GraphQL API, the client-side cache is smart enough to automatically update the cache after most mutations successfully complete. For mutations that perform interactions against arrays or have additional client-side side-effects, we can help the cache decide what to do next by writing our update logic in the
updatefunction. This approach uses the
readQueryAPIs which are recommended for those starting out with Apollo Client.
Apollo Remote State Advanced Cache APIs Example
Summary: This example is the same as the previous remote state example, except that this time, we're using the new AC3 cache manipulation APIs:
cache.evict. This approach is recommended for users who are comfortable with how cache normalization works in Apollo Client and who want direct control over the cache.
Apollo Remote State (No Relay) Example
Summary: This example is the same as the previous remote state example, except that it doesn't use a Relay-style GraphQL schema. This is mostly used for presentations to keep code succinct.
Redux Local State Example
Summary: The Redux architecture provides us with a well-defined mental model for how to update state in an immutable way. We've provided this example in order to compare how to accomplish the same tasks in AC3 and in Redux.