Dynamically update refetchTime based on query response

[correttojs]

Hi,

I'd like to implement the following use case:

• fetch a query without setting any retry policy
• on success, define the retry policy based on the query response
• the following query should trigger based on the retry policy defined
• update the retry policy after each fetch

Would it be possible? I was also considering to update the stale or cache time, but in any case the setting applies before the query triggers.

Other solutions that I considered are:

• call refetch manually using a setTimeout (would prefer to avoid it)
• force the query to retrigger (without an actual fetch request) pre-populating its cache (or initialData)

[EDITED]
Best solution I found is

  const cacheTime = useRef(300000);
  useQuery(key, fetcher, {
        refetchInterval: cacheTime.current,
        onSuccess: (data) => {
            cacheTime.current =  calculateRefetchInterval(data);
            const queryInstance = client.getQueryCache().find(key);
            if (queryInstance && queryInstance?.cacheTime !== cacheTime.current) {
                queryInstance.cacheTime = cacheTime.current;
                client.setQueryData(key, updatedData);
            }
         }
  })

[TkDodo]

I was also considering to update the stale or cache time, but in any case the setting applies before the query triggers.

you can use local state for that instead of a ref. that would trigger a re-render and update your staleTime / cacheTime accordingly.

I think it would be really cool to have a plugin that "translates" https headers like maxAge or retry to config options of react-query and sets them accordingly. Kinda what you are trying, but in a generic way. What do you think?

[SevenOutman]

Is there any updates on this? I have a similar use cases where I can determine staleTime only after I get the data.

Here's what I'm doing now:

export function useThisQuery(queryKey, options) {
  const queryClient = useQueryClient();
  const cachedData = queryClient.getQueryData(queryKey);

  return useQuery(
    queryKey,
    {
      staleTime: cachedData && imSureItWontUpdate(cachedData) ? Infinity : undefined,
      ...options,
    }
  );
}

[TkDodo]

@SevenOutman this has always worked:

export function useThisQuery(queryKey, options) {
  const queryClient = useQueryClient();
  const [staleTime, setStaleTime] = React.useState(0)

  return useQuery(
    queryKey,
    {
      onSuccess: (data) => {
        if (imSureItWontUpdate(data) {
          setStaleTime(Infinity)
        }
      },
      staleTime,
      ...options,
    }
  );
}

[SevenOutman]

this has always worked:

With this implementation, the next time useThisQuery is mounted, it will still trigger an extra fetch because the staleTime state is initially 0. But what I expect is there be no more fetches after I'm sure the data won't update.

[TkDodo]

ah right, yes then you need to default the state value to whatever queryClient.getQueryData returns

[mer10z]

I just tried something similar with react-query 4.29.7 and it doesn't seem to work,staleTime never updates even after the state value changes.

[duguyihou]

@mer10z do you mind sharing your code?

[mer10z]

After more testing I realized I'm running into what @SevenOutman mentioned, on remount it's getting reset back. Tried @TkDodo's suggestion and that fixed it, thanks.

[CodeNinjaMatrix]

I also went into this.
My solution is to set refetchInterval to a function. (should works on v3/v4/v5 base on api reference)

useQuery({
    queryKey: key,
    queryFn: fetcher,
    refetchInterval: (data) => {
      if (data && data...) {
        return ...
      }
      // default cache time
      return ...
    },
  })