RealityShift
RealityShift7mo ago

useUtils vs useQueryClient

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
4 Replies
wleistra
wleistra7mo ago
Why do you use refetch and not invalidate?
RealityShift
RealityShift7mo ago
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
Nick
Nick7mo ago
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
RealityShift
RealityShift7mo ago
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!