Avoid queries got cancelled when you have a custom hook with AbortSignal with React-query

[poc7667]

We used a custom hook to lunch the data fetch
which triggers the consumer component re-rendering (mounted<->un-mounted) many times during a data fetch session.
And we got the first query cancelled when we pass down an abort signal on this React query function.

Any best practice to avoid this pattern would be appreciated?

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

useGetProduct (custom hook)

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

[TkDodo]

https://stackoverflow.com/questions/72693408/how-to-avoid-queries-got-cancelled-when-you-have-a-custom-hook-with-abortsignal