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

Why do you use refetch and not invalidate?

RealityShift•8mo 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•8mo 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•8mo 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!