React-query自定义Hook传AbortSignal时如何避免查询被取消

架构老林

2026-8-29

问题根因

你看到的组件反复mount/unmount是日志写法错误导致的误判：示例代码中的useEffect没有传入依赖数组，会在每次组件重渲染时先执行上一轮的清理函数、再执行新的effect逻辑，根本不是组件真的被销毁重建。
首请求被AbortSignal取消的核心原因：自定义Hook条件返回两个不同useInfiniteQuery实例的写法，会导致未被返回的query瞬间失去组件订阅，React Query默认会对失去订阅的pending状态请求触发取消逻辑，直接给传入的AbortSignal发取消信号，就会出现首个请求刚发起就被中断的问题。

最佳修复方案

按优先级从高到低选择方案即可：

第一步先修正误导性的日志代码，给useEffect传入空依赖数组，让它只在组件真正挂载、卸载时触发：

React.useEffect(() => {
    console.warn(`SampleQueryPage.tsx mounted`)
    return () => {
        console.warn(`SampleQueryPage.tsx un-mounted`)
    }
}, []); // 空数组代表仅在组件挂载、卸载时执行

最优方案：合并两个query为同一个，从根源避免订阅切换问题。把showPromotion参数整合到queryKey中，在同一个useInfiniteQuery内根据参数判断走哪个请求逻辑，完全不需要维护两个独立query实例：

function useGetProduct(showPromotion, productId, urlParamHash) {
    return useInfiniteQuery(
        // 所有影响请求结果的参数都放到queryKey里，保证缓存和请求的正确性
        ['product-detail', productId, urlParamHash, showPromotion], 
        // 请求函数可以直接拿到React Query注入的pageParam、signal等参数
        ({ pageParam = 1, signal }) => {
            const baseParams = { productId, params: urlParamHash, pageParam, signal }
            return showPromotion 
                ? getProductWithPromotions(baseParams)
                : getProduct(baseParams)
        },
        {
            getNextPageParam: (lastPage) => {
                /* 保持你原有的分页逻辑不变 */
            },
            // 可根据业务场景配置合理的staleTime，减少不必要的重复请求
            staleTime: 5 * 60 * 1000,
        }
    )
}

如果你需要保留两个query的独立缓存（比如切换showPromotion时要立刻展示之前加载过的内容，不想出现loading态），就给两个query加上enabled配置控制请求触发时机，保证两个useInfiniteQuery始终在Hook顶层被调用、不会失去订阅：

function useGetProduct(showPromotion, productId, urlParamHash) {
    const showPromotionQuery = useInfiniteQuery(
        ['show-first', productId, urlParamHash], 
        ({ pageParam = 1, signal }) => getProductWithPromotions({productId, params:urlParamHash, pageParam, signal}),
        { 
            enabled: showPromotion, // 仅当showPromotion为true时才发起该请求
            getNextPageParam: /* 保持原有分页逻辑 */ 
        }
    )
    const notShowPromotionQuery = useInfiniteQuery(
        ['productId', productId, urlParamHash], 
        ({ pageParam = 1, signal }) => getProduct({productId, params:urlParamHash, pageParam, signal}),
        { 
            enabled: !showPromotion, // 仅当showPromotion为false时才发起该请求
            getNextPageParam: /* 保持原有分页逻辑 */ 
        }
    )

    return showPromotion ? showPromotionQuery : notShowPromotionQuery;
}

特殊场景兜底配置：如果确实有切换订阅但不想取消请求的需求，可以给对应query加abortOnUnmount: false配置，注意不要全局开启该配置，只在确有需要的单独query上使用，避免引发内存泄漏：

{
    // 其他query配置
    abortOnUnmount: false, // 仅当query被完全从缓存中移除时才取消请求，切换订阅不触发取消
}

内容的提问来源于stack exchange，提问作者newBike