like-gold

Query context hook changes and triggers rerender of my component

I'm hooking up react-query into a new app. I have the query client/provider configured as explained in the tutorial:

const queryClient = new QueryClient()

export const App = (): JSX.Element => (
  <QueryClientProvider client={queryClient}>
    <Outlet /> // which is from react-router and loads <ViewLogs />
  </QueryClientProvider>
)

const queryClient = new QueryClient()

export const App = (): JSX.Element => (
  <QueryClientProvider client={queryClient}>
    <Outlet /> // which is from react-router and loads <ViewLogs />
  </QueryClientProvider>
)

Inside of the ViewLogs component I have a query for some mock data. It relies on some treeNode state so I have that configured correctly in the cache and enabled config option.

const { isLoading, error, data } = useQuery<IExampleData[]>(
  ['viewLogsMainGrid', { id: treeNode?.id }],
  async () => {
    console.log('fetching', treeNode)
    const { data } = await axios.get<IExampleData[]>('/mock/grid/groups.json')
    return data
  },
  {
    enabled: Boolean(treeNode)
  }
)

const { isLoading, error, data } = useQuery<IExampleData[]>(
  ['viewLogsMainGrid', { id: treeNode?.id }],
  async () => {
    console.log('fetching', treeNode)
    const { data } = await axios.get<IExampleData[]>('/mock/grid/groups.json')
    return data
  },
  {
    enabled: Boolean(treeNode)
  }
)

I noticed that this query sometimes re-fetches the data when I'm using other parts of the app. Not changing window focus etc. Debugging this, I see that even when the tree node data hasn't changed, the entire ViewLogs component rerenders. I used react-dev-tools to see why it says "because hook 12 changed" and hook 12 is some part of react-query (see pic). That hook is internal to react-query so I'm not sure what could be triggering that.

8 Replies

like-goldOP•3y ago

looking closer, if I remove that useQuery hook entirely the issue goes away, so somehow the useQuery hook is triggering the component it's inside of to rerender due to that context hook change even simplifying it doesn't change anything. const { data } = useQuery<IExampleData[]>(['viewLogsMainGrid'], async () => Promise.resolve([])) seems like clicking anywhere in the dom is enough to trigger this

environmental-rose•3y ago

Can you provide an minimal reproduction in a sandbox?

like-goldOP•3y ago

I'm slowly narrowing everything down and will hope to yes

like-goldOP•3y ago

https://codesandbox.io/p/sandbox/adoring-currying-300wbz?file=%2Fsrc%2Fmain.tsx&selection=%5B%7B%22endColumn%22%3A5%2C%22endLineNumber%22%3A16%2C%22startColumn%22%3A5%2C%22startLineNumber%22%3A16%7D%5D

adoring-currying-300wbz

CodeSandbox is an online editor tailored for web applications.

like-goldOP•3y ago

just clicking the dom triggers a rerender and a fresh get request even though the query key doesn't change I think it's focus related rq must have logic that listens for document click and that's what triggers "window focus" because this appears to stop when I set

{
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
     },
   },
 }

{
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
     },
   },
 }

deep-jade•3y ago

@viveleroi yes, that's exactly that. By default refetchOnWindowFocus is true and will refetch data when window is focused again. You can either set it to false like you did, or set some staleTime. Important thing to notice is that window loses focus when you do sth in devtools and it gets focused again when you click back on your app. Notice that if you click the dom multiple times in a row, it won't trigger refetch. It will only do that if you click on devtools in the meantime.

like-goldOP•3y ago

ok thanks, that makes a lot of sense!

Gaming

Programming

Query context hook changes and triggers rerender of my component

Did you find this page helpful?