Class Central is learner-supported. When you buy through links on our site, we may earn an affiliate commission.

egghead.io

Manage State in React Apps with Apollo Client and GraphQL

via egghead.io

Overview

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.

Syllabus

  • 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

Taught by

Rares Matei

Reviews

Start your review of Manage State in React Apps with Apollo Client and GraphQL

Never Stop Learning.

Get personalized course recommendations, track subjects and courses with reminders, and more.

Someone learning on their laptop while sitting on the floor.