grumpy-cyan

Issue with onFocus after updating to react-query v5

After migrating from v4 to v5, I am getting the error below in the queryCache.ts file. I'm only using useMutation() and in the options for that method there is no option to turn off refetching when the window is focused. So I tried setting the option refetchOnWindowFocus to true, which the official documentation says turns off refetch globally at queryClient initialization, but the error is the same. I tried debugging the query.onFocus() code in queryCache, and the query object is a MapIterator. I didn't change any code, just updated the version, and I'm very puzzled to get this error! Any help would be greatly appreciated.

6 Replies

metropolitan-bronze•3y ago

show a reproduction please, because query.onFocus exists: https://github.com/TanStack/query/blob/35539bf34f4e623c9ad70bbcd3d01e1f837bfa63/packages/query-core/src/query.ts#L266

GitHub

query/packages/query-core/src/query.ts at 35539bf34f4e623c9ad70bbcd...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

grumpy-cyanOP•3y ago

First of all, thanks for the reply. The code I wrote is simple I didn't set any options when initializing the QueryClient.

// init queryClient
const queryClient = new QueryClient();

// mutation hooks
const useMutationHooks = () => useMutation({ mutationFn: fetcher, networkMode: "always" });

// component click handler
onClick={() => {
  useMutationHooks.mutate(...)
}}

// init queryClient
const queryClient = new QueryClient();

// mutation hooks
const useMutationHooks = () => useMutation({ mutationFn: fetcher, networkMode: "always" });

// component click handler
onClick={() => {
  useMutationHooks.mutate(...)
}}

I see that the queryCore has an onFocus, but it doesn't seem to do anything to instantiate the query in the queryCache. In the code below, when I checked the query with console.log, it is MapIterator{}. https://github.com/TanStack/query/blob/35539bf34f4e623c9ad70bbcd3d01e1f837bfa63/packages/query-core/src/queryCache.ts#L200-L206 Another question I have is that when I set the refetchOnWindowFocus option to false on QueryClient initialization, it still calls onFocus. What am I doing wrong?

GitHub

query/packages/query-core/src/queryCache.ts at 35539bf34f4e623c9ad7...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

metropolitan-bronze•3y ago

Show a codesandbox reproduction please

grumpy-cyanOP•3y ago

Hi. I've implemented a similar code on codesandbox and it works fine here. https://codesandbox.io/s/nice-morning-l9hqdx I tried debugging my code to see the differences. The difference was that codesandbox uses modern/queryCache.cjs code and my environment uses modern/queryCache.js. I don't know how codesandbox transpiles and bundles the code, but my understanding is that when I use the import syntax, @tanstack/react-query is exporting the modern sub .js file, not the cjs. If I modify the code that imports @tanstack/react-query in my webpack to import the cjs file via an alias, it works fine. It might not be a problem with the @tanstack/react-query module..but could you comment on what you suspect?

fed-gren

CodeSandbox

nice-morning-l9hqdx - CodeSandbox

nice-morning-l9hqdx by fed-gren using @tanstack/react-query, loader-utils, react, react-dom, react-scripts

metropolitan-bronze•3y ago

depends on the bundler you're using. codesandbox doesn't do anything, but the example you show uses create-react-app v5. Not sure what you are using to bundle things, but we have integration tests with various bundlers that all work fine: https://github.com/TanStack/query/tree/20bd90585a59e788b47a827e153a3cb62f90ddb6/integrations

GitHub

query/integrations at 20bd90585a59e788b47a827e153a3cb62f90ddb6 · Ta...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

grumpy-cyanOP•3y ago

Thank you for your help. I'll have to look into my development environment a bit more.

Gaming

Programming

Issue with onFocus after updating to react-query v5

Did you find this page helpful?