TRPC Fetching pattern
Question about helpful trpc patterns.
Does .useQuery on the client side render multiple times (initial data state, isLoading state, error or promise fulfilled state)?
Right now I'm fetching SSR an initial data state, and then passing that into the client component, as the initial data- and then doing a useQuery for my useUtils invalidate will work correctly and data wont be stale.
Can I simply just make the initial state an empty key value object of the output, or would this become problematic later on down the line- or is having two calls, one at nav and one on mount overkill?
2 Replies
@Kason
Yes. On the client side, useQuery() causes at least 2 renders in most cases like initial render, loading state, success/error state changes.
you can use empty object to initial data. But you need to match shape of it to query output
Unless you will cause runtime error field miss match, so just keep trying to access unexists columns
So if you're using an empty object as a placeholder, be very deliberate about the fallback structure and ensure your components can handle it.
if you're relying on useUtils.invalidate() or mutations that might update data, then having a useQuery active is important to let the cache update automatically.
Thanks for that! Good to know that I'm following best practices here then- I'll continue to develop out using the SSR just for safety, and in the event of not needing that- I'll use an empty model to ensure the page has some reliable state, that is not undefined.
Thats great to hear about the interest! Feel free to DM me, I'm letting people take a week to submit and then i'll shortlist!