Reset the refetchInterval after request

[mgoguery78]

👋 Hello ! I have a project where I trigger a GET query every 10 seconds to retrieve some data, with the refetchInterval param
The user can also make some updates on his own on this data, which triggers a POST / PATCH / DELETE request. Due to backend cache delay, I need to manually update the queryCache to display the new data to the user, until the next auto refresh.
The problem is, when you launch an update request right before the 10 seconds are finished, you have a risk to retrieve "old data" since the cache in the backend is 1 or 2 seconds late.

To fix that, I used the cancelQueries method, but I wondered:
1/ Is it a good pattern according to my constraints with backend cache ?
2/ Is there a way to "reset" therefetchInterval so that it restarted after my update?

Thanks a lot for your help ! 🙏

/* The main request that fetches data every 10 seconds */
const useGetRequest = () => (
    useQuery(
        [MY_QUERY_KEY],
        () => myGetRequest(),
        {
            enabled: true,
            refetchOnWindowFocus: false,
            refetchInterval: 10 * ONE_SECOND
        }
    );
}

/* The update request triggered by the user */
const updateRequest = request => {
    const queryCache = useQueryCache();

    return useMutation(request, {
        onSuccess: ({ data }) => {
            // Needed in the case the update happens just before the auto refetch (every 10 seconds)
            // This way, we are sure that only the last updated data is displayed to the user
            queryCache.cancelQueries([MY_QUERY_KEY]);
       
            const cachedData = queryCache.getQueryData([MY_QUERY_KEY]).
    
           const updatedCachedData = updateCachedData();
    
            queryCache.setQueryData([MY_QUERY_KEY], updatedCachedData).
        });
}

[TkDodo]

1/ Is it a good pattern according to my constraints with backend cache ?

I think cancelling queries before writing to the cache is a good practice - all the examples do that with optimistic updates.

2/ Is there a way to "reset" therefetchInterval so that it restarted after my update?

controlling a query can always be done with local state:

const useMyQuery = () => {
  const [refetchInterval, setRefetchInterval] = React.useState(10 * ONE_SECOND)
  return useQuery('key', fetchFn, { refetchInterval, onSuccess: (data) => setRefetchInterval(data.something) }
}

by setting the refetchInterval to a value depending on the data in onSuccess (0 if you want to turn it off), you'll re-render your component and the queryOptions update accordingly.

[thomasbertet]

The main goal seems to be avoiding calling the query useGetRequest very few times after the user has done another update.
For this to work, it seems you would need to switch to 0 (no auto-refresh) before doing the request, and re-activate auto-refresh once the request is done. But I'm afraid because changing the refreshInterval at the end of the request will trigger a call right away, which is not what @mgoguery78 wants. Thoughts ?

[mgoguery78]

Thanks @TkDodo for your help. Indeed, since I do not want to change refetchInterval value, the solution here does not bring anything more than the cancelQueries in my usecase :).
But still useful :D

[n3ps]

1/ Is it a good pattern according to my constraints with backend cache ?

I think cancelling queries before writing to the cache is a good practice - all the examples do that with optimistic updates.

2/ Is there a way to "reset" therefetchInterval so that it restarted after my update?

controlling a query can always be done with local state:

const useMyQuery = () => {
  const [refetchInterval, setRefetchInterval] = React.useState(10 * ONE_SECOND)
  return useQuery('key', fetchFn, { refetchInterval, onSuccess: (data) => setRefetchInterval(data.something) }
}

by setting the refetchInterval to a value depending on the data in onSuccess (0 if you want to turn it off), you'll re-render your component and the queryOptions update accordingly.

@TkDodo now that onSuccess is deprecated what pattern do you recommend in turning off the interval?

[TkDodo]

refetchInterval can be a function that receives the latest query. Just return 0 and remove your state ;)