Caching strategies in Supabase - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Cache Invalidation

Which caching strategy ensures that cached data is updated only when the original data changes, minimizing stale data?

A Cache-aside where application checks cache first and updates cache on misses

B Write-through caching where data is written to cache and database simultaneously

C Event-driven invalidation where cache is cleared when data changes occur

D Time-based expiration where cache clears after a fixed time interval

💡 Hint

Think about how the cache knows when to update without waiting for a timer.

Event-driven invalidation updates the cache immediately when data changes, preventing stale data. Other methods rely on time or application checks, which can cause delays.

❓ Architecture

intermediate

Choosing Cache Location for Supabase

You want to reduce latency for users globally accessing your Supabase database. Which caching location provides the best balance between speed and data freshness?

A Edge caching using a CDN close to users

B Client-side caching in the user's browser

C Server-side caching within the Supabase backend

D Database-level caching inside Supabase's Postgres

💡 Hint

Consider where the cache is closest to users and how often data changes.

Edge caching via CDN places cached data near users globally, reducing latency while maintaining reasonable freshness. Client-side caches can be inconsistent, server-side caches add latency, and database caches are less global.

❓ Configuration

advanced

Configuring Cache-Control Headers in Supabase Storage

You want to configure your Supabase Storage bucket to cache images in browsers for 1 day. Which Cache-Control header value achieves this?

A "no-cache, no-store"

B "private, max-age=3600"

C "public, max-age=31536000, immutable"

D "public, max-age=86400"

💡 Hint

1 day equals 86400 seconds. Public means cacheable by browsers and CDNs.

"public, max-age=86400" tells browsers and CDNs to cache the content for 1 day. "private" restricts caching to browsers only, "no-cache" disables caching, and "immutable" is for long-term caching.

❓ security

advanced

Cache Security Risks in Supabase APIs

Which caching practice can lead to exposing sensitive user data when using Supabase APIs?

A Using cache invalidation on data updates

B Caching authenticated API responses without user-specific keys

C Caching public data responses with short expiration

D Encrypting cached data at rest

💡 Hint

Think about what happens if cache stores data for multiple users together.

Caching authenticated API responses without separating by user can cause one user to see another's data. Proper cache keys per user prevent this risk.

❓ service_behavior

expert

Supabase Realtime Cache Behavior

When using Supabase Realtime to listen for database changes, what happens to cached data in your application if you do NOT update the cache on receiving events?

A Cache remains stale until manually refreshed or expired

B Cache automatically updates with new data from Realtime events

C Cache clears itself when Realtime events occur

D Cache duplicates data causing inconsistent reads

💡 Hint

Realtime events notify your app, but do not change cache automatically.

Supabase Realtime sends events but does not modify your cache. Your app must update or invalidate cache on events to keep data fresh.

Practice

1. What is the main purpose of caching in Supabase applications?

easy

A. To store data temporarily and speed up data access

B. To permanently save all user data

C. To delete old data from the database

D. To encrypt data for security

Solution

1. Step 1: Understand caching basics

   Caching temporarily stores data to avoid repeated database calls.

2. Step 2: Identify caching purpose in Supabase

   It speeds up app performance by quickly providing stored data.

3. Final Answer:

   To store data temporarily and speed up data access -> Option A

4. Quick Check:

   Caching = Temporary storage for speed [OK]

Hint: Caching means temporary storage to speed up access [OK]

Common Mistakes:

• Thinking caching permanently saves data
• Confusing caching with encryption
• Believing caching deletes data

2. Which of the following is the correct way to set a cache TTL (time-to-live) in Supabase client code?

easy

A. cache.set('key', value, { ttl: 300 })

B. cache.set('key', value, ttl=300)

C. cache.set('key', value, timeout: 300)

D. cache.set('key', value, expire: 300)

Solution

1. Step 1: Review Supabase cache TTL syntax

   Supabase uses an options object with a ttl property to set time-to-live.

2. Step 2: Match correct syntax

   cache.set('key', value, { ttl: 300 }) uses { ttl: 300 } which is the correct way to specify TTL in seconds.

3. Final Answer:

   cache.set('key', value, { ttl: 300 }) -> Option A

4. Quick Check:

   TTL set with { ttl: seconds } object [OK]

Hint: TTL uses { ttl: seconds } object in cache.set [OK]

Common Mistakes:

• Using ttl=300 instead of { ttl: 300 }
• Using wrong property names like timeout or expire
• Passing TTL as a separate argument without object

3. Given this Supabase cache check code:

const cachedData = cache.get('user_123');
if (cachedData) {
  console.log('Cache hit:', cachedData);
} else {
  const data = await supabase.from('users').select('*').eq('id', 123);
  cache.set('user_123', data, { ttl: 600 });
  console.log('Cache miss, fetched:', data);
}

What will be logged if the cache already has data for 'user_123'?

medium

A. Cache miss, fetched: [new data]

B. Cache hit: [cached data]

C. Error: cache.get is not a function

D. No output

Solution

1. Step 1: Check cache.get return value

   If cache has data for 'user_123', cachedData is truthy.

2. Step 2: Follow code logic on cache hit

   Code logs 'Cache hit:' plus cachedData without fetching from database.

3. Final Answer:

   Cache hit: [cached data] -> Option B

4. Quick Check:

   Cache hit logs cached data [OK]

Hint: Cache hit means cachedData exists, logs cache hit [OK]

Common Mistakes:

• Assuming it fetches from database even if cache exists
• Confusing cache miss and hit outputs
• Expecting errors when cache is valid

4. You wrote this code to cache user data but it always fetches from the database:

const cached = cache.get('user_1');
if (!cached) {
  const data = await supabase.from('users').select('*').eq('id', 1);
  cache.set('user_1', data, { ttl: 300 });
}
console.log(cached);

What is the main issue causing the cache miss?

medium

A. TTL is too short to keep data

B. cache.get syntax is incorrect

C. You never update the cached variable after setting cache

D. Database query is wrong

Solution

1. Step 1: Analyze variable assignment

   Variable 'cached' is assigned once before cache.set, so it stays null.

2. Step 2: Understand cache update logic

   After setting cache, 'cached' is not updated to new data, so console.log shows null.

3. Final Answer:

   You never update the cached variable after setting cache -> Option C

4. Quick Check:

   cached variable must update after cache.set [OK]

Hint: Update cached variable after cache.set to avoid misses [OK]

Common Mistakes:

• Assuming cache.set updates cached variable automatically
• Blaming TTL without checking variable assignment
• Thinking cache.get syntax is wrong without error

5. You want to optimize a Supabase app by caching user profile data but ensure updates are reflected quickly. Which caching strategy is best?

hard

A. Cache data without TTL and manually clear cache daily

B. Use very long TTL (e.g., 24 hours) to minimize database calls

C. Never cache user profiles to avoid stale data

D. Use short TTL (e.g., 60 seconds) and refresh cache after updates

Solution

1. Step 1: Consider update frequency and freshness

   User profiles may change, so cache must refresh often to avoid stale data.

2. Step 2: Choose caching strategy balancing speed and freshness

   Short TTL with cache refresh after updates keeps data fresh and speeds access.

3. Final Answer:

   Use short TTL (e.g., 60 seconds) and refresh cache after updates -> Option D

4. Quick Check:

   Short TTL + refresh = fresh and fast cache [OK]

Hint: Short TTL plus refresh keeps cache fresh and fast [OK]

Common Mistakes:

• Using long TTL causing stale data
• Avoiding cache entirely losing speed benefits
• Not refreshing cache after updates