T
tRPC

❓-help

useUtils vs useQueryClient

RRealityShift12/12/2023
I'm trying to use the useUtils hook but I'm unsure if I'm doing it correctly? It doesn't seem to work but using useQueryClient does. Here is some code:
const queryClient = useQueryClient();
const services = api.list.services({query: query});
const utils = api.useUtils()

return (
<Button onClick={() => {
// doesn't work
utils.list.services.refetch({query: query});

// this does work
const key = getQueryKey(api.list.services, {query: query});
queryClient.refetchQueries(key)
}}>test</Button>
)
const queryClient = useQueryClient();
const services = api.list.services({query: query});
const utils = api.useUtils()

return (
<Button onClick={() => {
// doesn't work
utils.list.services.refetch({query: query});

// this does work
const key = getQueryKey(api.list.services, {query: query});
queryClient.refetchQueries(key)
}}>test</Button>
)
Am I doing something wrong?
Solution:
Make sure you only have 1 of each QueryClient and trpcClient client in your react tree, kind of sounds like useUtils is getting hooked up to the wrong client
Jump to solution
Wwleistra12/12/2023
Why do you use refetch and not invalidate?
RRealityShift12/12/2023
I was actually trying to use invalidate first. Has the same results with both - useQueryClient works but useUtils did nothing I also tried on a query that has no input, same result
Solution
Nnlucas12/13/2023
Make sure you only have 1 of each QueryClient and trpcClient client in your react tree, kind of sounds like useUtils is getting hooked up to the wrong client
RRealityShift12/13/2023
Ahhhhhhh - thanks!! I didn't realize I had that issue... that must have been what's causing all kinds of other cache weirdness I was having issues with. Fixed!

Looking for more? Join the community!

Recommended Posts
Errors serializationAre the errors now using the transformer serialize? or the errors simply go through errorsTransformeBuild error with trpc-panelHi. I'm having a trouble building my tRPC api with trpc-panel. I'm using yarn workspaces and tryingTransferring huge bufferI'm using tRPC with superjson serializer in an Electron app. I have a router querry that loads an pnReport progress of mutationI'm using tRPC in a electron app and am running a nodeWorker from main thread. Is there a way to repDiscriminated output based on discrimiated inputI have this function which works correctly by itself, but when i put it on trpc, the output doesn't How to create a React Component that fetch API based on a router from props ?I want to pass in my React component props the name of the router to use, here is my current implemeHow to pass through authentication header when using createTRPCProxyClient and RSC?Hi - we are having a great time with tRPC, and have it working well in a Next14 + React Server CompoIntegrating tRPC with Clerk Authentication in an Existing Next.js "Turborepo" ProjectHello, I am currently working on a Next.js application within a Turborepo setup and am looking to inHelp understanding how to deploy tRPC in monorepo.Hi All, I read in the FAQ that most benefits come from using tRPC in a monorepo. So if i want to buibest way to delete trpc?I want to delete TRPC from a Nextjs project. What is the most appropiate way to take it out? ThanksQuery string paramsHi , new to tRPC, is there a way to send query string params with tRPC when making a request ?Error running dist/client/index.jsGot this error during node dist/client/index.js I have ran tsc -b also followed as same as in docsTRPC, Cookies, fetchI try to cakl my backend inside trpc procedures and I an using fetch for this. Is it possible so tha`The property 'query' in your router collides with a built-in method`I'm seeing an error (attached) where I can get autocompletes on TRPC in the file where the client isUsing trpc backend across multiple seperate front endsI want to create a nodejs backend with trpc to expose some api endpoints. This will then be called aHow can I Prefetch on client or server component on App router Nextjs?how can I pretch data on app router nextjs