feat!: changing openapi generator

Changed openapi code generator to @hey-api/openapi-ts.

Not supporting all properties yet.

Supporting new properties:
- base
- serviceResponse
- enums
- useDateType

indent and useUnionTypes properties were removed
left in for backwards compatibility.

BREAKING CHANGE: changed from cjs to mjs

.github/workflows/test.yml

@@ -24,23 +24,20 @@ jobs:
       - name: Install Node.js
         uses: actions/setup-node@v4
         with:
-          node-version: 20
-          cache: 'pnpm'
+          node-version: 18
+          cache: "pnpm"
 
       - name: Install dependencies
-        run: pnpm -w install
-      
+        run: pnpm install --frozen-lockfile
+
       - name: Build
         run: pnpm -w build
 
-      - name: Install dependencies in example app
-        run: pnpm --filter @7nohe/react-app install --no-frozen-lockfile
-
       - name: Run codegen
         run: pnpm --filter @7nohe/react-app generate:api
 
       - name: Archive generated query file
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: generated-query-file-${{ matrix.os }}
           path: examples/react-app/openapi/queries/index.ts

.gitignore

@@ -24,3 +24,4 @@ dist-ssr
 *.sw?
 
 openapi
+*.tsbuildinfo

README.md

@@ -6,7 +6,7 @@
 
 - Supports generation of custom react hooks that use React Query's `useQuery` and `useMutation` hooks
 - Supports generation of query keys for query caching
-- Supports the option to use pure TypeScript clients generated by [OpenAPI Typescript Codegen](https://github.com/ferdikoomen/openapi-typescript-codegen)
+- Supports the option to use pure TypeScript clients generated by [@hey-api/openapi-ts](https://github.com/hey-api/openapi-ts)
 
 ## Install
 
@@ -44,12 +44,24 @@ 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 [fetch, xhr, node, axios, angular] (default: "fetch")
-  --useUnionTypes            Use union types (default: false)
+  --useUnionTypes            Unused, will be removed in the next major version
   --exportSchemas <value>    Write schemas to disk (default: false)
-  --indent <value>           Indentation options [4, 2, tabs] (default: "4")
+  --indent <value>           Unused, will be removed in the next major version
   --postfixServices <value>  Service name postfix (default: "Service")
-  --postfixModels <value>    Modal name postfix
+  --postfixModels <value>    Unused, will be removed in the next major version
   --request <value>          Path to custom request file
+  --write <value>            Write the files to disk (true or false)
+  --useDateType              Use Date type instead of string for date types for models, this will not convert the data to a Date object
+  --enums                    Generate JavaScript objects from enum definitions?
+  --base <value>             Manually set base in OpenAPI config instead of inferring from server value
+  --serviceResponse <value>  Define shape of returned value from service calls ['body', 'generics', 'response']
+  --operationId              Use operation ID to generate operation names?
+  --lint                     Process output folder with linter?
+  --name                     Custom client class name
+  --format                   Process output folder with formatter?
+  --exportCore <value>       Export core types
+  --exportModels <value>     Export models
+  --exportServices <value>   Export services
   -h, --help                 display help for command
 ```
 
@@ -70,7 +82,7 @@ $ openapi-rq -i ./petstore.yaml
     - common.ts <- common types
     - queries.ts <- generated query hooks
     - suspenses.ts <- generated suspense hooks
-  - requests <- output code generated by OpenAPI Typescript Codegen
+  - requests <- output code generated by @hey-api/openapi-ts
 ```
 
 ### In your app

examples/react-app/package.json

@@ -9,8 +9,8 @@
     "dev:mock": "prism mock ./petstore.yaml --dynamic",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "generate:api": "node ../../dist/src/cli.js -i ./petstore.yaml -c axios --exportSchemas=true --postfixServices=Client --request ./request.ts",
-    "test:generated": "tsc ./openapi/queries/index.ts --noEmit --target esnext --moduleResolution node"
+    "generate:api": "node ../../dist/cli.mjs -i ./petstore.yaml -c axios --request ./request.ts --postfixServices=Client",
+    "test:generated": "tsc -p ./tsconfig.openapi.json --noEmit"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.18.1",
@@ -28,4 +28,4 @@
     "typescript": "^5.3.3",
     "vite": "^5.0.12"
   }
-}
+}

examples/react-app/request.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import type { AxiosError, AxiosRequestConfig, AxiosResponse } from "axios";
+import type { RawAxiosRequestHeaders } from "axios";
 
 import type { ApiRequestOptions } from "./ApiRequestOptions";
 import { CancelablePromise } from "./CancelablePromise";
@@ -13,7 +13,7 @@ const axiosInstance = axios.create({
   baseURL: "http://localhost:4010",
   headers: {
     // Your custom headers
-  },
+  } satisfies RawAxiosRequestHeaders,
 });
 
 // Add a request interceptor
@@ -49,12 +49,12 @@ export const request = <T>(
   return new CancelablePromise((resolve, reject, onCancel) => {
     onCancel(() => source.cancel("The user aborted a request."));
 
-    let formattedHeaders = options.headers;
-    if(options.mediaType) {
+    let formattedHeaders = options.headers as RawAxiosRequestHeaders;
+    if (options.mediaType) {
       formattedHeaders = {
         ...options.headers,
         "Content-Type": options.mediaType,
-      };
+      } satisfies RawAxiosRequestHeaders;
     }
 
     return axiosInstance

examples/react-app/src/App.tsx

@@ -14,7 +14,9 @@ function App() {
   const [tags, _setTags] = useState<string[]>([]);
   const [limit, _setLimit] = useState<number>(10);
 
-  const { data, error, refetch } = useDefaultClientFindPets({ tags, limit });
+  const { data, error, refetch } = useDefaultClientFindPets({
+    data: { tags, limit },
+  });
 
   // This is an example of a query that is not defined in the OpenAPI spec
   // this defaults to any - here we are showing how to override the type
@@ -46,7 +48,9 @@ function App() {
         onClick={() => {
           addPet(
             {
-              requestBody: { name: "Duggy" },
+              data: {
+                requestBody: { name: "Duggy" },
+              },
             },
             {
               onSuccess: () => {

examples/react-app/tsconfig.json

@@ -10,12 +10,15 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
     "jsx": "react-jsx"
   },
-  "include": ["src", "openapi"],
-  "references": [{ "path": "./tsconfig.node.json" }]
+  "include": ["src"],
+  "references": [
+    { "path": "./tsconfig.node.json" },
+    { "path": "./tsconfig.openapi.json" }
+  ]
 }

examples/react-app/tsconfig.openapi.json

@@ -0,0 +1,18 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node10",
+    "resolveJsonModule": true,
+    "isolatedModules": true
+  },
+  "include": ["openapi"]
+}

package.json

@@ -3,8 +3,12 @@
   "version": "0.5.3",
   "description": "OpenAPI React Query Codegen",
   "bin": {
-    "openapi-rq": "dist/src/cli.js"
+    "openapi-rq": "dist/cli.js"
   },
+  "type": "module",
+  "workspaces": [
+    "examples/*"
+  ],
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "preview": "npm run build && npm -C examples/react-app run generate:api",
@@ -27,21 +31,22 @@
     "openapi",
     "swagger",
     "typescript",
-    "openapi-typescript-codegen"
+    "openapi-typescript-codegen",
+    "@hey-api/openapi-ts"
   ],
   "author": "Daiki Urata (@7nohe)",
   "license": "MIT",
   "devDependencies": {
+    "@hey-api/openapi-ts": "0.34.5",
     "@types/node": "^20.10.6",
     "commander": "^12.0.0",
     "glob": "^10.3.10",
-    "openapi-typescript-codegen": "0.25.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
+    "@hey-api/openapi-ts": "0.34.5",
     "commander": ">= 11 < 13",
     "glob": ">= 10",
-    "openapi-typescript-codegen": "^0.24.0",
     "typescript": ">= 4.8.3"
   }
 }