phibr0
phibr02w ago

Unable to abort Suspense queries

I am using trpc@11 with react-query@5. I was under the impression that as long as abortOnUnmount is true, all queries that haven't completed yet will be cancelled. Is there anything I am missing? Provider
export const TrpcReactProvider = ({ children }: { children: React.ReactNode }) => {
const queryClient = getQueryClient();

const [trpcClient] = useState(() =>
api.createClient({
links: [
loggerLink({
enabled: (opts) =>
process.env.NODE_ENV === 'development' ||
(opts.direction === 'down' &&
opts.result instanceof Error &&
opts.result.message !== 'Aborted'),
}),
unstable_httpBatchStreamLink({
transformer: superjson,
url: TRPC_URL,
}),
],
}),
);

return (
<api.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
<ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration>
</QueryClientProvider>
</api.Provider>
);
};
export const TrpcReactProvider = ({ children }: { children: React.ReactNode }) => {
const queryClient = getQueryClient();

const [trpcClient] = useState(() =>
api.createClient({
links: [
loggerLink({
enabled: (opts) =>
process.env.NODE_ENV === 'development' ||
(opts.direction === 'down' &&
opts.result instanceof Error &&
opts.result.message !== 'Aborted'),
}),
unstable_httpBatchStreamLink({
transformer: superjson,
url: TRPC_URL,
}),
],
}),
);

return (
<api.Provider client={trpcClient} queryClient={queryClient}>
<QueryClientProvider client={queryClient}>
<ReactQueryStreamedHydration>{children}</ReactQueryStreamedHydration>
</QueryClientProvider>
</api.Provider>
);
};
Problematic Code:
export const Results = () => {
const [state] = useValidatedSearchParams(ParamValidator, { shallow: true });
const filters = useMemo(() => paramsToApiInput(state!), [state]);
const [{ items }] = api._search.useSuspenseQuery(filters, { trpc: { abortOnUnmount: true } });
// render results
export const Results = () => {
const [state] = useValidatedSearchParams(ParamValidator, { shallow: true });
const filters = useMemo(() => paramsToApiInput(state!), [state]);
const [{ items }] = api._search.useSuspenseQuery(filters, { trpc: { abortOnUnmount: true } });
// render results
Now if state changes multiple times in a row while the query didn't finish yet, i think it should be cancelled. Still the queries complete in the background and get cached
0 Replies
No replies yetBe the first to reply to this messageJoin