T
tRPC

❓-help

Get Query Key on Server

SSebasPtsch12/23/2023
I'm following some recommended practices from one of the react query maintainers @tkdodo and want to invalidate queries from the server in a type-safe way. As a result of this I want to be able to get the query keys for queries on the server to properly invalidate them using a trpc subscription. Is there a clean way to feed the router definition into getQueryKey? At the moment what I'm doing is:
/**
* The main router for the backend, contains all other routers
*/
const appRouter = t.router({
invalidator: publicProcedure.subscription(() => {
return observable<TRPCQueryKey>((emit) => {
ee.on("invalidate", (key) => {
emit.next(key);
});

return () => {
ee.off("invalidate");
};
});
}),
});

export type AppRouter = typeof appRouter;

const rtrpc = createTRPCReact<AppRouter>();

const qk = getQueryKey(rtrpc.thing.getThing, "1"); // use this along with an eventemitter to invalidate queries on the client
/**
* The main router for the backend, contains all other routers
*/
const appRouter = t.router({
invalidator: publicProcedure.subscription(() => {
return observable<TRPCQueryKey>((emit) => {
ee.on("invalidate", (key) => {
emit.next(key);
});

return () => {
ee.off("invalidate");
};
});
}),
});

export type AppRouter = typeof appRouter;

const rtrpc = createTRPCReact<AppRouter>();

const qk = getQueryKey(rtrpc.thing.getThing, "1"); // use this along with an eventemitter to invalidate queries on the client
This is not in the react context and I don't really want to import react in order to get the query key
Solution:
I wouldn’t couple the backend into the frontend state management by trying to dispatch the query key. Instead dispatch a message relevant to your business logic, and on the frontend turn that into a query key for invalidation and optimistic updates, you’ll have a better time
Jump to solution
SSebasPtsch12/23/2023
It looks like I may be able to derive it using callers?
Nnlucas12/24/2023
Where did he recommend this? I think this is pretty far from a good practice. Use the onSuccess callback on the client
SSebasPtsch12/24/2023
Using WebSockets with React Query
A step-by-step guide on how to make real-time notifications work with react-query
Nnlucas12/24/2023
Oh thanks, I see better what you’re trying to achieve now
Solution
Nnlucas12/24/2023
I wouldn’t couple the backend into the frontend state management by trying to dispatch the query key. Instead dispatch a message relevant to your business logic, and on the frontend turn that into a query key for invalidation and optimistic updates, you’ll have a better time
Nnlucas12/24/2023
So dispatch the entity type and id, or just the whole entity, or a general message to invalidate a bunch of stuff
SSebasPtsch12/24/2023
Yeah, the primary issue is that I don't actually want to handle partial updates (with data) as you can't really protect trpc websocket connections with session. I could theoretically publish events per type e.g. invalidateEvent, eventId The react work around does work at the moment. I'll do some more testing but because my frontend state is so closely tied to my backend state through trpc-react I'm trying to keep it that way, extremely type safe

Looking for more? Join the community!

Recommended Posts
ReferenceError: Cannot access 'appRouter' before initializationHi friends im having trouble implementing a "protected" or "private" procedure in TRPC using Next.jstrpc openapi does not work on app routerhttps://github.com/jlalmes/trpc-openapi Can i just know if trpc open api for next is also applicableSubscription types are not inferred while queries and mutations are working fineI am NOT working with a monorepo but while query and mutation types are being inferred out of the boHow are thrown (unhandled) exceptions safe to pass?Hi, I started looking into error handling more and understand that all errors get wrapped in a TRPCECanary useUtils and createTRPCQueryUtils type not callableTrying to access utils object in my application after using `useUtils` or `createTRPCQueryUtils` andtRPC run express under the hood?tRPC run `expressjs` under the hood?Modify mutation error messages?We occasionally get timeouts from cloudfront which gives the user an error about how the cloudfront server-side helpers doesnt work with `Hydrate` and `QueryClient`environtment: node v20.9.0, npm Hi i tried to implement server-side helpers but somehow it just doesUnable to mock unstable_batchStreamLink network responseHi there! I have a couple API endpoints that call third party dependencies and would like to mock a Using trpc with fastify server and nextjs clientHello, is it possible to use fastify for server and have a nextjs client and make use of the SSG / SI can't mutate or query in SvelteKitEnvironment: Node 20 with Yarn I'm not getting any specific errors but I don't get the "mutate" or "TRPCError class, public readonly cause?: Error; this line should have override functionhey i am trying to use the TRPCError for throwing errors in my apps, but i am getting this error, chWhy do people use SplitLink? (http + websocket)Why not just use websockets for everything? Just curious.Force user to loginHow can I redirect the user to "/login" if the user are not logged in?TRPC with middly middleware on lambdaHello, has anyone used middly middleware on AWS lambda? Thanks!tRPC on Vercel Serverless without Next?I would love to be able to use tRPC in a vercel serverless context, but not in a Next app – just theUsage with zod-validation-errorHas anyone tried using trpc with https://www.npmjs.com/package/zod-validation-error ?Errors while running mutations when deploying CT3A using SSTI'm currently migrating a NextJS project of mine from Vercel to SST. It's based of CT3A and the trpcKeep suspense on SSRI'm currently trying to perform a trpc query in Nextjs with React suspense, however, I only want theHow to properly type function arguments for procedures?I'm using tRPC 10 with `trpc/react-query` I'm trying to understand how to create a function that re