@7nohe/openapi-react-query-codegen 0.5.3 → 1.0.6

package/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
 
@@ -14,7 +14,7 @@
 $ 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,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            Use union types (default: false)
-  --exportSchemas <value>    Write schemas to disk (default: false)
-  --indent <value>           Indentation options [4, 2, tabs] (default: "4")
-  --postfixServices <value>  Service name postfix (default: "Service")
-  --postfixModels <value>    Modal name postfix
   --request <value>          Path to custom request file
+  --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?
+  --format                   Process output folder with formatter?
   -h, --help                 display help for command
 ```
 
@@ -67,17 +68,18 @@ $ openapi-rq -i ./petstore.yaml
 ```
 - openapi
   - queries
-    - index.ts <- custom react hooks
-  - requests <- output code generated by OpenAPI Typescript Codegen
+    - index.ts <- main file that exports common types, variables, and hooks
+    - common.ts <- common types
+    - queries.ts <- generated query hooks
+    - suspenses.ts <- generated suspense hooks
+  - 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,22 +102,57 @@ 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";
+import { usePetServiceFindPetsByStatusKey } from "../openapi/queries";
 
 function App() {
   // You can still use the auto-generated query key
-  const { data } = useQuery([usePetServiceFindPetsByStatusKey], () => {
-    // Do something here
-    
-    return PetService.findPetsByStatus(['available']);
+  const { data } = useQuery({
+    queryKey: [usePetServiceFindPetsByStatusKey],
+    queryFn: () => {
+      // Do something here
+      return PetService.findPetsByStatus(["available"]);
+    },
   });
 
+  return <div className="App">{/* .... */}</div>;
+}
+
+export default App;
+```
+
+You can also use suspense hooks.
+
+```tsx
+// App.tsx
+import { useDefaultClientFindPetsSuspense } from "../openapi/queries/suspense";
+function ChildComponent() {
+  const { data } = useDefaultClientFindPetsSuspense({ tags: [], limit: 10 });
+
+  return (
+    <ul>
+      {data?.map((pet, index) => (
+        <li key={pet.id}>{pet.name}</li>
+      ))}
+    </ul>
+  );
+}
+
+function ParentComponent() {
+  return (
+    <>
+      <Suspense fallback={<>loading...</>}>
+        <ChildComponent />
+      </Suspense>
+    </>
+  );
+}
+
+function App() {
   return (
     <div className="App">
-      {/* .... */}
+      <h1>Pet List</h1>
+      <ParentComponent />
     </div>
   );
 }
@@ -124,4 +161,5 @@ export default App;
 ```
 
 ## License
+
 MIT

package/dist/cli.mjs

@@ -0,0 +1,35 @@
+#!/usr/bin/env node
+import { generate } from "./generate.mjs";
+import { Command, Option } from "commander";
+import { readFile } from "fs/promises";
+import { dirname, join } from "path";
+import { fileURLToPath } from "node:url";
+const program = new Command();
+async function setupProgram() {
+    const __filename = fileURLToPath(import.meta.url);
+    const __dirname = dirname(__filename);
+    const file = await readFile(join(__dirname, "../package.json"), "utf-8");
+    const packageJson = JSON.parse(file);
+    const version = packageJson.version;
+    program
+        .name("openapi-rq")
+        .version(version)
+        .description("Generate React Query code based on OpenAPI")
+        .requiredOption("-i, --input <value>", "OpenAPI specification, can be a path, url or string content (required)")
+        .option("-o, --output <value>", "Output directory", "openapi")
+        .addOption(new Option("-c, --client <value>", "HTTP client to generate")
+        .choices(["angular", "axios", "fetch", "node", "xhr"])
+        .default("fetch"))
+        .option("--request <value>", "Path to custom request file")
+        .option("--format", "Process output folder with formatter?")
+        .option("--lint", "Process output folder with linter?")
+        .option("--operationId", "Use operation ID to generate operation names?")
+        .addOption(new Option("--serviceResponse <value>", "Define shape of returned value from service calls").choices(["body", "generics", "response"]))
+        .option("--base <value>", "Manually set base in OpenAPI config instead of inferring from server value")
+        .option("--enums", "Generate JavaScript objects from enum definitions?")
+        .option("--useDateType", "Use Date type instead of string for date types for models, this will not convert the data to a Date object")
+        .parse();
+    const options = program.opts();
+    generate(options, version);
+}
+setupProgram();

package/dist/common.mjs

@@ -0,0 +1,64 @@
+import { stat } from "fs/promises";
+import ts from "typescript";
+export const TData = ts.factory.createIdentifier("TData");
+export const TError = ts.factory.createIdentifier("TError");
+export const TContext = ts.factory.createIdentifier("TContext");
+export const queryKeyGenericType = ts.factory.createTypeReferenceNode("TQueryKey");
+export const queryKeyConstraint = ts.factory.createTypeReferenceNode("Array", [
+    ts.factory.createKeywordTypeNode(ts.SyntaxKind.UnknownKeyword),
+]);
+export const capitalizeFirstLetter = (str) => {
+    return str.charAt(0).toUpperCase() + str.slice(1);
+};
+export const lowercaseFirstLetter = (str) => {
+    return str.charAt(0).toLowerCase() + str.slice(1);
+};
+export const getNameFromMethod = (method) => {
+    return method.getName();
+};
+export async function exists(f) {
+    try {
+        await stat(f);
+        return true;
+    }
+    catch {
+        return false;
+    }
+}
+const Common = "Common";
+/**
+ * Build a common type name by prepending the Common namespace.
+ */
+export function BuildCommonTypeName(name) {
+    if (typeof name === "string") {
+        return ts.factory.createIdentifier(`${Common}.${name}`);
+    }
+    return ts.factory.createIdentifier(`${Common}.${name.text}`);
+}
+/**
+ * Safely parse a value into a number. Checks for NaN and Infinity.
+ * Returns NaN if the string is not a valid number.
+ * @param value The value to parse.
+ * @returns The parsed number or NaN if the value is not a valid number.
+ */
+export function safeParseNumber(value) {
+    const parsed = Number(value);
+    if (!isNaN(parsed) && isFinite(parsed)) {
+        return parsed;
+    }
+    return NaN;
+}
+export function extractPropertiesFromObjectParam(param) {
+    const referenced = param.findReferences()[0];
+    const def = referenced.getDefinition();
+    const paramNodes = def
+        .getNode()
+        .getType()
+        .getProperties()
+        .map((prop) => ({
+        name: prop.getName(),
+        optional: prop.isOptional(),
+        type: prop.getValueDeclaration()?.getType(),
+    }));
+    return paramNodes;
+}

package/dist/constants.mjs

@@ -0,0 +1,3 @@
+export const defaultOutputPath = "openapi";
+export const queriesOutputPath = "queries";
+export const requestsOutputPath = "requests";

package/dist/createExports.mjs

@@ -0,0 +1,40 @@
+import { createUseQuery } from "./createUseQuery.mjs";
+import { createUseMutation } from "./createUseMutation.mjs";
+export const createExports = (service) => {
+    const { klasses } = service;
+    const methods = klasses.map((k) => k.methods).flat();
+    const allGet = methods.filter((m) => m.httpMethodName === "'GET'");
+    const allPost = methods.filter((m) => m.httpMethodName === "'POST'");
+    const allQueries = allGet.map((m) => createUseQuery(m));
+    const allMutations = allPost.map((m) => createUseMutation(m));
+    const commonInQueries = allQueries
+        .map(({ apiResponse, returnType, key }) => [apiResponse, returnType, key])
+        .flat();
+    const commonInMutations = allMutations
+        .map(({ mutationResult }) => [mutationResult])
+        .flat();
+    const allCommon = [...commonInQueries, ...commonInMutations];
+    const mainQueries = allQueries.map(({ queryHook }) => [queryHook]).flat();
+    const mainMutations = allMutations
+        .map(({ mutationHook }) => [mutationHook])
+        .flat();
+    const mainExports = [...mainQueries, ...mainMutations];
+    const suspenseQueries = allQueries
+        .map(({ suspenseQueryHook }) => [suspenseQueryHook])
+        .flat();
+    const suspenseExports = [...suspenseQueries];
+    return {
+        /**
+         * Common types and variables between queries (regular and suspense) and mutations
+         */
+        allCommon,
+        /**
+         * Main exports are the hooks that are used in the components
+         */
+        mainExports,
+        /**
+         * Suspense exports are the hooks that are used in the suspense components
+         */
+        suspenseExports,
+    };
+};

package/dist/createImports.mjs

@@ -0,0 +1,47 @@
+import ts from "typescript";
+import { posix } from "path";
+const { join } = posix;
+export const createImports = ({ service, serviceEndName, project, }) => {
+    const { klasses } = service;
+    // get all class names
+    const classNames = klasses.map(({ className }) => className);
+    // remove duplicates
+    const uniqueClassNames = [...new Set(classNames)];
+    const modelsFile = project
+        .getSourceFiles()
+        .find((sourceFile) => sourceFile.getFilePath().includes("models.ts"));
+    const serviceFile = project
+        .getSourceFiles()
+        .find((sourceFile) => sourceFile.getFilePath().includes("services.ts"));
+    if (!modelsFile) {
+        throw new Error("No models file found");
+    }
+    if (!serviceFile) {
+        throw new Error("No service file found");
+    }
+    const modalNames = Array.from(modelsFile.getExportedDeclarations().keys());
+    const serviceExports = Array.from(serviceFile.getExportedDeclarations().keys());
+    const serviceNames = serviceExports.filter((name) => name.endsWith(serviceEndName));
+    const serviceNamesData = serviceExports.filter((name) => name.endsWith("Data"));
+    return [
+        ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+            ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier("useQuery")),
+            ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier("useSuspenseQuery")),
+            ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier("useMutation")),
+            ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier("UseQueryResult")),
+            ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier("UseQueryOptions")),
+            ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier("UseMutationOptions")),
+            ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier("UseMutationResult")),
+        ])), ts.factory.createStringLiteral("@tanstack/react-query"), undefined),
+        ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+            // import all class names from service file
+            ...serviceNames.map((serviceName) => ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(serviceName))),
+            // import all data objects from service file
+            ...serviceNamesData.map((dataName) => ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(dataName))),
+        ])), ts.factory.createStringLiteral(join("../requests")), undefined),
+        // import all the models by name
+        ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, undefined, ts.factory.createNamedImports([
+            ...modalNames.map((modelName) => ts.factory.createImportSpecifier(false, undefined, ts.factory.createIdentifier(modelName))),
+        ])), ts.factory.createStringLiteral(join("../requests/models")), undefined),
+    ];
+};

package/dist/createSource.mjs

@@ -0,0 +1,74 @@
+import ts from "typescript";
+import { createImports } from "./createImports.mjs";
+import { createExports } from "./createExports.mjs";
+import { getServices } from "./service.mjs";
+import { Project } from "ts-morph";
+import { join } from "path";
+const createSourceFile = async (outputPath, serviceEndName) => {
+    const project = new Project({
+        // Optionally specify compiler options, tsconfig.json, in-memory file system, and more here.
+        // If you initialize with a tsconfig.json, then it will automatically populate the project
+        // with the associated source files.
+        // Read more: https://ts-morph.com/setup/
+        skipAddingFilesFromTsConfig: true,
+    });
+    const sourceFiles = join(process.cwd(), outputPath);
+    project.addSourceFilesAtPaths(`${sourceFiles}/**/*`);
+    const service = await getServices(project);
+    const imports = createImports({
+        service,
+        serviceEndName,
+        project,
+    });
+    const exports = createExports(service);
+    const commonSource = ts.factory.createSourceFile([...imports, ...exports.allCommon], ts.factory.createToken(ts.SyntaxKind.EndOfFileToken), ts.NodeFlags.None);
+    const commonImport = ts.factory.createImportDeclaration(undefined, ts.factory.createImportClause(false, ts.factory.createIdentifier("* as Common"), undefined), ts.factory.createStringLiteral("./common"), undefined);
+    const commonExport = ts.factory.createExportDeclaration(undefined, false, undefined, ts.factory.createStringLiteral("./common"), undefined);
+    const queriesExport = ts.factory.createExportDeclaration(undefined, false, undefined, ts.factory.createStringLiteral("./queries"), undefined);
+    const mainSource = ts.factory.createSourceFile([commonImport, ...imports, ...exports.mainExports], ts.factory.createToken(ts.SyntaxKind.EndOfFileToken), ts.NodeFlags.None);
+    const suspenseSource = ts.factory.createSourceFile([commonImport, ...imports, ...exports.suspenseExports], ts.factory.createToken(ts.SyntaxKind.EndOfFileToken), ts.NodeFlags.None);
+    const indexSource = ts.factory.createSourceFile([commonExport, queriesExport], ts.factory.createToken(ts.SyntaxKind.EndOfFileToken), ts.NodeFlags.None);
+    return {
+        commonSource,
+        mainSource,
+        suspenseSource,
+        indexSource,
+    };
+};
+export const createSource = async ({ outputPath, version, serviceEndName, }) => {
+    const queriesFile = ts.createSourceFile("queries.ts", "", ts.ScriptTarget.Latest, false, ts.ScriptKind.TS);
+    const commonFile = ts.createSourceFile("common.ts", "", ts.ScriptTarget.Latest, false, ts.ScriptKind.TS);
+    const suspenseFile = ts.createSourceFile("suspense.ts", "", ts.ScriptTarget.Latest, false, ts.ScriptKind.TS);
+    const indexFile = ts.createSourceFile("index.ts", "", ts.ScriptTarget.Latest, false, ts.ScriptKind.TS);
+    const printer = ts.createPrinter({
+        newLine: ts.NewLineKind.LineFeed,
+        removeComments: false,
+    });
+    const { commonSource, mainSource, suspenseSource, indexSource } = await createSourceFile(outputPath, serviceEndName);
+    const commonResult = `// generated with @7nohe/openapi-react-query-codegen@${version} \n` +
+        printer.printNode(ts.EmitHint.Unspecified, commonSource, commonFile);
+    const mainResult = `// generated with @7nohe/openapi-react-query-codegen@${version} \n` +
+        printer.printNode(ts.EmitHint.Unspecified, mainSource, queriesFile);
+    const suspenseResult = `// generated with @7nohe/openapi-react-query-codegen@${version} \n` +
+        printer.printNode(ts.EmitHint.Unspecified, suspenseSource, suspenseFile);
+    const indexResult = `// generated with @7nohe/openapi-react-query-codegen@${version} \n` +
+        printer.printNode(ts.EmitHint.Unspecified, indexSource, indexFile);
+    return [
+        {
+            name: "index.ts",
+            content: indexResult,
+        },
+        {
+            name: "common.ts",
+            content: commonResult,
+        },
+        {
+            name: "queries.ts",
+            content: mainResult,
+        },
+        {
+            name: "suspense.ts",
+            content: suspenseResult,
+        },
+    ];
+};

package/dist/createUseMutation.mjs

@@ -0,0 +1,98 @@
+import ts from "typescript";
+import { BuildCommonTypeName, TContext, TData, TError, capitalizeFirstLetter, extractPropertiesFromObjectParam, getNameFromMethod, } from "./common.mjs";
+import { addJSDocToNode } from "./util.mjs";
+/**
+ *  Awaited<ReturnType<typeof myClass.myMethod>>
+ */
+function generateAwaitedReturnType({ className, methodName, }) {
+    return ts.factory.createTypeReferenceNode(ts.factory.createIdentifier("Awaited"), [
+        ts.factory.createTypeReferenceNode(ts.factory.createIdentifier("ReturnType"), [
+            ts.factory.createTypeQueryNode(ts.factory.createQualifiedName(ts.factory.createIdentifier(className), ts.factory.createIdentifier(methodName)), undefined),
+        ]),
+    ]);
+}
+export const createUseMutation = ({ node, className, method, jsDoc = [], isDeprecated = false, }) => {
+    const methodName = getNameFromMethod(method);
+    const awaitedResponseDataType = generateAwaitedReturnType({
+        className,
+        methodName,
+    });
+    const mutationResult = ts.factory.createTypeAliasDeclaration([ts.factory.createModifier(ts.SyntaxKind.ExportKeyword)], ts.factory.createIdentifier(`${className}${capitalizeFirstLetter(methodName)}MutationResult`), undefined, awaitedResponseDataType);
+    const responseDataType = ts.factory.createTypeParameterDeclaration(undefined, TData, undefined, ts.factory.createTypeReferenceNode(BuildCommonTypeName(mutationResult.name)));
+    const methodParameters = method.getParameters().length !== 0
+        ? ts.factory.createTypeLiteralNode(method
+            .getParameters()
+            .map((param) => {
+            const paramNodes = extractPropertiesFromObjectParam(param);
+            return paramNodes.map((refParam) => ts.factory.createPropertySignature(undefined, ts.factory.createIdentifier(refParam.name), refParam.optional
+                ? ts.factory.createToken(ts.SyntaxKind.QuestionToken)
+                : undefined, 
+            // refParam.questionToken ?? refParam.initializer
+            //   ? ts.factory.createToken(ts.SyntaxKind.QuestionToken)
+            //   : refParam.questionToken,
+            ts.factory.createTypeReferenceNode(refParam.type.getText(param))));
+        })
+            .flat()
+        // return ts.factory.createPropertySignature(
+        //   undefined,
+        //   ts.factory.createIdentifier(param.getName()),
+        //   param.compilerNode.questionToken ?? param.compilerNode.initializer
+        //     ? ts.factory.createToken(ts.SyntaxKind.QuestionToken)
+        //     : param.compilerNode.questionToken,
+        //   param.compilerNode.type
+        // );
+        )
+        : ts.factory.createKeywordTypeNode(ts.SyntaxKind.VoidKeyword);
+    const exportHook = ts.factory.createVariableStatement([ts.factory.createModifier(ts.SyntaxKind.ExportKeyword)], ts.factory.createVariableDeclarationList([
+        ts.factory.createVariableDeclaration(ts.factory.createIdentifier(`use${className}${capitalizeFirstLetter(methodName)}`), undefined, undefined, ts.factory.createArrowFunction(undefined, ts.factory.createNodeArray([
+            responseDataType,
+            ts.factory.createTypeParameterDeclaration(undefined, TError, undefined, ts.factory.createKeywordTypeNode(ts.SyntaxKind.UnknownKeyword)),
+            ts.factory.createTypeParameterDeclaration(undefined, TContext, undefined, ts.factory.createKeywordTypeNode(ts.SyntaxKind.UnknownKeyword)),
+        ]), [
+            ts.factory.createParameterDeclaration(undefined, undefined, ts.factory.createIdentifier("options"), ts.factory.createToken(ts.SyntaxKind.QuestionToken), ts.factory.createTypeReferenceNode(ts.factory.createIdentifier("Omit"), [
+                ts.factory.createTypeReferenceNode(ts.factory.createIdentifier("UseMutationOptions"), [
+                    ts.factory.createTypeReferenceNode(TData),
+                    ts.factory.createTypeReferenceNode(TError),
+                    methodParameters,
+                    ts.factory.createTypeReferenceNode(TContext),
+                ]),
+                ts.factory.createLiteralTypeNode(ts.factory.createStringLiteral("mutationFn")),
+            ]), undefined),
+        ], undefined, ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), ts.factory.createCallExpression(ts.factory.createIdentifier("useMutation"), [
+            ts.factory.createTypeReferenceNode(TData),
+            ts.factory.createTypeReferenceNode(TError),
+            methodParameters,
+            ts.factory.createTypeReferenceNode(TContext),
+        ], [
+            ts.factory.createObjectLiteralExpression([
+                ts.factory.createPropertyAssignment(ts.factory.createIdentifier("mutationFn"), ts.factory.createArrowFunction(undefined, undefined, method.getParameters().length !== 0
+                    ? [
+                        ts.factory.createParameterDeclaration(undefined, undefined, ts.factory.createObjectBindingPattern(method
+                            .getParameters()
+                            .map((param) => {
+                            const paramNodes = extractPropertiesFromObjectParam(param);
+                            return paramNodes.map((refParam) => ts.factory.createBindingElement(undefined, undefined, ts.factory.createIdentifier(refParam.name), undefined));
+                        })
+                            .flat()), undefined, undefined, undefined),
+                    ]
+                    : [], undefined, ts.factory.createToken(ts.SyntaxKind.EqualsGreaterThanToken), ts.factory.createAsExpression(ts.factory.createAsExpression(ts.factory.createCallExpression(ts.factory.createPropertyAccessExpression(ts.factory.createIdentifier(className), ts.factory.createIdentifier(methodName)), undefined, method.getParameters().length !== 0
+                    ? [
+                        ts.factory.createObjectLiteralExpression(method
+                            .getParameters()
+                            .map((params) => {
+                            const paramNodes = extractPropertiesFromObjectParam(params);
+                            return paramNodes.map((refParam) => ts.factory.createShorthandPropertyAssignment(refParam.name));
+                        })
+                            .flat()),
+                    ]
+                    : []), ts.factory.createKeywordTypeNode(ts.SyntaxKind.UnknownKeyword)), ts.factory.createTypeReferenceNode(ts.factory.createIdentifier("Promise"), [ts.factory.createTypeReferenceNode(TData)])))),
+                ts.factory.createSpreadAssignment(ts.factory.createIdentifier("options")),
+            ]),
+        ]))),
+    ], ts.NodeFlags.Const));
+    const hookWithJsDoc = addJSDocToNode(exportHook, node, isDeprecated, jsDoc);
+    return {
+        mutationResult,
+        mutationHook: hookWithJsDoc,
+    };
+};