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
7nohe · Apr 1, 2024 · 5635578 · 5635578
1 parent 4c01176
commit 5635578
Show file tree

Hide file tree

Showing 16 changed files with 892 additions and 705 deletions.
diff --git a/README.md b/README.md
@@ -6,15 +6,15 @@
 
 - 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
 
 ```
 $ npm install -D @7nohe/openapi-react-query-codegen
 ```
 
- Register the command to the `scripts` property in your package.json file.
+Register the command to the `scripts` property in your package.json file.
 
 ```json
 {
@@ -30,7 +30,6 @@ You can also run the command without installing it in your project using the npx
 $ npx --package @7nohe/openapi-react-query-codegen openapi-rq -i ./petstore.yaml -c axios
 ```
 
-
 ## Usage
 
 ```
@@ -45,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
   --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
 ```
 
@@ -68,16 +79,14 @@ $ openapi-rq -i ./petstore.yaml
 - openapi
   - queries
     - index.ts <- custom react hooks
-  - requests <- output code generated by OpenAPI Typescript Codegen
+  - requests <- output code generated by @hey-api/openapi-ts
 ```
 
 ### In your app
 
 ```tsx
 // App.tsx
-import {
-  usePetServiceFindPetsByStatus,
-} from "../openapi/queries";
+import { usePetServiceFindPetsByStatus } from "../openapi/queries";
 function App() {
   const { data } = usePetServiceFindPetsByStatus({ status: ["available"] });
 
@@ -100,30 +109,25 @@ You can also use pure TS clients.
 
 ```tsx
 import { useQuery } from "@tanstack/react-query";
-import { PetService } from '../openapi/requests/services/PetService';
-import {
-  usePetServiceFindPetsByStatusKey,
-} from "../openapi/queries";
+import { PetService } from "../openapi/requests/services/PetService";
+import { usePetServiceFindPetsByStatusKey } from "../openapi/queries";
 
 function App() {
   // You can still use the auto-generated query key
   const { data } = useQuery({
     queryKey: [usePetServiceFindPetsByStatusKey],
     queryFn: () => {
       // Do something here
-      return PetService.findPetsByStatus(['available']);
-    }
-});
+      return PetService.findPetsByStatus(["available"]);
+    },
+  });
 
-  return (
-    <div className="App">
-      {/* .... */}
-    </div>
-  );
+  return <div className="App">{/* .... */}</div>;
 }
 
 export default App;
 ```
 
 ## License
+
 MIT
diff --git a/examples/react-app/package.json b/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.js -i ./petstore.yaml -c axios --postfixServices=Client --request ./request.ts --useDateType",
+    "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"
   }
-}
+}
diff --git a/examples/react-app/request.ts b/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

diff --git a/examples/react-app/tsconfig.json b/examples/react-app/tsconfig.json
@@ -10,7 +10,7 @@
     "strict": true,
     "forceConsistentCasingInFileNames": true,
     "module": "ESNext",
-    "moduleResolution": "Node",
+    "moduleResolution": "Bundler",
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,

diff --git a/examples/react-app/tsconfig.openapi.json b/examples/react-app/tsconfig.openapi.json
@@ -0,0 +1,19 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "module": "ESNext",
+    "moduleResolution": "Node10",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": ["openapi"]
+}
diff --git a/package.json b/package.json
@@ -3,8 +3,9 @@
   "version": "0.5.3",
   "description": "OpenAPI React Query Codegen",
   "bin": {
-    "openapi-rq": "dist/src/cli.js"
+    "openapi-rq": "dist/cli.js"
   },
+  "type": "module",
   "scripts": {
     "build": "tsc -p tsconfig.json",
     "preview": "npm run build && npm -C examples/react-app run generate:api",
@@ -27,21 +28,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.27.38",
     "@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.27.38",
     "commander": ">= 11 < 13",
     "glob": ">= 10",
-    "openapi-typescript-codegen": "^0.24.0",
     "typescript": ">= 4.8.3"
   }
 }