feat/new openapi client support 2

.github/workflows/comment-release.yml

@@ -53,7 +53,10 @@ jobs:
           github-token: ${{ secrets.GITHUB_TOKEN }}
           script: |
             const { issue: { number: issue_number }, repo: { owner, repo }, payload  } = context;
-            const { name: packageName, version } = require(`${process.env.GITHUB_WORKSPACE}/package.json`);
+            const fs = require('fs')
+            const jsonString = fs.readFileSync(`${process.env.GITHUB_WORKSPACE}/package.json`)
+            var packageJson = JSON.parse(jsonString)
+            const { name: packageName, version } = packageJson;
 
             const body = [
               `npm package published to pre tag.`,

README.md

@@ -21,15 +21,15 @@ Register the command to the `scripts` property in your package.json file.
 ```json
 {
   "scripts": {
-    "codegen": "openapi-rq -i ./petstore.yaml -c axios"
+    "codegen": "openapi-rq -i ./petstore.yaml -c @hey-api/client-fetch"
   }
 }
 ```
 
 You can also run the command without installing it in your project using the npx command.
 
 ```bash
-$ npx --package @7nohe/openapi-react-query-codegen openapi-rq -i ./petstore.yaml -c axios
+$ npx --package @7nohe/openapi-react-query-codegen openapi-rq -i ./petstore.yaml -c @hey-api/client-fetch
 ```
 
 ## Usage
@@ -45,7 +45,7 @@ Options:
   -V, --version              output the version number
   -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")
+  -c, --client <value>       HTTP client to generate [@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? ['biome', 'prettier']
   --lint   <value>           Process output folder with linter? ['eslint', 'biome']

biome.json

@@ -5,6 +5,7 @@
   },
   "files": {
     "ignore": [
+      ".vscode",
       "dist",
       "examples/react-app/openapi",
       "coverage",

examples/nextjs-app/app/page.tsx

@@ -1,17 +1,18 @@
-import { prefetchUseDefaultServiceFindPets } from "@/openapi/queries/prefetch";
 import {
   HydrationBoundary,
   QueryClient,
   dehydrate,
 } from "@tanstack/react-query";
+import { prefetchUseFindPets } from "../openapi/queries/prefetch";
 import Pets from "./pets";
+import { client } from "./providers";
 
 export default async function Home() {
   const queryClient = new QueryClient();
 
-  await prefetchUseDefaultServiceFindPets(queryClient, {
-    limit: 10,
-    tags: [],
+  await prefetchUseFindPets(queryClient, {
+    query: { tags: [], limit: 10 },
+    client: client,
   });
 
   return (

examples/nextjs-app/app/pets.tsx

@@ -1,12 +1,11 @@
 "use client";
 
-import { useDefaultServiceFindPets } from "@/openapi/queries";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { useFindPets } from "../openapi/queries";
 
 export default function Pets() {
-  const { data } = useDefaultServiceFindPets({
-    limit: 10,
-    tags: [],
+  const { data } = useFindPets({
+    query: { tags: [], limit: 10 },
   });
 
   return (

examples/nextjs-app/app/providers.tsx

@@ -1,9 +1,9 @@
 "use client";
 
+import { createClient } from "@hey-api/client-fetch";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
 // We can not useState or useRef in a server component, which is why we are
-// extracting this part out into it's own file with 'use client' on top
-import { useState } from "react";
+// extracting this part out into
 
 function makeQueryClient() {
   return new QueryClient({
@@ -32,6 +32,10 @@ function getQueryClient() {
   return browserQueryClient;
 }
 
+export const client = createClient({
+  baseUrl: "http://localhost:4010",
+});
+
 export default function Providers({ children }: { children: React.ReactNode }) {
   // NOTE: Avoid useState when initializing the query client if you don't
   //       have a suspense boundary between this and the code that may

examples/nextjs-app/package.json

@@ -9,7 +9,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "next lint",
-    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml -c axios --request ./request.ts --format=biome --lint=biome"
+    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml --request ./request.ts --format=biome --lint=biome --base http://localhost:4010"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.32.1",

examples/petstore.yaml

@@ -151,12 +151,12 @@ components:
     NewPet:
       type: object
       required:
-        - name  
+        - name
       properties:
         name:
           type: string
         tag:
-          type: string    
+          type: string
 
     Error:
       type: object
@@ -168,4 +168,4 @@ components:
           type: integer
           format: int32
         message:
-          type: string
+          type: string

examples/react-app/package.json

@@ -9,10 +9,11 @@
     "dev:mock": "prism mock ../petstore.yaml --dynamic",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml -c axios --request ./request.ts --format=biome --lint=biome",
+    "generate:api": "rimraf ./openapi && node ../../dist/cli.mjs -i ../petstore.yaml --format=biome --lint=biome",
     "test:generated": "tsc -p ./tsconfig.openapi.json --noEmit"
   },
   "dependencies": {
+    "@hey-api/client-fetch": "^0.1.3",
     "@tanstack/react-query": "^5.32.1",
     "axios": "^1.6.7",
     "form-data": "~4.0.0",

examples/react-app/src/App.tsx

@@ -1,32 +1,35 @@
 import "./App.css";
 import { useState } from "react";
+
+import { createClient } from "@hey-api/client-fetch";
 import {
-  UseDefaultServiceFindPetsKeyFn,
-  useDefaultServiceAddPet,
-  useDefaultServiceFindPets,
-  useDefaultServiceGetNotDefined,
-  useDefaultServicePostNotDefined,
+  UseFindPetsKeyFn,
+  useAddPet,
+  useFindPets,
+  useGetNotDefined,
+  usePostNotDefined,
 } from "../openapi/queries";
 import { SuspenseParent } from "./components/SuspenseParent";
 import { queryClient } from "./queryClient";
 
 function App() {
+  createClient({ baseUrl: "http://localhost:4010" });
+
   const [tags, _setTags] = useState<string[]>([]);
   const [limit, _setLimit] = useState<number>(10);
 
-  const { data, error, refetch } = useDefaultServiceFindPets({ tags, limit });
+  const { data, error, refetch } = useFindPets({ query: { tags, limit } });
   // This is an example of using a hook that has all parameters optional;
   // Here we do not have to pass in an object
-  const { data: _ } = useDefaultServiceFindPets();
+  const { data: _ } = useFindPets();
 
   // 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 } = useDefaultServiceGetNotDefined<undefined>();
-  const { mutate: mutateNotDefined } =
-    useDefaultServicePostNotDefined<undefined>();
+  const { data: notDefined } = useGetNotDefined<undefined>();
+  const { mutate: mutateNotDefined } = usePostNotDefined<undefined>();
 
-  const { mutate: addPet } = useDefaultServiceAddPet();
+  const { mutate: addPet } = useAddPet();
 
   if (error)
     return (
@@ -52,12 +55,12 @@ function App() {
         onClick={() => {
           addPet(
             {
-              requestBody: { name: "Duggy" },
+              body: { name: "Duggy" },
             },
             {
               onSuccess: () => {
                 queryClient.invalidateQueries({
-                  queryKey: UseDefaultServiceFindPetsKeyFn(),
+                  queryKey: UseFindPetsKeyFn({ query: { tags, limit } }),
                 });
                 console.log("success");
               },

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

@@ -1,15 +1,17 @@
-import { useDefaultServiceFindPetsSuspense } from "../../openapi/queries/suspense";
+import { useFindPetsSuspense } from "../../openapi/queries/suspense";
 
 export const SuspenseChild = () => {
-  const { data } = useDefaultServiceFindPetsSuspense({ tags: [], limit: 10 });
-
+  const { data, error } = useFindPetsSuspense({
+    query: { tags: [], limit: 10 },
+  });
+  console.log({ error });
   if (!Array.isArray(data)) {
     return <div>Error!</div>;
   }
 
   return (
     <ul>
-      {data?.map((pet, index) => (
+      {data?.map((pet) => (
         <li key={pet.id}>{pet.name}</li>
       ))}
     </ul>

package.json

@@ -1,10 +1,11 @@
 {
   "name": "@7nohe/openapi-react-query-codegen",
-  "version": "1.4.1",
+  "version": "2.0.0",
   "description": "OpenAPI React Query Codegen",
   "bin": {
     "openapi-rq": "dist/cli.mjs"
   },
+  "private": false,
   "type": "module",
   "workspaces": ["examples/*"],
   "scripts": {
@@ -13,10 +14,17 @@
     "lint:fix": "biome check --apply .",
     "preview": "npm run build && npm -C examples/react-app run generate:api",
     "prepublishOnly": "npm run build",
-    "release": "npx git-ensure -a && npx bumpp --commit --tag --push",
+    "release": "npx bumpp --commit --tag --push",
     "test": "vitest --coverage.enabled true",
     "snapshot": "vitest --update"
   },
+  "exports": [
+    {
+      "import": "./dist/generate.mjs",
+      "require": "./dist/generate.mjs",
+      "types": "./dist/generate.d.mts"
+    }
+  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/7nohe/openapi-react-query-codegen.git"
@@ -37,7 +45,10 @@
   "author": "Daiki Urata (@7nohe)",
   "license": "MIT",
   "dependencies": {
-    "@hey-api/openapi-ts": "0.45.1"
+    "@hey-api/client-fetch": "0.1.10",
+    "@hey-api/openapi-ts": "0.49.0",
+    "@types/cross-spawn": "^6.0.6",
+    "cross-spawn": "^7.0.3"
   },
   "devDependencies": {
     "@biomejs/biome": "^1.7.2",
@@ -47,15 +58,15 @@
     "glob": "^10.3.10",
     "lefthook": "^1.6.10",
     "rimraf": "^5.0.5",
-    "ts-morph": "^22.0.0",
+    "ts-morph": "^23.0.0",
     "ts-node": "^10.9.2",
-    "typescript": "^5.3.3",
+    "typescript": "^5.5.3",
     "vitest": "^1.5.0"
   },
   "peerDependencies": {
     "commander": "12.x",
     "glob": "10.x",
-    "ts-morph": "22.x",
+    "ts-morph": "23.x",
     "typescript": "5.x"
   },
   "engines": {