apollo-caching-strategies

Configure Apollo Client InMemoryCache typePolicies and fetch policies.

187|20|Updated Nov 20, 2025
One-click install
npx skills add https://github.com/TheBushidoCollective/han --skill apollo-caching-strategies
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: apollo-caching-strategies
Source: https://github.com/TheBushidoCollective/han/tree/main/jutsu/jutsu-apollo-graphql/skills/apollo-caching-strategies
Command: npx skills add https://github.com/TheBushidoCollective/han --skill apollo-caching-strategies

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This Skill teaches caching strategies in Apollo Client, including fetch policies, optimistic UI, and cache normalization.

Core Features & Use Cases

  • Fetch Policies: cache-first, cache-only, cache-and-network, network-only, no-cache, standby.
  • Optimistic UI: Instant UI updates during mutations.
  • Cache Updates & Normalization: Normalized caching with type policies.

Quick Start

Implement a posts query with a cache-first fetch policy and an optimistic UI for a new post.

Frequently Asked Questions about apollo-caching-strategies

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I configure fetch policies in Apollo Client to control when data is cached versus fetched?

Fetch policies determine Apollo's data retrieval strategy. Set fetchPolicy on queries to cache-first (use cache, fetch if missing), cache-only (cache only), cache-and-network (both simultaneously), network-only (always fetch), no-cache (never cache), or standby (inactive). Each policy balances freshness against network overhead.

What's the best way to implement optimistic UI updates in Apollo mutations?

Optimistic UI updates render changes instantly before the server responds. Configure the mutation's optimisticResponse option with predicted data, then Apollo merges the mutation result into cache when it arrives. This eliminates perceived latency and improves perceived responsiveness for user actions.

How do I normalize and deduplicate cached data in Apollo Client?

Normalization stores entities by type and ID instead of nested hierarchies. Configure InMemoryCache with typePolicies to define how entities are identified and merged. Use read and write functions to customize field behavior, preventing duplicate data and enabling consistent updates across queries.

Can I update Apollo cache without refetching data after a mutation completes?

Yes. Use the update function in mutations to manually write cache changes, or configure typePolicies with merge functions for automatic normalization. This avoids redundant network requests and keeps UI in sync without triggering fresh queries.

Why does my Apollo cached data feel stale, and how do I balance freshness with performance?

Stale data results from aggressive caching. Use cache-and-network to refresh background data, or cache-first with selective network-only queries for critical updates. Pair with cache expiration logic in typePolicies to evict old data and balance instant responses against data currency.

Does Apollo Client caching work with React pagination and large datasets?

Yes. Use typePolicies with custom merge functions to concatenate paginated results, or cache-and-network to fetch new pages while displaying cached ones. Implement offset or cursor-based pagination in fetch policies to manage data volume and prevent memory bloat.