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.