Suspense Components
diff --git a/examples/react-app/src/axios.ts b/examples/react-app/src/axios.ts
index 22aaac4..e767177 100644
--- a/examples/react-app/src/axios.ts
+++ b/examples/react-app/src/axios.ts
@@ -2,5 +2,4 @@ import { client } from "../openapi/requests/services.gen";
client.setConfig({
baseURL: "http://localhost:4010",
- throwOnError: true,
});
diff --git a/examples/react-app/tsconfig.json b/examples/react-app/tsconfig.json
index 4e730f0..d1ced64 100644
--- a/examples/react-app/tsconfig.json
+++ b/examples/react-app/tsconfig.json
@@ -5,7 +5,7 @@
"lib": ["DOM", "DOM.Iterable", "ESNext"],
"allowJs": false,
"skipLibCheck": true,
- "esModuleInterop": false,
+ "esModuleInterop": true,
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
diff --git a/examples/react-app/verify-runtime.test.ts b/examples/react-app/verify-runtime.test.ts
new file mode 100644
index 0000000..9cbfb6b
--- /dev/null
+++ b/examples/react-app/verify-runtime.test.ts
@@ -0,0 +1,111 @@
+// Runtime verification of the generated code against a live HTTP server.
+// Runs in CI after `generate:api` โ exercises #172 (error responses reject),
+// #155 (prefetchInfiniteQuery), #174 (hierarchical key invalidation), and
+// the queryOptions factories with real requests, not just type checks.
+import http from "node:http";
+import type { AddressInfo } from "node:net";
+import { QueryClient } from "@tanstack/react-query";
+import { afterAll, beforeAll, expect, test } from "vitest";
+import {
+ UseFindPaginatedPetsInfiniteKeyFn,
+ useFindPaginatedPetsKey,
+} from "./openapi/queries/common";
+import {
+ ensureUseFindPetByIdData,
+ ensureUseFindPetsData,
+} from "./openapi/queries/ensureQueryData";
+import { prefetchUseFindPaginatedPetsInfinite } from "./openapi/queries/prefetch";
+import {
+ findPaginatedPetsInfiniteOptions,
+ findPetsOptions,
+} from "./openapi/queries/queryOptions";
+import { client } from "./openapi/requests/client.gen";
+
+const server = http.createServer((req, res) => {
+ const url = new URL(req.url ?? "/", "http://localhost");
+ res.setHeader("content-type", "application/json");
+ if (url.pathname === "/pets") {
+ res.end(JSON.stringify([{ id: 1, name: "Momo", tag: "cat" }]));
+ return;
+ }
+ if (url.pathname === "/paginated-pets") {
+ const page = Number(url.searchParams.get("page") ?? "1");
+ res.end(
+ JSON.stringify({
+ pets: [{ id: page, name: `pet-page-${page}` }],
+ nextPage: page + 1,
+ }),
+ );
+ return;
+ }
+ if (url.pathname.startsWith("/pets/")) {
+ res.statusCode = 500;
+ res.end(JSON.stringify({ code: 500, message: "boom" }));
+ return;
+ }
+ res.statusCode = 404;
+ res.end("{}");
+});
+
+const qc = new QueryClient({
+ defaultOptions: { queries: { retry: false } },
+});
+
+beforeAll(async () => {
+ await new Promise
((resolve) => server.listen(0, resolve));
+ const { port } = server.address() as AddressInfo;
+ // Deliberately NO throwOnError here โ the generated code must set it per call
+ client.setConfig({ baseURL: `http://localhost:${port}` });
+});
+
+afterAll(() => server.close());
+
+test("queryOptions factory fetches real data via fetchQuery", async () => {
+ const pets = await qc.fetchQuery(findPetsOptions());
+ expect(pets?.[0]?.name).toBe("Momo");
+});
+
+test("ensureQueryData resolves data on success", async () => {
+ const pets = await ensureUseFindPetsData(qc);
+ expect(Array.isArray(pets)).toBe(true);
+});
+
+test("#172: error responses reject instead of resolving undefined", async () => {
+ await expect(
+ ensureUseFindPetByIdData(qc, { path: { id: 999 } }, { retry: false }),
+ ).rejects.toBeTruthy();
+ // and nothing bogus was cached
+ expect(qc.getQueryData(["FindPetById", { path: { id: 999 } }])).toBe(
+ undefined,
+ );
+});
+
+test("#155: prefetchInfiniteQuery caches page 1 under the hierarchical key with a numeric pageParam", async () => {
+ await prefetchUseFindPaginatedPetsInfinite(qc, { query: { limit: 1 } });
+ const key = UseFindPaginatedPetsInfiniteKeyFn({ query: { limit: 1 } });
+ expect(key.slice(0, 2)).toEqual(["FindPaginatedPets", "infinite"]);
+ const cached = qc.getQueryData<{
+ pages: Array<{ pets?: Array<{ name?: string }> }>;
+ pageParams: unknown[];
+ }>(key);
+ expect(cached?.pages).toHaveLength(1);
+ expect(cached?.pages[0]?.pets?.[0]?.name).toBe("pet-page-1");
+ expect(cached?.pageParams[0]).toBe(1);
+});
+
+test("infiniteQueryOptions factory follows nextPage across two pages", async () => {
+ const result = await qc.fetchInfiniteQuery({
+ ...findPaginatedPetsInfiniteOptions({ query: { limit: 2 } }),
+ pages: 2,
+ });
+ expect(result.pages).toHaveLength(2);
+ expect(result.pages[1]?.pets?.[0]?.name).toBe("pet-page-2");
+ expect(result.pageParams).toEqual([1, 2]);
+});
+
+test("#174: invalidating the plain key prefix marks infinite entries stale", async () => {
+ const key = UseFindPaginatedPetsInfiniteKeyFn({ query: { limit: 1 } });
+ expect(qc.getQueryState(key)?.isInvalidated).toBe(false);
+ await qc.invalidateQueries({ queryKey: [useFindPaginatedPetsKey] });
+ expect(qc.getQueryState(key)?.isInvalidated).toBe(true);
+});
diff --git a/examples/react-router-6-app/package.json b/examples/react-router-6-app/package.json
index 761c156..32dac7b 100644
--- a/examples/react-router-6-app/package.json
+++ b/examples/react-router-6-app/package.json
@@ -13,10 +13,8 @@
"test:generated": "tsc -p ./tsconfig.json --noEmit"
},
"dependencies": {
- "@hey-api/client-axios": "^0.2.7",
"@tanstack/react-query": "^5.59.13",
"@tanstack/react-query-devtools": "^5.32.1",
- "axios": "^1.7.7",
"form-data": "~4.0.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
diff --git a/examples/react-router-6-app/src/App.tsx b/examples/react-router-6-app/src/App.tsx
index b4f1376..8f9c509 100644
--- a/examples/react-router-6-app/src/App.tsx
+++ b/examples/react-router-6-app/src/App.tsx
@@ -85,9 +85,7 @@ export function Compoment() {
)}
{Array.isArray(data) &&
- data?.map((pet, index) => (
- - {pet.name}
- ))}
+ data?.map((pet) => - {pet.name}
)}
);
diff --git a/examples/react-router-6-app/src/axios.ts b/examples/react-router-6-app/src/axios.ts
index f1c0877..99d80c9 100644
--- a/examples/react-router-6-app/src/axios.ts
+++ b/examples/react-router-6-app/src/axios.ts
@@ -1,6 +1,5 @@
-import { client } from "../openapi/requests/services.gen";
+import { client } from "../openapi/requests/client.gen";
client.setConfig({
baseUrl: "http://localhost:4010",
- throwOnError: true,
});
diff --git a/examples/react-router-6-app/src/main.tsx b/examples/react-router-6-app/src/main.tsx
index 5656b4d..f2ce7e9 100644
--- a/examples/react-router-6-app/src/main.tsx
+++ b/examples/react-router-6-app/src/main.tsx
@@ -6,7 +6,7 @@ import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
import { queryClient } from "./queryClient";
import "./axios";
-import { RouterProvider, createBrowserRouter } from "react-router-dom";
+import { createBrowserRouter, RouterProvider } from "react-router-dom";
const router = createBrowserRouter([
{
diff --git a/examples/react-router-7-app/app/routes/_index/route.tsx b/examples/react-router-7-app/app/routes/_index/route.tsx
index 1d9abbc..ecd7f0f 100644
--- a/examples/react-router-7-app/app/routes/_index/route.tsx
+++ b/examples/react-router-7-app/app/routes/_index/route.tsx
@@ -1,11 +1,10 @@
-import { useState } from "react";
-
import {
+ dehydrate,
HydrationBoundary,
QueryClient,
- dehydrate,
useQueryClient,
} from "@tanstack/react-query";
+import { useState } from "react";
import {
UseFindPetsKeyFn,
useAddPet,
@@ -91,9 +90,7 @@ function Pets() {
)}