Cache management in GraphQL - Step-by-Step Execution

Concept Flow - Cache management

Client sends GraphQL query

↓

Check cache for query result

↓

Return cached

↓

Display data

↓

Display data

The client sends a query, the system checks if the result is cached. If yes, it returns cached data; if no, it fetches from server, caches it, then returns.

Execution Sample

GraphQL

query GetUser {
  user(id: "1") {
    id
    name
  }
}

A GraphQL query requesting user data by ID, which will be checked against cache before fetching.

Execution Table

Step	Action	Cache Check	Cache Hit?	Data Source	Cache Update	Output
1	Receive query GetUser	Check cache for GetUser	No	Server fetch	Store result in cache	User data from server
2	Receive same query GetUser again	Check cache for GetUser	Yes	Cache	No update	User data from cache
3	Receive query GetPost	Check cache for GetPost	No	Server fetch	Store result in cache	Post data from server
4	Receive query GetUser	Check cache for GetUser	Yes	Cache	No update	User data from cache
5	End of requests	-	-	-	-	-

💡 Execution stops after processing all queries and returning data from cache or server.

Variable Tracker

Cache State	Start	After Step 1	After Step 2	After Step 3	After Step 4	Final
Cached Queries	Empty	GetUser data stored	GetUser data stored	GetUser and GetPost data stored	GetUser and GetPost data stored	GetUser and GetPost data stored

Key Moments - 2 Insights

Why does the system fetch data from the server on the first query but not on the second?

Because the first time the query is not in cache (see execution_table row 1), so it fetches from server and stores it. The second time (row 2), the query result is cached, so it returns cached data.

What happens if a new query is sent that is not in the cache?

The system fetches data from the server and then stores the result in the cache for future use, as shown in execution_table row 3.

Visual Quiz - 3 Questions

Look at the execution table, at which step does the cache first get updated?

A Step 3

B Step 1

C Step 2

D Step 4

💡 Hint

Check the 'Cache Update' column in execution_table rows.

According to the variable tracker, what queries are cached after step 3?

A GetUser and GetPost

B Only GetPost

C Only GetUser

D No queries cached

💡 Hint

Look at the 'Cached Queries' row in variable_tracker after step 3.

If the cache was cleared after step 2, what would happen at step 4?

A Data would be fetched from cache

B No data would be returned

C Data would be fetched from server

D An error would occur

💡 Hint

Refer to execution_table row 4 and consider cache state changes.

Concept Snapshot

Cache management in GraphQL:
- Client sends query
- System checks cache for query result
- If cached, return cached data
- If not, fetch from server and cache result
- Subsequent same queries use cache for faster response

Full Transcript

Cache management in GraphQL works by first checking if the requested query result is already stored in cache. If it is, the cached data is returned immediately, saving time and resources. If not, the system fetches the data from the server, stores it in the cache, and then returns it. This process repeats for each query, improving performance by reducing server calls for repeated queries.

Practice

1. What is the main purpose of cache management in GraphQL?

easy

A. To temporarily store data for faster repeated requests

B. To permanently save all data in the database

C. To delete all data after each request

D. To encrypt data for security

Solution

1. Step 1: Understand cache management purpose

   Cache management is used to store data temporarily to speed up access.

2. Step 2: Compare options with cache purpose

   Only To temporarily store data for faster repeated requests matches the temporary storage for faster repeated requests.

3. Final Answer:

   To temporarily store data for faster repeated requests -> Option A

4. Quick Check:

   Cache speeds up repeated requests = A [OK]

Hint: Cache means temporary storage for speed [OK]

Common Mistakes:

• Thinking cache stores data permanently
• Confusing cache with encryption
• Assuming cache deletes data immediately

2. Which of the following is the correct way to specify a cache key argument in a GraphQL query?

easy

A. query { user(id: 1) @cacheKey(key: "id") { name }

B. query { user(id: 1) @cache(key: "id") { name }

C. query { user(id: 1) @cacheKey(id) { name }

D. query { user(id: 1) @cacheKey(key: id) { name }

Solution

1. Step 1: Identify correct syntax for cache key argument

   The cache key argument uses @cacheKey with a key string in quotes.

2. Step 2: Check each option's syntax

   query { user(id: 1) @cacheKey(key: "id") { name } correctly uses @cacheKey(key: "id") with quotes around key name.

3. Final Answer:

   query { user(id: 1) @cacheKey(key: "id") { name } -> Option A

4. Quick Check:

   Cache key argument needs quotes = A [OK]

Hint: Cache keys need quotes around key name [OK]

Common Mistakes:

• Omitting quotes around key name
• Using wrong directive name like @cache
• Passing key without key: label

3. Given the following GraphQL query with cache expiry set to 60 seconds:

query { product(id: 5) @cacheControl(maxAge: 60) { name price } }

What happens if you request the same product again within 30 seconds?

medium

A. An error occurs due to cache expiry mismatch

B. The server fetches fresh data ignoring the cache

C. The cache is cleared and data is refetched

D. The cached data is returned without fetching from the server

Solution

1. Step 1: Understand maxAge cache expiry

   maxAge: 60 means cache is valid for 60 seconds after storing data.

2. Step 2: Check request timing

   Request within 30 seconds is before expiry, so cached data is used.

3. Final Answer:

   The cached data is returned without fetching from the server -> Option D

4. Quick Check:

   Request before maxAge returns cache = C [OK]

Hint: Cache valid until maxAge seconds pass [OK]

Common Mistakes:

• Assuming cache expires immediately
• Thinking server always refetches
• Confusing maxAge with minimum age

4. Identify the error in this GraphQL cache directive usage:

query { user(id: 10) @cacheControl(maxAge: "thirty") { name email } }

medium

A. The directive name should be @cacheKey, not @cacheControl

B. The user id must be a string, not a number

C. maxAge value must be a number, not a string

D. The query is missing a required fragment

Solution

1. Step 1: Check maxAge argument type

   maxAge expects a numeric value representing seconds, not a string.

2. Step 2: Analyze the given value

   "thirty" is a string, causing a type error in cacheControl directive.

3. Final Answer:

   maxAge value must be a number, not a string -> Option C

4. Quick Check:

   maxAge needs number, not string = B [OK]

Hint: maxAge must be numeric, no quotes [OK]

Common Mistakes:

• Using string instead of number for maxAge
• Confusing directive names
• Assuming id type causes cache error

5. You want to cache a list of posts but ensure that each post is cached separately by its unique ID. Which cache management strategy should you use in your GraphQL schema?

hard

A. Cache the entire posts list as one entry without keys

B. Use a cache key argument with the post ID to store each post individually

C. Disable caching for posts to always fetch fresh data

D. Set a global cache expiry time for all posts together

Solution

1. Step 1: Understand caching by unique keys

   Caching each post separately requires using a cache key based on post ID.

2. Step 2: Evaluate options for separate caching

   Only Use a cache key argument with the post ID to store each post individually uses cache key argument to store posts individually by ID.

3. Final Answer:

   Use a cache key argument with the post ID to store each post individually -> Option B

4. Quick Check:

   Cache by unique ID key = D [OK]

Hint: Cache items individually using unique keys [OK]

Common Mistakes:

• Caching entire list as one entry
• Relying only on global expiry without keys
• Disabling cache unnecessarily