diff --git a/.changeset/crisp-baths-jam.md b/.changeset/crisp-baths-jam.md new file mode 100644 index 000000000..d9d9d4e42 --- /dev/null +++ b/.changeset/crisp-baths-jam.md @@ -0,0 +1,5 @@ +--- +"openapi-react-query": minor +--- + +Fix useInfiniteQuery query key collision with useQuery diff --git a/packages/openapi-react-query/src/index.ts b/packages/openapi-react-query/src/index.ts index fb9683164..e85952c73 100644 --- a/packages/openapi-react-query/src/index.ts +++ b/packages/openapi-react-query/src/index.ts @@ -113,7 +113,7 @@ export type UseInfiniteQueryMethod, Options["select"]>, - QueryKey, + readonly [...QueryKey, "infinite"], unknown >, "queryKey" | "queryFn" @@ -231,8 +231,8 @@ export default function createClient { + queryKey: [...queryKey, "infinite"], + queryFn: async ({ pageParam = 0, signal }) => { const mth = method.toUpperCase() as Uppercase; const fn = client[mth] as ClientMethod; const mergedInit = { diff --git a/packages/openapi-react-query/test/index.test.tsx b/packages/openapi-react-query/test/index.test.tsx index 78715e643..55f916016 100644 --- a/packages/openapi-react-query/test/index.test.tsx +++ b/packages/openapi-react-query/test/index.test.tsx @@ -1268,5 +1268,57 @@ describe("client", () => { expect(result.current.data).toEqual([1, 2, 3, 4, 5, 6]); }); + it("should not clash with useQuery when using the same method, path, and params", async () => { + const fetchClient = createFetchClient({ baseUrl }); + const client = createClient(fetchClient); + + useMockRequestHandler({ + baseUrl, + method: "get", + path: "/paginated-data", + status: 200, + body: { items: [1, 2, 3], nextPage: 1 }, + }); + + const { result } = renderHook( + () => ({ + query: client.useQuery("get", "/paginated-data", { + params: { + query: { + limit: 3, + }, + }, + }), + infiniteQuery: client.useInfiniteQuery( + "get", + "/paginated-data", + { + params: { + query: { + limit: 3, + }, + }, + }, + { + getNextPageParam: (lastPage) => lastPage.nextPage, + initialPageParam: 0, + }, + ), + }), + { wrapper }, + ); + + await waitFor(() => { + expect(result.current.query.isSuccess).toBe(true); + expect(result.current.infiniteQuery.isSuccess).toBe(true); + }); + + // useQuery should return flat data + expect(result.current.query.data).toEqual({ items: [1, 2, 3], nextPage: 1 }); + + // useInfiniteQuery should return paginated data with pages array + expect(result.current.infiniteQuery.data?.pages).toHaveLength(1); + expect(result.current.infiniteQuery.data?.pages[0]).toEqual({ items: [1, 2, 3], nextPage: 1 }); + }); }); });