Fix unknown error type

.github/workflows/test.yml

@@ -33,18 +33,30 @@ jobs:
       - name: Build
         run: pnpm -w build
 
-      - name: Run codegen
+      - name: Run codegen for react-app
         run: pnpm --filter @7nohe/react-app generate:api
 
-      - name: Archive generated query file
+      - name: Run codegen for nextjs-app
+        run: pnpm --filter nextjs-app generate:api
+
+      - name: Run codegen for tanstack-router-app
+        run: pnpm --filter tanstack-router-app generate:api
+
+      - name: Archive generated query files
         uses: actions/upload-artifact@v4
         with:
           name: generated-query-file-${{ matrix.os }}
-          path: examples/react-app/openapi/queries/index.ts
+          path: examples/react-app/openapi/queries
 
-      - name: Run tsc
+      - name: Run tsc in react-app
         run: pnpm --filter @7nohe/react-app test:generated
 
+      - name: Run tsc in nextjs-app
+        run: pnpm --filter nextjs-app test:generated
+
+      - name: Run tsc in tanstack-router-app
+        run: pnpm --filter tanstack-router-app test:generated
+
       - name: Run biome
         run: pnpm biome check .
         if: ${{ matrix.os == 'ubuntu-latest' }}

README.md

@@ -47,12 +47,10 @@ Options:
   -i, --input <value>         OpenAPI specification, can be a path, url or string content (required)
   -o, --output <value>        Output directory (default: "openapi")
   -c, --client <value>        HTTP client to generate (choices: "@hey-api/client-fetch", "@hey-api/client-axios", default: "@hey-api/client-fetch")
-  --request <value>           Path to custom request file
   --format <value>            Process output folder with formatter? (choices: "biome", "prettier")
   --lint <value>              Process output folder with linter? (choices: "biome", "eslint")
   --operationId               Use operation ID to generate operation names?
   --serviceResponse <value>   Define shape of returned value from service calls (choices: "body", "response", default: "body")
-  --base <value>              Manually set base in OpenAPI config instead of inferring from server value
   --enums <value>             Generate JavaScript objects from enum definitions? (choices: "javascript", "typescript")
   --useDateType               Use Date type instead of string for date types for models, this will not convert the data to a Date object
   --debug                     Run in debug mode?
@@ -94,9 +92,9 @@ $ openapi-rq -i ./petstore.yaml
 
 ```tsx
 // App.tsx
-import { usePetServiceFindPetsByStatus } from "../openapi/queries";
+import { useFindPets } from "../openapi/queries";
 function App() {
-  const { data } = usePetServiceFindPetsByStatus({ status: ["available"] });
+  const { data } = useFindPets();
 
   return (
     <div className="App">
@@ -113,16 +111,16 @@ export default App;
 
 ```tsx
 import { useQuery } from "@tanstack/react-query";
-import { PetService } from "../openapi/requests/services";
-import { usePetServiceFindPetsByStatusKey } from "../openapi/queries";
+import { findPets } from "../openapi/requests/services.gen";
+import { useFindPetsKey } from "../openapi/queries";
 
 function App() {
   // You can still use the auto-generated query key
   const { data } = useQuery({
-    queryKey: [usePetServiceFindPetsByStatusKey],
+    queryKey: [useFindPetsKey],
     queryFn: () => {
       // Do something here
-      return PetService.findPetsByStatus(["available"]);
+      return findPets();
     },
   });
 
@@ -136,9 +134,11 @@ export default App;
 
 ```tsx
 // App.tsx
-import { useDefaultClientFindPetsSuspense } from "../openapi/queries/suspense";
+import { useFindPetsSuspense } from "../openapi/queries/suspense";
 function ChildComponent() {
-  const { data } = useDefaultClientFindPetsSuspense({ tags: [], limit: 10 });
+  const { data } = useFindPetsSuspense({
+    query: { tags: [], limit: 10 },
+  });
 
   return <ul>{data?.map((pet, index) => <li key={pet.id}>{pet.name}</li>)}</ul>;
 }
@@ -169,13 +169,13 @@ export default App;
 
 ```tsx
 // App.tsx
-import { usePetServiceAddPet } from "../openapi/queries";
+import { useAddPet } from "../openapi/queries";
 
 function App() {
-  const { mutate } = usePetServiceAddPet();
+  const { mutate } = useAddPet();
 
   const handleAddPet = () => {
-    mutate({ name: "Fluffy", status: "available" });
+    mutate({ body: { name: "Fluffy" } });
   };
 
   return (
@@ -199,22 +199,22 @@ To ensure the query key is created the same way as the query hook, you can use t
 
 ```tsx
 import {
-  usePetServiceFindPetsByStatus,
-  usePetServiceAddPet,
-  UsePetServiceFindPetsByStatusKeyFn,
+  useFindPetsByStatus,
+  useAddPet,
+  UseFindPetsByStatusKeyFn,
 } from "../openapi/queries";
 
 // App.tsx
 function App() {
   const [status, setStatus] = React.useState(["available"]);
-  const { data } = usePetServiceFindPetsByStatus({ status });
-  const { mutate } = usePetServiceAddPet({
+  const { data } = useFindPetsByStatus({ status });
+  const { mutate } = useAddPet({
     onSuccess: () => {
       queryClient.invalidateQueries({
         // Call the query key function to get the query key
         // This is important to ensure the query key is created the same way as the query hook
         // This insures the cache is invalidated correctly and is typed correctly
-        queryKey: [UsePetServiceFindPetsByStatusKeyFn({
+        queryKey: [UseFindPetsByStatusKeyFn({
           status
         })],
       });
@@ -299,42 +299,13 @@ paths:
 Usage of Generated Hooks:
 
 ```ts
-import { useDefaultServiceFindPaginatedPetsInfinite } from "@/openapi/queries/infiniteQueries";
+import { useFindPaginatedPetsInfinite } from "@/openapi/queries/infiniteQueries";
 
-const { data, fetchNextPage } = useDefaultServiceFindPaginatedPetsInfinite({
-  limit: 10,
-  tags: [],
+const { data, fetchNextPage } = useFindPaginatedPetsInfinite({
+  query: { tags: [], limit: 10 }
 });
 ```
 
-##### Runtime Configuration
-
-You can modify the default values used by the generated service calls by modifying the OpenAPI configuration singleton object.
-
-It's default location is `openapi/requests/core/OpenAPI.ts` and it is also exported from `openapi/index.ts`
-
-Import the constant into your runtime and modify it before setting up the react app.
-
-```typescript
-/** main.tsx */
-import { OpenAPI as OpenAPIConfig } from './openapi/requests/core/OpenAPI';
-...
-OpenAPIConfig.BASE = 'www.domain.com/api';
-OpenAPIConfig.HEADERS = {
-  'x-header-1': 'value-1',
-  'x-header-2': 'value-2',
-};
-...
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </React.StrictMode>
-);
-
-```
-
 ## Development
 
 ### Install dependencies
@@ -364,6 +335,7 @@ pnpm snapshot
 ```
 
 ### Build example and validate generated code
+
 ```bash
 npm run build && pnpm --filter @7nohe/react-app generate:api && pnpm --filter @7nohe/react-app test:generated 
 ```

examples/nextjs-app/package.json

@@ -9,12 +9,12 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml --format=biome --lint=biome"
+    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml --format=biome --lint=biome",
+    "test:generated": "tsc -p ./tsconfig.json --noEmit"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.32.1",
     "@tanstack/react-query-devtools": "^5.32.1",
-    "axios": "^1.6.7",
     "next": "^14.2.3",
     "react": "^18",
     "react-dom": "^18"

examples/react-app/package.json

@@ -10,12 +10,12 @@
     "build": "tsc && vite build",
     "preview": "vite preview",
     "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml --format=biome --lint=biome -c @hey-api/client-axios",
-    "test:generated": "tsc -p ./tsconfig.openapi.json --noEmit"
+    "test:generated": "tsc -p ./tsconfig.json --noEmit"
   },
   "dependencies": {
     "@hey-api/client-axios": "^0.2.7",
     "@tanstack/react-query": "^5.32.1",
-    "axios": "^1.6.7",
+    "axios": "^1.7.7",
     "form-data": "~4.0.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"

examples/react-app/src/App.tsx

@@ -29,7 +29,10 @@ function App() {
   const { data: notDefined } = useGetNotDefined<undefined>();
   const { mutate: mutateNotDefined } = usePostNotDefined<undefined>();
 
-  const { mutate: addPet } = useAddPet();
+  const { mutate: addPet, isError } = useAddPet();
+
+  const [text, setText] = useState<string>("");
+  const [errorText, setErrorText] = useState<string>();
 
   if (error)
     return (
@@ -44,18 +47,18 @@ function App() {
   return (
     <div className="App">
       <h1>Pet List</h1>
-      <ul>
-        {Array.isArray(data) &&
-          data?.map((pet, index) => (
-            <li key={`${pet.id}-${index}`}>{pet.name}</li>
-          ))}
-      </ul>
+      <input
+        type="text"
+        value={text}
+        placeholder="Type pet name"
+        onChange={(e) => setText(e.target.value)}
+      />
       <button
         type="button"
         onClick={() => {
           addPet(
             {
-              body: { name: "Duggy" },
+              body: { name: text },
             },
             {
               onSuccess: () => {
@@ -64,13 +67,31 @@ function App() {
                 });
                 console.log("success");
               },
-              onError: (error) => console.error(error),
+              onError: (error) => {
+                console.log(error.response);
+                setErrorText(`Error: ${error.response?.data.message}`);
+              },
             },
           );
         }}
       >
         Create a pet
       </button>
+      {isError && (
+        <p
+          style={{
+            color: "red",
+          }}
+        >
+          {errorText}
+        </p>
+      )}
+      <ul>
+        {Array.isArray(data) &&
+          data?.map((pet, index) => (
+            <li key={`${pet.id}-${index}`}>{pet.name}</li>
+          ))}
+      </ul>
       <div>
         <h1>Suspense Components</h1>
         <SuspenseParent />

examples/react-app/src/axios.ts

@@ -2,4 +2,5 @@ import { client } from "../openapi/requests/services.gen";
 
 client.setConfig({
   baseURL: "http://localhost:4010",
+  throwOnError: true,
 });

examples/react-app/src/index.css

@@ -68,3 +68,20 @@ button:focus-visible {
     background-color: #f9f9f9;
   }
 }
+
+input {
+  border-radius: 8px;
+  border: 1px solid #ccc;
+  padding: 0.5em;
+  font-size: 1em;
+  font-family: inherit;
+  background-color: #fff;
+  color: #000;
+  transition: border-color 0.25s;
+  margin: 1em;
+}
+
+input:focus {
+  border-color: #646cff;
+  outline: none;
+}

examples/react-app/tsconfig.json

@@ -18,7 +18,8 @@
   },
   "include": ["src"],
   "references": [
-    { "path": "./tsconfig.node.json" },
-    { "path": "./tsconfig.openapi.json" }
+    {
+      "path": "./tsconfig.node.json"
+    }
   ]
 }

examples/tanstack-router-app/package.json

@@ -11,7 +11,8 @@
     "build": "vite build",
     "serve": "vite preview",
     "start": "vite",
-    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml --format=biome --lint=biome"
+    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml --format=biome --lint=biome",
+    "test:generated": "tsc -p ./tsconfig.json --noEmit"
   },
   "devDependencies": {
     "@stoplight/prism-cli": "^5.5.2",

package.json

@@ -12,7 +12,9 @@
     "build": "rimraf dist && tsc -p tsconfig.json",
     "lint": "biome check .",
     "lint:fix": "biome check --write .",
-    "preview": "npm run build && npm -C examples/react-app run generate:api",
+    "preview:react": "npm run build && npm -C examples/react-app run generate:api",
+    "preview:nextjs": "npm run build && npm -C examples/nextjs-app run generate:api",
+    "preview:tanstack-router": "npm run build && npm -C examples/tanstack-router-app run generate:api",
     "prepublishOnly": "npm run build",
     "release": "npx git-ensure -a && npx bumpp --commit --tag --push",
     "test": "vitest --coverage.enabled true",