React 查询 - 取消待处理或先前的请求

Question

我试图取消任何以前/待处理的请求，如果它们花费的时间太长并且用户导航到另一个组件，当前查询采用状态值，并且当它更改组件重新渲染时，这很好并且是所需的行为。然而，在网络选项卡中查看请求仍处于待处理状态。有没有办法在反应查询中取消任何以前的请求。我尝试根据文档取消查询，但它不正确，因为它没有取消。

  const [value, setValue] = React.useState<boolean>(false);

  const getData = async (value: number): Promise<any> => {
    const CancelToken = axios.CancelToken
    const source = CancelToken.source()
    const response = await axios.get(`https://xxxxxx?value=${value}`, {
        cancelToken: source.token,
    }).then(res => res.data);
    if (CancelToken) {
        response.cancel = () => {
            source.cancel('Query was cancelled by React Query')
        }
    }
    return response;
}

const { data: result, status, error, isFetching }: any = useQuery(['getData', value], () => getData(value),
    {
        refetchOnWindowFocus: false,
    }
);

Answer 1

您无法附加.cancel到异步函数中的 Promise，因为异步函数将始终返回一个新的 Promise，而无需附加取消函数。如果您想附加取消函数，最好使用承诺链而不是异步函数。

更好的是，react-query 现在通过提供开箱即用的 AbortSignal 来支持取消，您只需将其附加到您的请求中即可。

使用axios 0.22+和react-query v3.30+，你可以这样做：

 const query = useQuery('key', ({ signal }) =>
   axios.get('/xxxx', {
     signal,
   })
 )

这样，如果查询变得未使用或者您调用queryClient.cancelQueries('key')，例如当用户单击按钮时，react-query 将取消查询的网络请求。