BlogsShopifyApollo Client Cache Management

Apollo Client Cache Management

Apollo Client Cache Management

1
posts
2022

This feature thread tracks the development and enhancement of Shopify's use and understanding of the Apollo GraphQL client cache. Initial efforts focused on migrating from Apollo Client 2 to 3, which revealed past bugs and misunderstandings related to the cache's behavior. This post details the internal workings of the InMemoryCache, including data fetching policies, normalization strategies (object breakdown, unique cache identifiers using `__typename` and `id` or custom `keyFields`, and flattened data structures), and the mechanisms for updating and merging data. It also explores scenarios where automatic UI updates fail and the need for custom update functions or explicit return data. Future development will likely involve further optimization, advanced cache strategies, and addressing complex data scenarios.

2022

Apollo Cache is Your Friend, If You Get To Know It - Shopify

11/9/2022

This post provides a deep dive into the Apollo Client's InMemoryCache, explaining its lifecycle stages: Fetching, Normalization, Updating and Merging, and Garbage Collection/Eviction. It details how data is stored in a flattened structure using normalized keys derived from `__typename` and `id` (or custom `keyFields`), and explains the conditions under which the cache automatically updates the UI versus when manual intervention (update functions) is required. The post also revisits an earlier example of a GraphQL query returning unexpected data due to a missing `slug` field, implying that understanding the cache's normalization and merging behavior is key to debugging such issues.