#Query context hook changes and triggers rerender of my component

12 messages · Page 1 of 1 (latest)

torn imp
#

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>
)

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)
  }
)

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.

chrome_pfdMQ7cCmB.png
torn imp
#

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

cosmic pilot
#

Can you provide an minimal reproduction in a sandbox?

torn imp
#

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

torn imp
#

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,
     },
   },
 }
brave oar
#

@torn imp 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.