Query cancellation in custom hook.

[sagarmsraozil]

Is there any way to use abort signal in custom hook. With a parameter type query Fn?

[TkDodo]

Yes, of course. Can you post an example you're having troubles with?

[sagarmsraozil]

import { useQuery } from 'react-query';

// eslint-disable-next-line
export interface FetchOptionsInterface<T = any> {
id: T[];
fn: T;
enabled?: boolean;
retry?: boolean | number;
refetchInterval?: number;
select?: T;
isSignalRequired?: boolean;
}

// eslint-disable-next-line
export interface UseQueryReturnInterface<T = any> {
isLoading: boolean;
isFetching: boolean;
isError: boolean;
error: Error;
data: T;
dataUpdatedAt: number;
errorUpdateCount: number;
errorUpdatedAt: number;
failureCount: number;
isFetched: boolean;
isFetchedAfterMount: boolean;
isIdle: boolean;
isLoadingError: boolean;
isPlaceholderData: boolean;
isPreviousData: false;
isRefetchError: false;
isRefetching: false;
isStale: true;
isSuccess: false;
status: string;
refetch: () => void;
remove: () => void;
}

const useReactQuery = <T,>(options: FetchOptionsInterface): UseQueryReturnInterface => {
const { id, fn, enabled = true, retry = 3, refetchInterval = 0, select = null, isSignalRequired = false } = options;

let response;

if (isSignalRequired) {
response = useQuery(id, ({ signal }) => fn(signal), {
enabled: enabled,
retry: retry,
refetchInterval: refetchInterval,
select: select
});
} else {
response = useQuery(id, fn, {
enabled: enabled,
retry: retry,
refetchInterval: refetchInterval,
select: select
});
}

return response as UseQueryReturnInterface;
};

export default useReactQuery;

// This is the hook i have created to fetch data.

Now the problem i am having is, I want to make use of query cancellation. I know passing abort signal will handle it. But how can i do it if the function i am passing in hook requires certain parameters.

// This is the block of code from where i have invoked the hook
const checkoutItems = useReactQuery<CheckoutResponseInterface[]>({
id: CHECKOUT_KEYS.CHECKOUT,
fn: fetchCheckouts,
isSignalRequired: true
});

// Now the question is.
const checkoutItems = useReactQuery<CheckoutResponseInterface[]>({
id: CHECKOUT_KEYS.CHECKOUT,
fn: ()=>fetchCheckouts({count:10}),
isSignalRequired: true
});

I want to pass count:10 object in function with a functionality of canceling it from hook. Is there anyway to achieve this in my scenario?

[TkDodo]

checking for isSignalRequired in the custom hook doesn't make much sense, as you need to pass the signal to fetchCheckouts so that axios or fetch or whatever you use under the hood can consume it. Also, count should be part of the query key, because it's a dependency to your fetch.

All in all, I just wouldn't build such a low-level abstraction, because its also quite hard to type. What's wrong with just calling useQuery?

useQuery({
  queryKey: [CHECKOUT_KEYS.CHECKOUT],
  queryFn: ()=>fetchCheckouts(),
})

useQuery({
  queryKey: [CHECKOUT_KEYS.CHECKOUT, { count: 10 }],
  queryFn: ({ signal })=>fetchCheckouts({ count: 10, signal }),
})

[sagarmsraozil]

i got it, thank you so much:)