React query - cancel pending or previous requests

在使用 React Query 时，取消挂起的或之前的请求是一个很重要的功能，尤其是在处理那些需要长时间加载的数据或者在频繁切换组件时避免不必要的请求完成。React Query 提供了一些内置的方法来处理请求的取消操作。

1. 使用 useQuery 的 enabled 选项

React Query 的 useQuery 钩子提供一个 enabled 选项，这可以用来控制查询的执行。如果 enabled 设置为 false，则查询不会自动执行。这个特性可以用来在某些条件下取消请求。

示例：

javascript
const { data, error, isLoading } = useQuery(['todos', todoId], fetchTodo, {
  enabled: todoId !== null, // 当 todoId 非空时才执行查询
});

在这个例子中，只有当 todoId 非空时，查询才会执行。如果 todoId 为 null，则查询会处于闲置状态，即使组件重新渲染，也不会发起请求。

2. 使用 QueryClient 的 cancelQueries 方法

React Query 的 QueryClient 实例提供了 cancelQueries 方法，可以直接通过该方法取消正在进行的查询。

示例：

javascript
const queryClient = useQueryClient();

// 取消特定查询
queryClient.cancelQueries('todos', { exact: true });

// 取消所有查询
queryClient.cancelQueries();

这种方式适合在组件卸载时或者在某些用户交互后（比如点击取消按钮时）取消请求。

3. 使用 Axios 集成取消功能

如果你的 HTTP 请求库是 Axios，你可以利用 Axios 的取消令牌（Cancel Token）来集成到 React Query 中。在查询函数中，创建一个 Axios CancelToken 并通过请求配置传递它。

示例：

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,
  });

  // 关联取消令牌和查询
  promise.cancel = () => {
    source.cancel('Query was cancelled by React Query');
  };

  return promise;
};

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

在这个示例中，我们为每个请求创建了一个取消令牌，并且在查询的 promise 上附加了一个 cancel 方法，React Query 会在合适的时机自动调用它来取消请求。

通过上述方法，我们可以有效地管理和取消 React Query 中的请求，这对于优化应用性能和用户体验至关重要。