T
tRPC

adding information to the QueryKey that is not part of the procedure input

adding information to the QueryKey that is not part of the procedure input

TTkDodo 🔮
View on Discord
10/31/2023
we have the situation that we have our trpc routes read some specific information from the browsesr url. In our case, it's the ID of the workspace the user is currently on. We use that information on the server to send API requests to other services. Now we'd want to automatically add this information to the cache key, because the same route should return different information for different workspace IDs, and since users can switch workspaces, showing stale data from an old workspace is not good. What we can do right now is add the workspaceId as a required input to each route, read it on the frontend with a custom hook and provide it as input. That works but is a bit cumbersome: We know that the url will always contain the id, and we know how to read from it on the server. So is there a way to centrally add that information to the cache key? My idea was to maybe create a custom header that we add centrally, but as far as I can see, custom headers are also not added to the queryKey... Maybe I'm missing some kind of middleware on the client to add something to the key?
Solution:
Yeah this is suggested periodically, and I agree there's something a little awkward for type-safe cross-cutting concerns in tRPC, since headers are global and inputs can get repetitive, but adding to the input is the canonical way to achieve this because that way the input on the server has access to this. tRPC just isn't really a HTTP server so reading the URIs which I guess NextJS might have access to isn't really a 1st class concern Maybe there's something we could do around router-level inputs that are shared and can be set in a scoped way on the client, like orgScopedProjects = trpc.projects.setInputs({ organisationId })...
Jump to solution
Solution
Nnlucas
View on Discord
10/31/2023
Yeah this is suggested periodically, and I agree there's something a little awkward for type-safe cross-cutting concerns in tRPC, since headers are global and inputs can get repetitive, but adding to the input is the canonical way to achieve this because that way the input on the server has access to this. tRPC just isn't really a HTTP server so reading the URIs which I guess NextJS might have access to isn't really a 1st class concern Maybe there's something we could do around router-level inputs that are shared and can be set in a scoped way on the client, like orgScopedProjects = trpc.projects.setInputs({ organisationId }) then orgScopedProjects.list.useQuery()
Nnlucas
View on Discord
10/31/2023
Feels like potentially a lot of complexity to be adding though
TTkDodo 🔮
View on Discord
10/31/2023
thanks for your insights, greatly appreciated 🙏 I just brought this topic up in our architecture meeting and we agreed that explicitly passing it as input is the best way, so we'll do that.

Looking for more? Join the community!

T
tRPC

adding information to the QueryKey that is not part of the procedure input

Join Server
Recommended Posts
How to make typed error responses in the context of a specific query?Each query has a typed (success) response, although it seems all queries have a shared type for the What's the negative code returned in error responses?What's the negative error code returned in errors responses and how is it meant to be used by the clTRPC File as InputHi can someone pls help me: https://stackoverflow.com/questions/77381516/nextjs-trpc-file-as-input`refetchOnWindowFocus` with RSC?Hi. Is there any way to have `refetchOnWindowFocus` work with server components? Seems like it onlyMulti useSubscription with trpc react -query integration failed to find second subusing trpc in nx monorepo, node version is 20 with yarn. backend is using trpc with express integratIs there any easy way to create a Type for a trpc routerI want to publish a set of trpc api client to npm, which will be used by my customer directly. But iTRPC with Nextjs 13 App RouterIm trying to implement TRPC with my already existing Nextjs 13 App to get typesafe API's. I've managSecurity: DDOS attack prevention for open endpoints tRPCSo we are building an application and got multiple trpc endpoints associated with it, some of them aIs there any information about caching in `@trpc/react-query`?How does query caching work? I want to create library for Angular and I would like to understand Reacache craziness?can someone sanity check something for me? i'm using sst + trpc + drizzleorm + aws + rds + postgretRPC over WebSocket with Next.js and NextAuthHi. I'm trying to set up Next 13 with tRPC over a WebSocket and NextAuth. I got it mostly working wiServer Side Calls in tRPC not working (Next 13, App Router)Where do I make the helper?