Prevent query re-fetching on component remount

[antonmelbardis]

Hi,

I was hoping someone could help me with the following issue: I have an inactive query, which is a part of an unmounted component (that was previously mounted). Then, once the component is remounted the query is re-fetched, rather than being taken from the cache. Is there any way to prevent this from happening?

Thanks!

[tannerlinsley]

Please post a codesandbox or some code please. To help effectively, you should alway submit something more than a description :)

[lorstenoplo]

@sid68v it's fixed whats the problem, you just have to create a new queryCache and pass it to the client

[spiropoulos94]

@sid68v it's fixed whats the problem, you just have to create a new queryCache and pass it to the client

Can you please provide an example? Thank you

[TkDodo]

I am not sure what the issue here is anymore, this is a very old discussion. Please create a minimal codesandbox example that shows what you think is not working as expected, then I can take a look.

[lorstenoplo]

@sid68v For the site : https://goloop.vercel.app
For the code : https://github.com/lorstenoplo/eccom-next

You just have to initialise queryCache and provide it to the client options.

[TkDodo]

well, to be honest, I'm not gonna investigate a repo without knowing what the issue is. If you don't want to provide a minimal example, then at least I am not going to put up more of my time, sorry.

[spiropoulos94]

Hello gentlemen, I would like to present you my solution for the query refetching on re-mount. I guess that everytime the component remounts, the queryKey is regenerated, therefore leading to useQuery being constantly re-updated even though its value is the same. What worked for me as a workaround is passing the queryKey from a parent component's state. This way, I can navigate through my app while useQuery refteches only when the "globalState.text" is changed.

To sum up:

1. Component mounts
   2)Receives query key from parent as props (and mutates it to a new one if it wants to )
   3)Query key is the same as previous mount
   4)Therefore the useQuery is exactly the same query as on previous mount.
   5)useQuery does not refetch.

`

const text = globalState.text

const fetchDrinks = async (text) => {
    const key = text['queryKey'][0]

    const response = await fetch(`https://www.thecocktaildb.com/api/json/v1/1/search.php?s=${ key!== "" && key}`);
    const json = await response.json();
    return json;
}

const {isLoading, error, data} = useQuery(globalState.text, fetchDrinks, {
    refetchOnMount: false
});`

[lorstenoplo]

Thanks, but I could not implement it. Can you help me with a repo with that implemented?

[spiropoulos94]

It is pretty simple actually, the steps are the following:

1. Decide on a query key name e.g "FetchingPeopleData"
2. Assign the query key name to a function that does the fetching with useQuery.
3. Make sure that the query name is passed to you component either by a parent component or by global state.

Take in mind that if you declare the queryKey like that inside the component:

const queryKey = "Name"

then the queryKey will be re-declared on every re-mount, forcing the useQuery to re-run every time.

So try to declare it on a parent component or global state and pass it down as a property, a property that is the same through every component mount.

[philals]

Anyone coming back to this with similar issue:

My new QueryClient() was inside my router. Every time the route changed, we got a new QueryClient - this caused many refetches.

[DanLowo]

This works for me. Thank you

[bruno-barros]

Just giving my two cents. I'v got myself on this anoing behavior. Every tab clicked making react-query fetch again.
As I'm using Nextjs. It runs on the server before runs on the client side. This behavior was causing the QueryClient to be recreate every time.
This did the job:

const queryClient = useRef(new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        cacheTime: 1 * 60 * 60 * 1000,
        staleTime: 1 * 60 * 60 * 1000,
        retry: 1
      },
    },
  }))

useRef ensure it runs only on the browser

[TkDodo]

relevant read: https://tkdodo.eu/blog/use-state-for-one-time-initializations

[IzzaSuni]

just found the solution for the exact same problem. it's on its query options check if data is equal between old and new data then set refetchOnMount to false, here's how I done it.

function useGetData(id){
  return useQuery(
    [id],
    () => fetcher(id),
    {
      enabled: !!id,
      refetchOnMount :false
 
      },
    }
  );
}

[jm-olo]

Just giving my two cents. I'v got myself on this anoing behavior. Every tab clicked making react-query fetch again. As I'm using Nextjs. It runs on the server before runs on the client side. This behavior was causing the QueryClient to be recreate every time. This did the job:

const queryClient = useRef(new QueryClient({
    defaultOptions: {
      queries: {
        refetchOnWindowFocus: false,
        refetchOnMount: false,
        cacheTime: 1 * 60 * 60 * 1000,
        staleTime: 1 * 60 * 60 * 1000,
        retry: 1
      },
    },
  }))

useRef ensure it runs only on the browser

For anyone else that still encounters this issue.

A version of the useRef idea worked for me. I was experiencing this same refetching issue and realized that my app defined const queryClient = new QueryClient({...}) inside of my top level component (app.jsx) which was creating a new instance of queryClient on every rerender. Simply moving const queryClient = new QueryClient({...}) to outside my app.jsx solved the problem. No need for using useRef

[FraternalFiber]

My solution to this problem is to check if data is already in cache using queryClient.getQueryData and return it, otherwise fetch data.

export const useData = (searchParams: TSearchParams) => {
  const queryClient = useQueryClient()

  return useQuery<TDataResult[]>({
    queryKey: ['searchResults', searchParams],
    queryFn: () => getData(searchParams, queryClient),
    refetchOnMount: false,
    refetchOnWindowFocus: false,
    refetchOnReconnect: false,
    staleTime: Infinity, 
    gcTime: Infinity,
  })
}

export const getData = async (searchParams: TSearchParams, queryClient: QueryClient) => {
  const url = "some url"

  // If search results are in cache, return them to prevent a refetch
  const cachedData = queryClient.getQueryData(['searchResults', searchParams])

  if (cachedData) {
    return cachedData
  }

  return fetch(url)
      .then(res => res.json())
      .then(res => {
        return res.results
      })
      .catch((error) => {
        throw ('Error: ' + error)
      })
}

That way data is fetched only once. If a component is unmounted and mounted again, the service returns data from cache and doesn't make a refetch. Keep in mind that queryKey must be exactly the same to achieve this result.

[TkDodo]

that's literally what staleTime:Infinity does ...

[FraternalFiber]

But it doesn't solve my problem. I already have the property staleTime set to Infinity, but it still refetch in background after returning the data from cache. Is it a bug or am I doing something wrong?

[TkDodo]

I'd need to see a reproduction, likely something wrong on your end. you don't even need to turn off the refetchOn... flags because they default to refetching stale content only. An unstable query client is often the cause: https://tkdodo.eu/blog/react-query-fa-qs#2-the-queryclient-is-not-stable