RealityShift•12mo 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•12mo ago

Why do you use refetch and not invalidate?

RealityShiftOP•12mo 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•12mo 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

RealityShiftOP•12mo 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!