phibr0 Posts

phibr0

•Created by phibr0 on 7/5/2024 in #❓-help

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

1 replies