stormy-gold

useQuery AbortSignal does not cancel server operation

When using useQuery, the signal that is provided from queryFn does not work the exact same way as just cancelling it manually, right?

export const useProducts = () => {
    const productSearchValue = useProductSearchValue();
    const { customerId, port, customerOrganizationId } = usePreferencesValue();

    const { data, isError, isLoading, isFetching, isFetched } = useQuery({
        queryKey: [QueryKeys.Products, customerId, port, customerOrganizationId],
        retry: false,
        useErrorBoundary: true,
        enabled: !!customerId && !!port && !!customerOrganizationId,
        queryFn: async ({ signal }) => {
            try {
                const req = await fetchApi<Product[]>(
                    `/api/products/all?customer=${customerId}&port=${port?.id}&organization=${customerOrganizationId}`,
                    {
                        method: "GET",
                        signal: signal,
                    },
                );

                return req;
            } catch (err) {
                if (err instanceof Error) {
                    throw new Error(err.message);
                }
            }
        },
        select: (data) => {
            const regExp = new RegExp(productSearchValue, "gi");

            return data?.filter((p) => p.name.match(regExp) || p.id.match(regExp));
        },
    });

    return { data, isLoading, isFetched, isFetching, isError };
};

export const useProducts = () => {
    const productSearchValue = useProductSearchValue();
    const { customerId, port, customerOrganizationId } = usePreferencesValue();

    const { data, isError, isLoading, isFetching, isFetched } = useQuery({
        queryKey: [QueryKeys.Products, customerId, port, customerOrganizationId],
        retry: false,
        useErrorBoundary: true,
        enabled: !!customerId && !!port && !!customerOrganizationId,
        queryFn: async ({ signal }) => {
            try {
                const req = await fetchApi<Product[]>(
                    `/api/products/all?customer=${customerId}&port=${port?.id}&organization=${customerOrganizationId}`,
                    {
                        method: "GET",
                        signal: signal,
                    },
                );

                return req;
            } catch (err) {
                if (err instanceof Error) {
                    throw new Error(err.message);
                }
            }
        },
        select: (data) => {
            const regExp = new RegExp(productSearchValue, "gi");

            return data?.filter((p) => p.name.match(regExp) || p.id.match(regExp));
        },
    });

    return { data, isLoading, isFetched, isFetching, isError };
};

Take this example. This cancels the request on the frontend, it seems but when trying to catch the cancelled request on the backend (Go in this case, but happens in c# too), I am unable to pick up that the request is cancelled. However, just doing it manually with AbortController e.x, it works just fine. I have not tried to manually cancel the query with what react-query provides, but nor should that be the solution anyways (will test it out) Does anyone know what is happening? What the right way of thinking here?

6 Replies

stormy-goldOP•2y ago

"@tanstack/react-query": "^4.36.1", btw

absent-sapphire•2y ago

we also just use an abort controller internally so not sure how it could be different

absent-sapphire•2y ago

https://github.com/TanStack/query/blob/35539bf34f4e623c9ad70bbcd3d01e1f837bfa63/packages/query-core/src/query.ts#L365

GitHub

query/packages/query-core/src/query.ts at 35539bf34f4e623c9ad70bbcd...

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query. - TanStack/query

stormy-goldOP•2y ago

Yeah, I find it very strange. Request are being cancelled from any http client as well. Even tried to create my own abortcontroller, and aborting based on the event coming from the signal react-query provides, and still having the issue So not quite sure what's going on

absent-sapphire•2y ago

If you see the network request being cancelled in the browser devtools, the frontend job is done 🙂

stormy-goldOP•2y ago

I figured out that this is a Vite error btw

    server: {
        open: true,
        port: 3000,
        proxy: {
            "^/api": {
                target: devProxyServer,
                changeOrigin: true,
            },
        },
    },

    server: {
        open: true,
        port: 3000,
        proxy: {
            "^/api": {
                target: devProxyServer,
                changeOrigin: true,
            },
        },
    },

this proxy from Vite somehow doesnt tell the backend that the req is cancelled i.e fetch("/api/<something>") not a clue how to solve it but yeah

Gaming

Programming

useQuery AbortSignal does not cancel server operation

Did you find this page helpful?