useUtils vs useQueryClient

I'm trying to use the

useUtils

useUtils

hook but I'm unsure if I'm doing it correctly? It doesn't seem to work but using

useQueryClient

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

tRPC•3y ago•

7 replies

RealityShift

useUtils vs useQueryClient

I'm trying to use the

useUtils

useUtils

hook but I'm unsure if I'm doing it correctly? It doesn't seem to work but using

useQueryClient

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

useUtils vs useQueryClient

Similar Threads

useUtils vs useQueryClient

Similar Threads

Similar Threads

Similar Threads