Prevent react query from refetching data upon user action when data is not updated

Question

I am using React query on a React app that makes multiple paralell requests. Every time I hit tab to go to another app or page, it removes all the dashboards and shows spinner. It refetches all the data and makes all the requests again even when the keyword in the search bar has not changed and, therefore, it is not useful to make the user wait for another few seconds to be able to see the dashboards.

Per default, react query always shows stale data if there is any and does background refetches at the same time. So please show some code because it must be something like always showing a spinner when isFetching is true or so — TkDodo
– TkDodo, Commented May 6, 2021 at 19:22
``` ) : isLoading || isFetching ? ( <BounceLoader size={60} color={'#fdcf85'} css={override} /> ) : isError ? ( <span>Error: {error.message}</span> ) : ( <> <div className='m-4 p-4 flex w-full overflow-x-auto justify-center items-center bg-amethyst border-collapse'> <Table columns={tableData} data={formatData(data)} /> </div> ``` Should I get rid of isFetching and only keep isLoading? — a-s-r-789
– a-s-r-789, Commented May 7, 2021 at 6:57
Well if you unmount all the data and show a loading spinner every time a request is in-flight, which is what isFetching is doing, and you don’t want that, then yes, I’d suggest to remove that :) — TkDodo
– TkDodo, Commented May 7, 2021 at 9:19

Andrew Korin · Accepted Answer · 2021-05-11 19:39:33Z

4

disabling refetch on focus might help you, but I would remove isFetching at all and left only isLoading

const queryClient = new QueryClient({
   defaultOptions: {
     queries: {
       refetchOnWindowFocus: false,
     },
   },
 })

source: https://react-query.tanstack.com/guides/window-focus-refetching

answered May 11, 2021 at 19:39

Andrew Korin

3144 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Prevent react query from refetching data upon user action when data is not updated

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related