Skip to content

feat(openapi-react-query): Pass abort signal to fetch #1864

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Sep 20, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/signal.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"openapi-react-query": patch
---

Pass down signal to fetch function this way `useQuery` and `useSuspenseQuery` can cancel queries.
8 changes: 4 additions & 4 deletions packages/openapi-react-query/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -70,10 +70,10 @@ export default function createClient<Paths extends {}, Media extends MediaType =
return useQuery(
{
queryKey: [method, path, init],
queryFn: async () => {
queryFn: async ({ signal }) => {
const mth = method.toUpperCase() as keyof typeof client;
const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
const { data, error } = await fn(path, { signal, ...(init as any) }); // TODO: find a way to avoid as any
if (error || !data) {
throw error;
}
Expand All @@ -88,10 +88,10 @@ export default function createClient<Paths extends {}, Media extends MediaType =
return useSuspenseQuery(
{
queryKey: [method, path, init],
queryFn: async () => {
queryFn: async ({ signal }) => {
const mth = method.toUpperCase() as keyof typeof client;
const fn = client[mth] as ClientMethod<Paths, typeof method, Media>;
const { data, error } = await fn(path, init as any); // TODO: find a way to avoid as any
const { data, error } = await fn(path, { signal, ...(init as any) }); // TODO: find a way to avoid as any
if (error || !data) {
throw error;
}
Expand Down
45 changes: 44 additions & 1 deletion packages/openapi-react-query/test/index.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { server, baseUrl, useMockRequestHandler } from "./fixtures/mock-server.j
import type { paths } from "./fixtures/api.js";
import createClient from "../src/index.js";
import createFetchClient from "openapi-fetch";
import { fireEvent, render, renderHook, screen, waitFor } from "@testing-library/react";
import { fireEvent, render, renderHook, screen, waitFor, act } from "@testing-library/react";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { Suspense, type ReactNode } from "react";
import { ErrorBoundary } from "react-error-boundary";
Expand Down Expand Up @@ -109,6 +109,26 @@ describe("client", () => {
expectTypeOf(error).toEqualTypeOf<{ code: number; message: string } | null>();
});

it("passes abort signal to fetch", async () => {
let signalPassedToFetch: AbortSignal | undefined;

const fetchClient = createFetchClient<paths>({
baseUrl,
fetch: async ({ signal }) => {
signalPassedToFetch = signal;
await new Promise(() => {});
return Response.error();
},
});
const client = createClient(fetchClient);

const { unmount } = renderHook(() => client.useQuery("get", "/string-array"), { wrapper });

unmount();

expect(signalPassedToFetch?.aborted).toBeTruthy();
});

describe("params", () => {
it("should be required if OpenAPI schema requires params", async () => {
const fetchClient = createFetchClient<paths>({ baseUrl });
Expand Down Expand Up @@ -258,6 +278,29 @@ describe("client", () => {

await waitFor(() => rendered.findByText("data: Hello"));
});

it("passes abort signal to fetch", async () => {
let signalPassedToFetch: AbortSignal | undefined;

const fetchClient = createFetchClient<paths>({
baseUrl,
fetch: async ({ signal }) => {
signalPassedToFetch = signal;
await new Promise(() => {});
return Response.error();
},
});
const client = createClient(fetchClient);
const queryClient = new QueryClient({});

const { unmount } = renderHook(() => client.useSuspenseQuery("get", "/string-array", {}, {}, queryClient));

unmount();

await act(() => queryClient.cancelQueries());

expect(signalPassedToFetch?.aborted).toBeTruthy();
});
});

describe("useMutation", () => {
Expand Down