Cache management in GraphQL - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ query_result

intermediate

Cache Behavior with Query Variables

Consider a GraphQL client cache that stores query results keyed by query and variables. If you run the following query twice with different variables, what will be the cache content after both queries?

query GetUser($id: ID!) {
  user(id: $id) {
    id
    name
  }
}

First run with {"id": "1"}, second run with {"id": "2"}.

A {"GetUser:{id:1}": {"user": {"id": "1", "name": "Alice"}}, "GetUser:{id:2}": {"user": {"id": "2", "name": "Bob"}}}

B {"GetUser": {"user": {"id": "2", "name": "Bob"}}}

C {"GetUser:{id:1}": {"user": {"id": "1", "name": "Alice"}}}

D {}

💡 Hint

Think about how cache keys include variables to distinguish query results.

The cache stores results separately for each unique set of variables. So after running the query twice with different id values, the cache holds two entries keyed by the query and variables.

🧠 Conceptual

intermediate

Cache Invalidation Strategy

Which cache invalidation strategy is best suited for a GraphQL client cache when a mutation updates a user's name?

A Evict only the cache entry for the updated user by its ID

B Clear the entire cache to avoid stale data

C Do nothing and rely on automatic cache expiration

D Evict unrelated queries to force full refetch

💡 Hint

Think about minimizing unnecessary data loss while keeping cache fresh.

Evicting only the cache entry for the updated user keeps the cache mostly intact and ensures the updated data is fetched fresh next time.

📝 Syntax

advanced

Correct Cache Update After Mutation

Given this mutation and cache update snippet, which option correctly updates the cache to reflect the new user name?

mutation UpdateUserName($id: ID!, $name: String!) {
  updateUser(id: $id, name: $name) {
    id
    name
  }
}

Cache update function:

cache.modify({
  id: cache.identify({ __typename: 'User', id: $id }),
  fields: {
    name() {
      return $name;
    }
  }
});

A Correct as is, updates the 'name' field in cache for the user

B Should use cache.writeFragment instead of cache.modify

C cache.modify cannot update scalar fields like 'name'

D The 'fields' function should accept existing value as argument and return new value

💡 Hint

Check the signature of the fields functions in cache.modify.

The fields functions receive the existing field value as an argument and should return the new value. The code misses the argument, so it won't update correctly.

🔧 Debug

advanced

Why Cache Read Returns Null?

After running a query, reading from the cache returns null unexpectedly. Which of the following is the most likely cause?

A The cache is corrupted and needs to be reset

B The cache key does not match because variables differ from the query used to read

C The query has a syntax error causing cache read failure

D The server returned null data, so cache stores null

💡 Hint

Think about how cache keys are constructed with query and variables.

If the variables used to read from the cache differ from those used to write, the cache key won't match and the read returns null.

❓ optimization

expert

Optimizing Cache Updates for Nested Queries

You have a nested query fetching a user and their posts. After adding a new post via mutation, which cache update approach is most efficient to reflect the new post in the user's posts list without refetching the entire query?

query GetUserWithPosts($id: ID!) {
  user(id: $id) {
    id
    name
    posts {
      id
      title
    }
  }
}

A Do nothing and rely on polling to update the cache

B Evict the entire user cache entry to force refetch

C Use cache.modify to append the new post to the user's posts field

D Write the entire query result again with cache.writeQuery

💡 Hint

Think about updating only the changed part of the cache efficiently.

Using cache.modify to append the new post to the existing posts array updates the cache efficiently without refetching or overwriting unrelated data.