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•4mo ago

Invalidate the query that fetches the replies https://trpc.io/docs/client/react/useUtils#query-invalidation

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•4mo ago

after invalidating can those be fetched with an async caller ? @BeBoRE

BeBoRE•4mo 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•4mo ago

if I used a client component will I need to refresh? Thanks @BeBoRE !

BeBoRE•4mo ago

No you don’t, if only use the query in client components just invalidate the query and you’ll be good.

jaacsen•4mo 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•4mo ago

React Query does this for you, there is no need to do this