如何避免查询被取消，当你有一个自定义钩子AbortSignal与React-query

Question

如何避免查询被取消，当你有一个自定义钩子AbortSignal与React-query

我们使用自定义钩子来获取数据这会在数据获取会话期间多次触发消费者组件的重新呈现(挂载<-卸载)。当我们在这个React查询函数上传递一个中止信号时，我们取消了第一个查询。

请提供避免此模式的最佳实践。

const SampleQueryPage = ({showPromotion}) => {
const [ productId] = ["12345"];
React.useEffect(() => {
console.warn(`SampleQueryPage.tsx mounted`)
return () => {
console.warn(`SampleQueryPage.tsx un-mounted`)
}
});
const getProduct = useGetProduct(showPromotion, productId, urlParamHash)
return (
<Button
onClick={() => {
getProduct.fetchNextPage();
}}
>
load data
</Button>
);
};

function useGetProduct(
showPromotion,productId, urlParamHash
) {
const showPromotionQuery = useInfiniteQuery(
['show-first', productId, urlParamHash], 
()=>getProductWithPromotions({productId, params:urlParamHash}),
getNextPageParam: ...
)
const notShowPromotionQuery = useInfiniteQuery(
['productId', productId, urlParamHash], 
()=>getProduct({productId, params:urlParamHash}),
getNextPageParam: ...
)
return showPromotion ? showPromotionQuery : notShowPromotionQuery;

}
export default useGetProduct;

Answer 1

我没有看到在你的代码中，你正在消费abortSignal，但是，中止一个请求是什么信号。

所以如果你不希望请求被取消——不要使用abortSignal。然后，查询将继续在后台运行，即使没有活动的消费者了，查询将被放入缓存中供以后使用。