Is there a way to have the refetch function automatically cancel previously running queries?

[ashwinGokhale]

Is there a way to have the refetch function automatically cancel previously running queries?

For example, you have a button to refetch posts, and every time you click, you want to cancel any previous queries to fetch posts.

const queryKey = 'posts';
const client = useQueryClient();
const {refetch} = useQuery(queryKey, fetchPosts);

const refreshPosts = () => {
    client.cancelQueries(queryKey);
    refetch();
}

return <button onClick={refreshPosts}>Refresh posts</button>

Is there an option to have react-query automatically handle cancelling the previous query for me?

Something like this:

const client = useQueryClient();
const {refetch} = useQuery('posts', fetchPosts);

return <button onClick={() => refetch({cancelPrevious: true})}>Refresh posts</button>

Or something like this:

const client = useQueryClient();
const {refetch} = useQuery('posts', fetchPosts, {cancelPrevious: true});

return <button onClick={refetch}>Refresh posts</button>

[ashwinGokhale]

To answer my own question, I looked into the source code a bit and found that you can use refetch({cancelRefetch: true})}. However, this is not exposed in the typescript typings.

[vilbergs]

In case someone stumbles onto this in 2024. cancelRefetch is true by default in when calling queryClient.refetchQueries.

See https://tanstack.com/query/latest/docs/reference/QueryClient#queryclientrefetchqueries

[TkDodo]

Since v4, cancelRefetch defaults to true for all imperative actions, including refetch returned from useQuery. It's also exposed as an option on type level: