React query - cancel pending or previous requests

When using React Query, canceling pending or previous requests is a crucial feature, especially when handling data that requires extended loading times or to prevent unnecessary requests from completing during frequent component switching. React Query offers several built-in methods for managing request cancellation.

1. Using the enabled option of useQuery

The useQuery hook in React Query provides an enabled option that can be used to control query execution. If enabled is set to false, the query will not execute automatically. This feature can be used to prevent requests from initiating under certain conditions.

Example:

javascript
const { data, error, isLoading } = useQuery(['todos', todoId], fetchTodo, {
  enabled: todoId !== null, // Execute the query only when todoId is not null
});

In this example, the query will only execute when todoId is not null. If todoId is null, the query remains idle, and no request will be initiated even if the component re-renders.

2. Using the cancelQueries method of QueryClient

The QueryClient instance in React Query provides the cancelQueries method, which can directly cancel ongoing queries.

Example:

javascript
const queryClient = useQueryClient();

// Cancel a specific query
queryClient.cancelQueries('todos', { exact: true });

// Cancel all queries
queryClient.cancelQueries();

This approach is suitable for canceling requests when a component unmounts or after certain user interactions, such as clicking a cancel button.

3. Using Axios cancellation integration

If your HTTP request library is Axios, you can integrate Axios's cancellation token to handle cancellation within React Query. In the query function, create an Axios CancelToken and pass it through the request configuration.

Example:

javascript
import axios from 'axios';

const fetchTodo = async ({ queryKey }) => {
  const [key, todoId] = queryKey;
  const source = axios.CancelToken.source();

  const promise = axios.get(`/api/todos/${todoId}`, {
    cancelToken: source.token,
  });

  // Associate the cancellation token with the query
  promise.cancel = () => {
    source.cancel('Query was cancelled by React Query');
  };

  return promise;
};

const { data } = useQuery(['todos', todoId], fetchTodo);

In this example, we create a cancellation token for each request and attach a cancel method to the query's promise. React Query will automatically call it at the appropriate time to cancel the request.

By using the above methods, we can effectively manage and cancel requests within React Query, which is crucial for optimizing application performance and user experience.