Cache management in GraphQL

Introduction

Cache management helps store data temporarily to make fetching faster. It reduces waiting time when you ask for the same data again.

When you want to speed up repeated data requests in a GraphQL API.

When your app shows data that doesn't change often and you want to avoid asking the server every time.

When you want to reduce the load on your database by reusing stored results.

When you want smoother user experience by loading data quickly from cache.

When you want to control how long data stays fresh before updating it.

Syntax

GraphQL

cache: {
  keyArgs: [String],
  merge(existing, incoming) {
    return mergedData;
  },
  read(existing) {
    return data;
  },
  maxAge: Number
}

keyArgs defines which query arguments are used to identify cached data.

merge controls how new data is combined with existing cached data.

Examples

This example disables argument-based caching and merges lists by appending new items.

GraphQL

cache: {
  keyArgs: false,
  merge(existing, incoming) {
    return [...(existing || []), ...incoming];
  }
}

This example caches data based on the 'id' argument and returns cached data as is.

GraphQL

cache: {
  keyArgs: ['id'],
  read(existing) {
    return existing;
  }
}

This example sets cached data to expire after 60 seconds (60000 milliseconds).

GraphQL

cache: {
  maxAge: 60000
}

Sample Program

This example shows a simple cache configuration for user data. It merges new user data into the cache and reads it back. The maxAge sets cache expiry time (not used in this simple demo).

GraphQL

const cacheConfig = {
  keyArgs: ['userId'],
  merge(existing = [], incoming) {
    return [...existing, ...incoming];
  },
  read(existing) {
    return existing;
  },
  maxAge: 300000
};

// Simulate cache usage
let cache = [];

// Incoming data from server
const incomingData = [{ id: 1, name: 'Alice' }, { id: 2, name: 'Bob' }];

// Merge incoming data into cache
cache = cacheConfig.merge(cache, incomingData);

// Read data from cache
const cachedData = cacheConfig.read(cache);

console.log(cachedData);

Important Notes

Cache keys help identify which data belongs where in the cache.

Always think about how fresh your data needs to be when setting cache expiry.

Merging data properly avoids losing information when new data arrives.

Summary

Cache management stores data temporarily to speed up repeated requests.

Use key arguments to control how data is stored and retrieved.

Set expiry times to keep data fresh and avoid stale information.

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