T
TanStack•17mo ago
correct-apricot

How does one use the abort signal in combination with tanstack-query

Say I have the following route: 
export const orderQueryOptions = (orderId: string) =>
    queryOptions({
        queryKey: ["order", { orderId }],
        queryFn: ({ signal }) =>
            api.get(`api/v1/orders/${orderId}`, { signal }).json<Order>(),
    });

export const Route = createFileRoute("/_authenticated/orders/$id")({
    component: ShowOrder,
    loader: ({ context, params }) =>
        context.queryClient.ensureQueryData(orderQueryOptions(params.id)),
});
export const orderQueryOptions = (orderId: string) =>
    queryOptions({
        queryKey: ["order", { orderId }],
        queryFn: ({ signal }) =>
            api.get(`api/v1/orders/${orderId}`, { signal }).json<Order>(),
    });

export const Route = createFileRoute("/_authenticated/orders/$id")({
    component: ShowOrder,
    loader: ({ context, params }) =>
        context.queryClient.ensureQueryData(orderQueryOptions(params.id)),
});
How do I use the abort signal in both the loader and the queryFn
4 Replies
continuing-cyan
continuing-cyan•17mo ago
AbortSignal.any(loaderContext.abortController.signal, signal)
optimistic-gold
optimistic-gold•17mo ago
When you are using TanStack Query, you are opting into offloading the data-fetching and caching over to TSQ. So, what you are doing in the loader for your Route definition, really is just triggering ensureQueryData method in TSQ. I'd recommend not mixing the AbortControllers from TSQ and TSR, as you may trigger an un-intended state in Query.
eager-peach
eager-peach•17mo ago
agree. just take the signal that you get into the queryFn and pass it to your api. Nothing else should be needed
correct-apricot
correct-apricotOP•17mo ago
Makes sense, thanks!

Did you find this page helpful?