Supabase Server + Browser Client Best Practice - When to do loader + serverFn vs client useQueries
I'm using supabase with both the browser and server clients. Using tanstack query to run functions has gotten a bit confusing due to the shared responsibilities when
1. Using loader function to ensure the query data is there (lets say a Contact object with id 1). To do this i must have the query options somewhere with the correct key and queryFn
But doesn't this queryFn needs to be a serverFn / call a serverFn due to loader running on the server (at least initially) and not having access to the browser supabase client
2. After loading the page, I want to be able to make updates which will be reflected immediately on the page. If i do a mutation, i'll invalidate the key, and i need to have a hook in my client page component (useQuery) with that key and a queryFn which will do the refetching from the database.
But currently I'm writing these hooks to use the browser client supabase instance
This creates a duplication, where I need to write the same query twice, once as a serverFn where it'll be using supabase server instance to do the initial loading, and another identical query to do the refetching for my client side hook
Does this make sense? Is this recommended. I'm really new to everything so I don't know if this is a good practice but it feels redundant to have to write the same thing twice client side and server side.
Do i need to choose to either have everything run in the client or the server, or is this hybrid approach actually good? Is there a way to unify these client side and server side queries together to have a more maintainable codebase to work with? Or should I just do everything as a server function and not bother with client side supabase at all. Because it seemed a bit faster and cleaner to use both
0 Replies