feat: support useOptions of @hey-api/openapi-ts

- removed deprecated options of @hey-api/openapi-ts
- using ts-morph to help traverse typescript source files

Author: seriouslag

README.md

@@ -44,24 +44,14 @@ 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            Unused, will be removed in the next major version
-  --exportSchemas <value>    Write schemas to disk (default: false)
-  --indent <value>           Unused, will be removed in the next major version
-  --postfixServices <value>  Service name postfix (default: "Service")
-  --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
 ```
 
@@ -158,6 +148,15 @@ function ParentComponent() {
   );
 }
 
+function App() {
+  return (
+    <div className="App">
+      <h1>Pet List</h1>
+      <ParentComponent />
+    </div>
+  );
+}
+
 export default App;
 ```
 

examples/react-app/package.json

@@ -9,7 +9,7 @@
     "dev:mock": "prism mock ./petstore.yaml --dynamic",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "generate:api": "node ../../dist/cli.mjs -i ./petstore.yaml -c axios --request ./request.ts --postfixServices=Client",
+    "generate:api": "node ../../dist/cli.mjs -i ./petstore.yaml -c axios --request ./request.ts",
     "test:generated": "tsc -p ./tsconfig.openapi.json --noEmit"
   },
   "dependencies": {

examples/react-app/src/App.tsx

@@ -1,10 +1,10 @@
 import "./App.css";
 import {
-  useDefaultClientAddPet,
-  useDefaultClientFindPets,
-  useDefaultClientFindPetsKey,
-  useDefaultClientGetNotDefined,
-  useDefaultClientPostNotDefined,
+  useDefaultServiceAddPet,
+  useDefaultServiceFindPets,
+  useDefaultServiceFindPetsKey,
+  useDefaultServiceGetNotDefined,
+  useDefaultServicePostNotDefined,
 } from "../openapi/queries";
 import { useState } from "react";
 import { queryClient } from "./queryClient";
@@ -14,18 +14,16 @@ function App() {
   const [tags, _setTags] = useState<string[]>([]);
   const [limit, _setLimit] = useState<number>(10);
 
-  const { data, error, refetch } = useDefaultClientFindPets({
-    data: { tags, limit },
-  });
+  const { data, error, refetch } = useDefaultServiceFindPets({ 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
   // Note - this is marked as deprecated in the OpenAPI spec and being passed to the client
-  const { data: notDefined } = useDefaultClientGetNotDefined<undefined>();
+  const { data: notDefined } = useDefaultServiceGetNotDefined<undefined>();
   const { mutate: mutateNotDefined } =
-    useDefaultClientPostNotDefined<undefined>();
+    useDefaultServicePostNotDefined<undefined>();
 
-  const { mutate: addPet } = useDefaultClientAddPet();
+  const { mutate: addPet } = useDefaultServiceAddPet();
 
   if (error)
     return (
@@ -48,14 +46,12 @@ function App() {
         onClick={() => {
           addPet(
             {
-              data: {
-                requestBody: { name: "Duggy" },
-              },
+              requestBody: { name: "Duggy" },
             },
             {
               onSuccess: () => {
                 queryClient.invalidateQueries({
-                  queryKey: [useDefaultClientFindPetsKey],
+                  queryKey: [useDefaultServiceFindPetsKey],
                 });
                 console.log("success");
               },

examples/react-app/src/components/SuspenseChild.tsx

@@ -1,7 +1,7 @@
-import { useDefaultClientFindPetsSuspense } from "../../openapi/queries/suspense";
+import { useDefaultServiceFindPetsSuspense } from "../../openapi/queries/suspense";
 
 export const SuspenseChild = () => {
-  const { data } = useDefaultClientFindPetsSuspense({ tags: [], limit: 10 });
+  const { data } = useDefaultServiceFindPetsSuspense({ tags: [], limit: 10 });
 
   if (!Array.isArray(data)) {
     return <div>Error!</div>;

examples/react-app/src/components/SuspenseParent.tsx

@@ -3,10 +3,8 @@ import { SuspenseChild } from "./SuspenseChild";
 
 export const SuspenseParent = () => {
   return (
-    <>
-      <Suspense fallback={<>loading...</>}>
-        <SuspenseChild />
-      </Suspense>
-    </>
+    <Suspense fallback={<>loading...</>}>
+      <SuspenseChild />
+    </Suspense>
   );
 };

examples/react-app/src/main.tsx

@@ -1,13 +1,14 @@
-import React from 'react'
-import ReactDOM from 'react-dom/client'
-import App from './App'
-import './index.css'
-import { QueryClientProvider } from '@tanstack/react-query'
-import { queryClient } from './queryClient'
-ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
+import React from "react";
+import ReactDOM from "react-dom/client";
+import App from "./App";
+import "./index.css";
+import { QueryClientProvider } from "@tanstack/react-query";
+import { queryClient } from "./queryClient";
+
+ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
     <QueryClientProvider client={queryClient}>
       <App />
     </QueryClientProvider>
   </React.StrictMode>
-)
+);

package.json

@@ -37,16 +37,18 @@
   "author": "Daiki Urata (@7nohe)",
   "license": "MIT",
   "devDependencies": {
-    "@hey-api/openapi-ts": "0.34.5",
+    "@hey-api/openapi-ts": "0.36.0",
     "@types/node": "^20.10.6",
     "commander": "^12.0.0",
     "glob": "^10.3.10",
+    "ts-morph": "^22.0.0",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@hey-api/openapi-ts": "0.34.5",
+    "@hey-api/openapi-ts": "0.36.0",
     "commander": ">= 11 < 13",
     "glob": ">= 10",
+    "ts-morph": ">= 22 < 23",
     "typescript": ">= 4.8.3"
   }
 }