TanStackT
TanStack•2y ago•
4 replies
slow-yellow

useQuery options changed per hook invocation

Hi there, I'm adoptiong react-query throughout my app and have a breif question regarding the architecture:

Say I have a custom hook that wraps useQuery, and accepts one argument to override a useQuery option:
function useCustomQuery(refetchInterval: number) {
  return useQuery({
    queryKey: ['custom'],
    refetchInterval
  })
}


If I invoke useCustomQuery from N different components throughout my app, passing different values of refetchInterval, which value will it use?

My assumption is that it would end up using the value from whichever component is rendered most recently, which would be pretty confusing. So you'd probably want to also wrap an internal 
useState
 to store the refetchInterval value, and then expose the setter in order to change it imperatively.

Am I on the right track, or is there some other pattern at play here?
Was this page helpful?