Introduction to Caching in Apollo

In part 2 of this tutorial, we learned about refetching queries after a mutation completes. There's actually a second way we can do this: updating the Apollo Cache.

Apollo stores your data for you in a normalized, in-memory cache. This basically just means it keeps track of your data and can access it super fast. We set up this cache when we first configured the client in part 1 of this tutorial.

Instead of refetching queries, it's possible to just add items or remove them from the cache after a mutation. In fact, with updating an item, this is the default behavior so long as the ID is returned from the update mutation. We can actually just remove the refetchQueries option from the update habit mutation to see this in action:

const [updateHabit, { error, loading }] = useMutation(UPDATE_HABIT_MUTATION, {
    onCompleted: () => onEditSuccess(),
  });

Let's try this ourselves with adding a habit in the next video.

Helpful Links on Apollo Cache

• Apollo Client Devtools
• Apollo Docs: Cache Configuration
• Apollo Docs: Cache Integration
• Apollo Docs: Updating the Cache After a Mutation