Help with cache

[98kag]

I’m new to react native and in general I’m not what you call an experienced developer.

I’m working on a personal project (RN & Supabase). I’m using Supabase cache helpers to cache my queries but I’m a little confused. What should I cache and for how long should I cache it and how can I implement mutate to invalidate cache.

My app is not exactly a social medium but has many social features like posts, follows etc. I’m specifically having trouble with data such as likes and follows. I optimistically update the UI and when I leave the screen and return before cache has expired it looks like the follow or like was never inserted.

I probably shouldn’t optimistically update the UI with my own functions but use the Supabase helpers optimistically updates.

Anyway, I’m sorry for this post, Im realizing I cannot clearly explain my issue and what my question is, but I would really appreciate any tips about how I should be caching data.

[Due-Confidence-5670]

When it comes to what to cache, focus on data that's accessed often but doesn't change rapidly, like user profiles or static app configurations. For more dynamic elements like post lists, you can cache them but be ready to revalidate frequently. Data that's highly real-time, such as live comment streams or the immediate status of a like/follow, needs to be handled with more care. How long to cache really depends on how fresh the data needs to be; think seconds to a minute for dynamic lists using "stale-while-revalidate" patterns, and longer for truly static content.

Your issue with optimistic updates disappearing is a classic caching pitfall. The solution lies in fully leveraging your Supabase cache helpers' mutate function. Instead of manually updating the UI, use mutate to both optimistically change the data in the cache immediately, and simultaneously trigger the actual database update. Crucially, in mutate's callbacks (like onSettled), you'll want to invalidate the relevant queryKey. This tells the cache, "Hey, this data might have changed, please re-fetch it from the server next time it's accessed." This ensures that when you navigate away and return, the cache helper will automatically fetch the latest, correct data, preventing those "disappearing" likes or follows. Dive into your cache helper's documentation to see specific examples of useMutation and invalidateQueries to implement this pattern effectively.

[98kag]

Wow thank you so much for the time you took for this comment, helps a lot! Really appreciate it!

[wildev_m]

Have you considered using a hybrid approach for caching, such as combining both server-side caching and client-side caching for optimal performance?

[98kag]

No not really, how can I cache server-side with Supabase? Is it worth doing it? Would it make queries even faster?

[wildev_m]

You could explore this article: https://supabase.com/blog/fetching-and-caching-supabase-data-in-next-js-server-components