ambitious-aqua

Same queryFn for multiple useQuery calls?

I am trying out react-query for the first time. Watched a couple tutorials and wow does it seem super cool!! My question is for useQuery, if most of my get calls are all basically the same but just call a different backend route, getUsers, getCustomers, getCategories etc., can I just use the same generic function?

4 Replies

ambitious-aquaOP•2y ago

So like this:

const { data: costCenters, isLoading, error } = useQuery({queryKey: ['costCenters'], queryFn: () => getData('getCostCenters')});

const { data: costCenters, isLoading, error } = useQuery({queryKey: ['costCenters'], queryFn: () => getData('getCostCenters')});

And then the getData function looks like this:

export const getData = (request) => {
    console.log({request});
    axiosInstance.get('/' + request)
}

export const getData = (request) => {
    console.log({request});
    axiosInstance.get('/' + request)
}

Obviously, I will be adding more to that function to actually return the results, handle errors etc. Does anyone else do it this way? Any issues I might be not seeing? Every example I have seen shows them using seperate functions for every single queryFn and it seems redundant if they are always the same.

genetic-orange•2y ago

Maybe look into the default query function for your use case.

genetic-orange•2y ago

https://tanstack.com/query/latest/docs/react/guides/default-query-function

Default Query Function | TanStack Query Docs

If you find yourself wishing for whatever reason that you could just share the same query function for your entire app and just use query keys to identify what it should fetch, you can do that by providing a default query function to TanStack Query:

ambitious-aquaOP•2y ago

Thank you! Looks like exactly what I was looking for!

Gaming

Programming

Same queryFn for multiple useQuery calls?

Did you find this page helpful?