Apollo Client Cache

In the past, we encountered issues when Apollo Client returned stale data from its cache, and we fixed these issues by re-fetching data from a server after performing a mutation. While this works, it’s far from efficient because we’re downloading all objects from the server again, even if we’re only changing or adding a single object. Instead, we can just update Apollo Cache without sending another request.

In this lesson, we’ll learn about how Apollo Client stores data in its cache and how we can inspect its content. Then, in the next lesson, we’ll learn how to manually update Apollo Client’s cache to implement more efficient applications.

Cache in Apollo Client

Before we start, let’s briefly recap what cache is in Apollo Client and what it’s for. A cache is storage maintained by the GraphQL client that stores objects received from the GraphQL API. Apollo Client uses data in the cache to quickly return data for GraphQL queries.

All objects returned from a GraphQL API are stored in a local cache unless configured otherwise.

When Apollo Client updates data in a cache, it also sends this updated data to all the components that depend on this data. For example, if we have several components that have fetched data using the allProducts query, and one of the components ...