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?
B
BeBoRE•16d 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...
J
jaacsen•16d ago
after invalidating can those be fetched with an async caller ? @BeBoRE
B
BeBoRE•16d 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.
J
jaacsen•16d ago
if I used a client component will I need to refresh? Thanks @BeBoRE !
B
BeBoRE•16d ago
No you don’t, if only use the query in client components just invalidate the query and you’ll be good.
J
jaacsen•16d 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)
B
BeBoRE•16d ago
React Query does this for you, there is no need to do this
More Posts
Quick question: how to get mutation body in a middleware, which is for a global logging?Hi everyone!Quick question: The pic shows that the output of "input" is undefined. Is there any anotError with v11 when using batchingI'm using the lastest version of v11. When I use the batch link I get an trpc inernal error when battRPC failed on <no-path>: `headers` was called outside a request scopeI'm using NPM GET /api/trpc/post.test?batch=1&input=%7B%220%22%3A%7B%22json%22%3Anull%2C%22meta%22%v11 `Invalid Content-Type header`The most recent update of v11 seems to break with: ``` Invalid Content-Type header. This request mayCalling procedures from Next server actionsHi, is using trpc client allowed in server actions? I have two use cases, in one i call procedure frTRPC Typescript auto serialize errorThe inferred type of this node exceeds the maximum length the compiler will serialize. An explicit tTRPC with MSWDoes anyone have a basic example on how to set up MSW in a React Vite TRPC env? My main question isRevalidate / invalidate in server componentsIs there a solution for TRPC query invalidation (or revalidating), passing the actions from the clieTypescript type error with latest versionI'm initialising a project with trpc v11 and I'm trying to strictly follow the documentation for reaDon't understand cacheHow come my API is still getting called when it's already been called with other inputs? Ex: 1. api The inferred type of this node exceeds the maximum length the compiler will serialize.I'm facing this issue. The inferred type of this node exceeds the maximum length the compiler will sGetting strange react error in nextjsI am getting a strange Error Message when nextjs tries to compile: ```js TypeError: react__WEBPACK_Error on NextJs AppRouterAnyone knows why this is showing on my console?TRPC Dynamic Procedure URLI am currently using QStash as a message queue with TRPC. QStash is HTTP-based and in the example beIs it possible to get the procedure name / id in middleware?I want to create a caching middleware that in some routes, stores a cache key that contains the routqueries and mutations has wrong response type in client ( monorepo )tRPC + React Query Data Invalidation?Hey y'all, I'm working with tRPC and React Query and just trying to understand how this works. I havtrpc optimistic updates causing data flickerI'm trying to add optimistic updates to a calendar component but when the mutate function is called > Error: Invariant: headers() expects to have requestAsyncStorage, none availableHi, I use trpc v1045.1 in next 14.1 app router. I call it server side and have the following. ```js How do I exclude properties while returning data?I basically need to create a dto's that would exclude properties like access keys etc. while returni