#useQuery AbortSignal does not cancel server operation

10 messages · Page 1 of 1 (latest)

tawdry hornet
#

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 };
};

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?

#

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

frail lagoon
#

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

tawdry hornet
#

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

frail lagoon
#

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

tawdry hornet
#

I figured out that this is a Vite error btw

# 
    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>")