Caching strategies in Supabase - Mini Project: Build & Apply

Implementing Caching Strategies with Supabase

📖 Scenario: You are building a web app that fetches user profiles from a Supabase database. To improve performance and reduce repeated network calls, you want to implement a simple caching strategy in your JavaScript code.

🎯 Goal: Build a caching mechanism that stores fetched user profiles in memory. When a profile is requested, the app should first check the cache before querying Supabase. This reduces unnecessary database calls and speeds up the app.

📋 What You'll Learn

Create a cache object to store user profiles keyed by user ID

Add a configuration variable for cache expiration time in milliseconds

Write a function to fetch user profiles that checks the cache first

Update the cache with fresh data after fetching from Supabase

💡 Why This Matters

🌍 Real World

Caching user data reduces network calls and speeds up web apps, improving user experience.

💼 Career

Understanding caching strategies is essential for cloud developers to optimize app performance and resource usage.

1

Create a cache object

Create a JavaScript object called userCache that will store cached user profiles keyed by user ID.

Supabase

# Your code here
const userCache = {};

Hint

Think of userCache as a simple box where you keep user data for quick access.

2

Add cache expiration configuration

Add a constant called CACHE_EXPIRATION_MS and set it to 300000 (5 minutes in milliseconds) to define how long cached data is valid.

Supabase

const userCache = {};
// Your code here
const CACHE_EXPIRATION_MS = 300000;

Hint

This value controls how long you trust the cached data before fetching fresh data.

3

Write a function to fetch user profiles with cache check

Write an async function called getUserProfile that takes userId as a parameter. Inside, check if userCache[userId] exists and is not expired by comparing timestamps. If valid, return the cached profile. Otherwise, fetch the profile from Supabase using supabase.from('profiles').select('*').eq('id', userId).single() and update the cache with the new data and current timestamp.

Supabase

const userCache = {};
const CACHE_EXPIRATION_MS = 300000;

// Your code here
async function getUserProfile(userId) {
    
}

Hint

Check the cache first. If data is fresh, return it. Otherwise, fetch from Supabase and update the cache.

4

Complete by exporting the function

Add an export statement to export the getUserProfile function as a named export.

Supabase

const userCache = {};
const CACHE_EXPIRATION_MS = 300000;

async function getUserProfile(userId) {
    const cached = userCache[userId];
    const now = Date.now();
    if (cached && (now - cached.timestamp) < CACHE_EXPIRATION_MS) {
        return cached.data;
    }
    const { data, error } = await supabase.from('profiles').select('*').eq('id', userId).single();
    if (error) {
        throw error;
    }
    userCache[userId] = { data, timestamp: now };
    return data;
}

// Your code here
export { getUserProfile };

Hint

Exporting the function allows other parts of your app to use it.

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