02 / 03

How is caching handled in GraphQL?

Difficulty: 6/10
client‑side caching, server‑side caching, cache invalidation

Unlike traditional REST APIs, where every resource has its own unique URL (e.g., /api/users/1), GraphQL typically uses a single endpoint (usually /graphql) and relies on POST requests. Because HTTP clients and Content Delivery Networks (CDNs) see the exact same URL for every request, standard HTTP caching doesn't work out of the box. To solve this, the GraphQL ecosystem handles caching in two primary ways: Client-side (Normalized) Caching and Server-side Caching.

Client-Side Caching (Normalized Cache), Popular GraphQL clients like Apollo Client and Urql solve the caching problem by implementing an intelligent client-side cache. Instead of caching the entire HTTP response, they break the data down using normalization.

How Normalization Works:
  1. 1

    Flattening the data: The client takes the nested JSON response from a query and splits it into individual objects.

  2. 2

    Generating unique IDs: It assigns a unique identifier to each object (typically combining the object's __typename and id, e.g., User:1).

  3. 3

    Storing in a key-value map: It saves these objects in a flat lookup table.

  4. 4

    If Query A fetches User 1's name, and Query B later fetches User 1's email, the client merges this data into the same cache entry (User:1). If any query updates User 1, every component on your UI using that user's data updates automatically.

Server-Side Caching: When you need to cache data on the server to protect your database or speed up response times, you generally use three approaches
  1. 1

    Graph-Level Caching (Persisted Queries)

  2. 2

    Cache Control Directives

  3. 3

    Resolver-Level Caching (Data Loader)

Scenario Questions

0-2 years experience

  1. 1Suppose you have a React app using Apollo Client. How would you configure it so that a query for a list of products is cached and reused on subsequent navigations?
  2. 2If you add a new field to a GraphQL type and forget to update the client cache, what will the UI show and why?

2-5 years experience

  1. 1You notice that after a mutation that updates a user's profile, the UI still shows stale data from the cache. Walk me through how you'd debug and fix the caching behavior.
  2. 2When integrating a third‑party REST endpoint via GraphQL federation, what caching strategies would you consider on the gateway versus the downstream services?
  3. 3Explain the trade‑offs between using Apollo's InMemoryCache with normalized data versus a simple key‑value cache for a dashboard that refreshes every minute.

5-8 years experience

  1. 1Design a caching layer for a GraphQL API that serves both low‑latency mobile clients and high‑throughput analytics queries. What components would you introduce and how would you handle cache invalidation across them?
  2. 2Your service experiences a cache stampede on a hot query after a cache expiry. How would you mitigate this at the server level?

8+ years experience

  1. 1Our organization is moving from a monolithic GraphQL server to a distributed mesh with multiple sub‑graphs. How would you evolve the caching strategy to maintain consistency and avoid stale data across teams?
  2. 2Discuss the long‑term maintenance implications of relying on client‑side cache directives versus server‑side HTTP caching for a public GraphQL API that must support versioned schemas.

Follow-up Questions

  • What are the risks of over‑caching a frequently mutated field?
  • How does cache normalization affect eviction and memory usage?
  • When would a CDN be a poor choice for caching GraphQL responses?
Share

Share via WhatsApp, X, Facebook, LinkedIn or copy link. Open Graph preview enabled.