Manage State in React Apps with Apollo Client and GraphQL

At the core of a good client-side GraphQL library is a cache. The cache is very important for improving the efficiency of your data retrieval and providing your users with a clean user experience.

In this course, we’re going to see how Apollo’s powerful cache helps easily solve complex UI problems, such as pagination, handling loading and error states, optimistic updates, and minimizing network requests.

We’ll start from the basics, and look at how to make queries and mutations, but then we’ll look at how the cache is behind most of Apollo’s immediate benefits. We’ll explore in-depth how it works, how it stores data, and how we can manually modify it manually for advanced scenarios.

Even if your backend doesn’t fully support GraphQL yet, we’ll look at how to write GraphQL queries in your components that retrieve local client state under the hood – or that can even make REST API calls.

Course Content

Perform GraphQL queries using Apollo’s useQuery hook

Why have a client-side GraphQL cache?

Use fetch policies in Apollo to keep your queries fast and fresh with the latest data

Handle loading states for your GraphQL queries

Handle GraphQL query error states using Apollo

Use the RetryLink in Apollo to retry queries after an error

Make GraphQL mutations with the useMutation Apollo hook

Understand how Apollo stores data in its cache

Update the local cache automatically when making mutations

Optimise queries to ensure all entities are normalised in the Apollo cache

Handle item deletions in Apollo using refetchQueries

Manually modify the cache to remove deleted items

Use optimistic updates to build UIs that react immediately to user actions

Evict deleted items from the Apollo cache

Use fetchMore and merge field policies to dynamically load more items into a list

Use “read” field policies to query local client state

Use the readField helper to get the ID of items in read field policies

Use reactive variables to hold local client state in Apollo’s cache

Implement cache redirect policies to avoid slow network requests for new queries

Incrementally migrate from REST to GraphQL using the RestLink

Keep queries in sync with the backend by polling for new data

Subscribe to immediate live updates from your server

Append GraphQL subscription updates to existing queries

Provide quick app start-up times by syncing the Apollo cache with local storage