jaacsen
jaacsen2mo ago

How can I show real-time post's replies/comments after a successful a reply mutation?

After submitting a successful reply mutation, I want to show a real-time UI update on my frontend?
7 Replies
BeBoRE
BeBoRE2mo ago
Invalidate the query that fetches the replies https://trpc.io/docs/client/react/useUtils#query-invalidation
useUtils | tRPC
useUtils is a hook that gives you access to helpers that let you manage the cached data of the queries you execute via @trpc/react-query. These helpers are actually thin wrappers around @tanstack/react-query's queryClient methods. If you want more in-depth information about options and usage patterns for useContext helpers than what we provide h...
jaacsen
jaacsen2mo ago
after invalidating can those be fetched with an async caller ? @BeBoRE
BeBoRE
BeBoRE2mo ago
What do you mean by async caller? I assume you mean can you invalidate server-components? The answer is no, you'll need to refresh the page.
Functions: useRouter | Next.js
API reference for the useRouter hook.
jaacsen
jaacsen2mo ago
if I used a client component will I need to refresh? Thanks @BeBoRE !
BeBoRE
BeBoRE2mo ago
No you don’t, if only use the query in client components just invalidate the query and you’ll be good.
jaacsen
jaacsen2mo ago
Thanks! Another question if thats okay, I want to use useMemo to cache fetched data in a client component, how can I achieve that here:
const { data: comments } = trpc.reviews.getComments.useQuery(reviewId)
const { data: comments } = trpc.reviews.getComments.useQuery(reviewId)
BeBoRE
BeBoRE2mo ago
React Query does this for you, there is no need to do this