quickest-silver

useQueries with already created hooks?

I created some hooks to use in my components:

export function useSaStates() {
    return useQuery(keys.saStates.queryKey, fetchSaStates, {});
}
export function useLaStates() {
    return useQuery(keys.laStates.queryKey, fetchLaStates, {});
}

export function useSaStates() {
    return useQuery(keys.saStates.queryKey, fetchSaStates, {});
}
export function useLaStates() {
    return useQuery(keys.laStates.queryKey, fetchLaStates, {});
}

Can I use useQueries with these already created hooks, or do I need to define them in the useQueries itself? Any insight would be helpful, thank you!

8 Replies

continuing-cyan•4y ago

Hi you can extract the query configurations (queryKey, queryFn, options) and use these factorised options in all your hooks

quickest-silverOP•4y ago

Hi @glabat , thanks for replying 😄 What do you mean by extracting, can this be done directly from a custom hook? Like this:

const {queryKey, queryFn, options} = useSaStates()

const {queryKey, queryFn, options} = useSaStates()

Or do you mean before even defining the custom hooks?

continuing-cyan•4y ago

You could have an external file in which you define your different queries (key, function etc.). Export the configs and use them in your custom hooks Or you could use queryClient defaults options

continuing-cyan•4y ago

You can have a look here for more detailed explanation on how keys and queries can be used => https://tkdodo.eu/blog/effective-react-query-keys

Effective React Query Keys

Learn how to structure React Query Keys effectively as your App grows

continuing-cyan•4y ago

and here for a codesandbox with some other patterns => https://codesandbox.io/s/react-query-and-queries-composition-fi882o

GLabat

CodeSandbox

react-query and queries composition - CodeSandbox

Illustrate how queries can be composed into a new one to simplify usage.

quickest-silverOP•4y ago

Gotcha, ill read all of these Thank you very much 😄 ✅

ambitious-aqua•4y ago

yeah my recommendation would be to basically take the query key factory one step further into just query factories:

const saStatesQuery = {
  queryKey: [...],
  queryFn: fetchSaStates
}

const laStatesQuery = {
  queryKey: [...],
  queryFn: fetchLaStates
}

export function useSaStates() {
    return useQuery(saStatesQuery);
}
export function useLaStates() {
    return useQuery(laStatesQuery);
}

export function useBoth() {
  return useQueries({ queries: [saStatesQuery, laStatesQuery] })
}

const saStatesQuery = {
  queryKey: [...],
  queryFn: fetchSaStates
}

const laStatesQuery = {
  queryKey: [...],
  queryFn: fetchLaStates
}

export function useSaStates() {
    return useQuery(saStatesQuery);
}
export function useLaStates() {
    return useQuery(laStatesQuery);
}

export function useBoth() {
  return useQueries({ queries: [saStatesQuery, laStatesQuery] })
}

the beauty here is that both useQuery and useQueries accept an object 🙂

quickest-silverOP•4y ago

This is very nice, thank you! I will be using this pattern 👍

Gaming

Programming

useQueries with already created hooks?

Did you find this page helpful?