@7nohe/openapi-react-query-codegen 1.6.1 → 2.0.0-beta.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Daiki Urata
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,372 +1,12 @@
 # OpenAPI React Query Codegen
 
-> Node.js library that generates [React Query (also called TanStack Query)](https://tanstack.com/query) hooks based on an OpenAPI specification file.
+> Code generator for creating [React Query (also known as TanStack Query)](https://tanstack.com/query) hooks based on your OpenAPI schema.
 
 [![npm version](https://badge.fury.io/js/%407nohe%2Fopenapi-react-query-codegen.svg)](https://badge.fury.io/js/%407nohe%2Fopenapi-react-query-codegen)
 
 ## Features
 
 - Generates custom react hooks that use React Query's `useQuery`, `useSuspenseQuery`, `useMutation` and `useInfiniteQuery` hooks
+- Generates custom functions that use React Query's `ensureQueryData` and `prefetchQuery` functions
 - Generates query keys and functions for query caching
 - Generates pure TypeScript clients generated by [@hey-api/openapi-ts](https://github.com/hey-api/openapi-ts)
-
-## Installation
-
-```
-$ npm install -D @7nohe/openapi-react-query-codegen
-```
-
-Register the command to the `scripts` property in your package.json file.
-
-```json
-{
-  "scripts": {
-    "codegen": "openapi-rq -i ./petstore.yaml -c axios"
-  }
-}
-```
-
-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
-```
-
-## Usage
-
-```
-$ openapi-rq --help
-
-Usage: openapi-rq [options]
-
-Generate React Query code based on OpenAPI
-
-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 (choices: "angular", "axios", "fetch", "node", "xhr", default: "fetch")
-  --request <value>           Path to custom request file
-  --format <value>            Process output folder with formatter? (choices: "biome", "prettier")
-  --lint <value>              Process output folder with linter? (choices: "biome", "eslint")
-  --operationId               Use operation ID to generate operation names?
-  --serviceResponse <value>   Define shape of returned value from service calls (choices: "body", "response", default: "body")
-  --base <value>              Manually set base in OpenAPI config instead of inferring from server value
-  --enums <value>             Generate JavaScript objects from enum definitions? ['javascript', 'typescript', 'typescript+namespace']
-  --enums <value>             Generate JavaScript objects from enum definitions? (choices: "javascript", "typescript")
-  --useDateType               Use Date type instead of string for date types for models, this will not convert the data to a Date object
-  --debug                     Run in debug mode?
-  --noSchemas                 Disable generating JSON schemas
-  --schemaType <value>        Type of JSON schema [Default: 'json'] (choices: "form", "json")
-  --pageParam <value>         Name of the query parameter used for pagination (default: "page")
-  --nextPageParam <value>     Name of the response parameter used for next page (default: "nextPage")
-  --initialPageParam <value>  Initial value for the pagination parameter (default: "1")
-  -h, --help                 display help for command
-```
-
-### Example Usage
-
-#### Command
-
-```
-$ openapi-rq -i ./petstore.yaml
-```
-
-#### Output directory structure
-
-```
-- openapi
-  - queries
-    - index.ts <- main file that exports common types, variables, and queries. Does not export suspense or prefetch hooks
-    - common.ts <- common types
-    - queries.ts <- generated query hooks
-    - suspenses.ts <- generated suspense hooks
-    - prefetch.ts <- generated prefetch hooks learn more about prefetching in in link below
-  - requests <- output code generated by @hey-api/openapi-ts
-```
-
-- [Prefetching docs](https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr#prefetching-and-dehydrating-data)
-
-#### In your app
-
-##### Using the generated hooks
-
-```tsx
-// App.tsx
-import { usePetServiceFindPetsByStatus } from "../openapi/queries";
-function App() {
-  const { data } = usePetServiceFindPetsByStatus({ status: ["available"] });
-
-  return (
-    <div className="App">
-      <h1>Pet List</h1>
-      <ul>{data?.map((pet) => <li key={pet.id}>{pet.name}</li>)}</ul>
-    </div>
-  );
-}
-
-export default App;
-```
-
-##### Using the generated typescript client
-
-```tsx
-import { useQuery } from "@tanstack/react-query";
-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({
-    queryKey: [usePetServiceFindPetsByStatusKey],
-    queryFn: () => {
-      // Do something here
-      return PetService.findPetsByStatus(["available"]);
-    },
-  });
-
-  return <div className="App">{/* .... */}</div>;
-}
-
-export default App;
-```
-
-##### Using 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>
-  );
-}
-
-export default App;
-```
-
-##### Using Mutation hooks
-
-```tsx
-// App.tsx
-import { usePetServiceAddPet } from "../openapi/queries";
-
-function App() {
-  const { mutate } = usePetServiceAddPet();
-
-  const handleAddPet = () => {
-    mutate({ name: "Fluffy", status: "available" });
-  };
-
-  return (
-    <div className="App">
-      <h1>Add Pet</h1>
-      <button onClick={handleAddPet}>Add Pet</button>
-    </div>
-  );
-}
-
-export default App;
-```
-
-##### Invalidating queries after mutation
-
-Invalidating queries after a mutation is important to ensure the cache is updated with the new data. This is done by calling the `queryClient.invalidateQueries` function with the query key used by the query hook.
-
-Learn more about invalidating queries [here](https://tanstack.com/query/latest/docs/framework/react/guides/query-invalidation).
-
-To ensure the query key is created the same way as the query hook, you can use the query key function exported by the generated query hooks.
-
-```tsx
-import {
-  usePetServiceFindPetsByStatus,
-  usePetServiceAddPet,
-  UsePetServiceFindPetsByStatusKeyFn,
-} from "../openapi/queries";
-
-// App.tsx
-function App() {
-  const [status, setStatus] = React.useState(["available"]);
-  const { data } = usePetServiceFindPetsByStatus({ status });
-  const { mutate } = usePetServiceAddPet({
-    onSuccess: () => {
-      queryClient.invalidateQueries({
-        // Call the query key function to get the query key
-        // This is important to ensure the query key is created the same way as the query hook
-        // This insures the cache is invalidated correctly and is typed correctly
-        queryKey: [UsePetServiceFindPetsByStatusKeyFn({
-          status
-        })],
-      });
-    },
-  });
-
-  return (
-    <div className="App">
-      <h1>Pet List</h1>
-      <ul>{data?.map((pet) => <li key={pet.id}>{pet.name}</li>)}</ul>
-      <button
-        onClick={() => {
-          mutate({ name: "Fluffy", status: "available" });
-        }}
-      >
-        Add Pet
-      </button>
-    </div>
-  );
-}
-
-export default App;
-```
-
-##### Using Infinite Query hooks
-
-This feature will generate a function in infiniteQueries.ts when the name specified by the `pageParam` option exists in the query parameters and the name specified by the `nextPageParam` option exists in the response.
-
-The `initialPageParam` option can be specified to set the intial page to load, defaults to 1. The `nextPageParam` supports dot notation for nested values (i.e. `meta.next`).
-
-Example Schema:
-
-```yml
-paths:
-  /paginated-pets:
-    get:
-      description: |
-        Returns paginated pets from the system that the user has access to
-      operationId: findPaginatedPets
-      parameters:
-        - name: page
-          in: query
-          description: page number
-          required: false
-          schema:
-            type: integer
-            format: int32
-        - name: tags
-          in: query
-          description: tags to filter by
-          required: false
-          style: form
-          schema:
-            type: array
-            items:
-              type: string
-        - name: limit
-          in: query
-          description: maximum number of results to return
-          required: false
-          schema:
-            type: integer
-            format: int32
-      responses:
-        '200':
-          description: pet response
-          content:
-            application/json:
-              schema:
-                type: object
-                properties:
-                  pets:
-                    type: array
-                    items:
-                      $ref: '#/components/schemas/Pet'
-                  nextPage: 
-                    type: integer
-                    format: int32
-                    minimum: 1
-```
-
-Usage of Generated Hooks:
-
-```ts
-import { useDefaultServiceFindPaginatedPetsInfinite } from "@/openapi/queries/infiniteQueries";
-
-const { data, fetchNextPage } = useDefaultServiceFindPaginatedPetsInfinite({
-  limit: 10,
-  tags: [],
-});
-```
-
-##### Runtime Configuration
-
-You can modify the default values used by the generated service calls by modifying the OpenAPI configuration singleton object.
-
-It's default location is `openapi/requests/core/OpenAPI.ts` and it is also exported from `openapi/index.ts`
-
-Import the constant into your runtime and modify it before setting up the react app.
-
-```typescript
-/** main.tsx */
-import { OpenAPI as OpenAPIConfig } from './openapi/requests/core/OpenAPI';
-...
-OpenAPIConfig.BASE = 'www.domain.com/api';
-OpenAPIConfig.HEADERS = {
-  'x-header-1': 'value-1',
-  'x-header-2': 'value-2',
-};
-...
-ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <App />
-    </QueryClientProvider>
-  </React.StrictMode>
-);
-
-```
-
-## Development
-
-### Install dependencies
-
-```bash
-pnpm install
-```
-
-### Run tests
-```bash
-pnpm test
-```
-
-### Run linter
-```bash
-pnpm lint
-```
-
-### Run linter and fix
-```bash
-pnpm lint:fix
-```
-
-### Update snapshots
-```bash
-pnpm snapshot
-```
-
-### Build example and validate generated code
-```bash
-npm run build && pnpm --filter @7nohe/react-app generate:api && pnpm --filter @7nohe/react-app test:generated 
-```
-
-## License
-
-MIT

package/dist/cli.mjs

@@ -19,24 +19,19 @@ async function setupProgram() {
         .requiredOption("-i, --input <value>", "OpenAPI specification, can be a path, url or string content (required)")
         .option("-o, --output <value>", "Output directory", defaultOutputPath)
         .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")
+        .choices(["@hey-api/client-fetch", "@hey-api/client-axios"])
+        .default("@hey-api/client-fetch"))
         .addOption(new Option("--format <value>", "Process output folder with formatter?").choices(["biome", "prettier"]))
         .addOption(new Option("--lint <value>", "Process output folder with linter?").choices(["biome", "eslint"]))
         .option("--operationId", "Use operation ID to generate operation names?")
-        .addOption(new Option("--serviceResponse <value>", "Define shape of returned value from service calls")
-        .choices(["body", "response"])
-        .default("body"))
-        .option("--base <value>", "Manually set base in OpenAPI config instead of inferring from server value")
-        .addOption(new Option("--enums <value>", "Generate JavaScript objects from enum definitions?").choices(["javascript", "typescript", "typescript+namespace"]))
+        .addOption(new Option("--enums <value>", "Generate JavaScript objects from enum definitions?").choices(["javascript", "typescript"]))
         .option("--useDateType", "Use Date type instead of string for date types for models, this will not convert the data to a Date object")
         .option("--debug", "Run in debug mode?")
         .option("--noSchemas", "Disable generating JSON schemas")
         .addOption(new Option("--schemaType <value>", "Type of JSON schema [Default: 'json']").choices(["form", "json"]))
         .option("--pageParam <value>", "Name of the query parameter used for pagination", "page")
         .option("--nextPageParam <value>", "Name of the response parameter used for next page", "nextPage")
-        .option("--initialPageParam <value>", "Initial page value to query", "initialPageParam")
+        .option("--initialPageParam <value>", "Initial page value to query", "1")
         .parse();
     const options = program.opts();
     await generate(options, version);

package/dist/common.mjs

@@ -1,5 +1,6 @@
 import { stat } from "node:fs/promises";
 import path from "node:path";
+import { ArrowFunction } from "ts-morph";
 import ts from "typescript";
 import { queriesOutputPath, requestsOutputPath } from "./constants.mjs";
 export const TData = ts.factory.createIdentifier("TData");
@@ -17,12 +18,22 @@ export const capitalizeFirstLetter = (str) => {
 export const lowercaseFirstLetter = (str) => {
     return str.charAt(0).toLowerCase() + str.slice(1);
 };
-export const getNameFromMethod = (method) => {
-    const methodName = method.getName();
-    if (!methodName) {
-        throw new Error("Method name not found");
+export const getVariableArrowFunctionParameters = (variable) => {
+    const initializer = variable.getInitializer();
+    if (!initializer) {
+        throw new Error("Initializer not found");
     }
-    return methodName;
+    if (!ArrowFunction.isArrowFunction(initializer)) {
+        throw new Error("Initializer is not an arrow function");
+    }
+    return initializer.getParameters();
+};
+export const getNameFromVariable = (variable) => {
+    const variableName = variable.getName();
+    if (!variableName) {
+        throw new Error("Variable name not found");
+    }
+    return variableName;
 };
 export async function exists(f) {
     try {
@@ -63,11 +74,14 @@ export function extractPropertiesFromObjectParam(param) {
         .getNode()
         .getType()
         .getProperties()
-        .map((prop) => ({
-        name: prop.getName(),
-        optional: prop.isOptional(),
-        type: prop.getValueDeclaration()?.getType(),
-    }));
+        .filter((prop) => prop.getValueDeclaration()?.getType())
+        .map((prop) => {
+        return {
+            name: prop.getName(),
+            optional: prop.isOptional(),
+            type: prop.getValueDeclaration()?.getType(),
+        };
+    });
     return paramNodes;
 }
 /**
@@ -135,3 +149,72 @@ export function buildRequestsOutputPath(outputPath) {
 export function buildQueriesOutputPath(outputPath) {
     return path.join(outputPath, queriesOutputPath);
 }
+export function getQueryKeyFnName(queryKey) {
+    return `${capitalizeFirstLetter(queryKey)}Fn`;
+}
+/**
+ * Create QueryKey/MutationKey exports
+ */
+export function createQueryKeyExport({ methodName, queryKey, }) {
+    return ts.factory.createVariableStatement([ts.factory.createModifier(ts.SyntaxKind.ExportKeyword)], ts.factory.createVariableDeclarationList([
+        ts.factory.createVariableDeclaration(ts.factory.createIdentifier(queryKey), undefined, undefined, ts.factory.createStringLiteral(`${capitalizeFirstLetter(methodName)}`)),
+    ], ts.NodeFlags.Const));
+}
+export function createQueryKeyFnExport(queryKey, method, type = "query") {
+    // Mutation keys don't require clientOptions
+    const params = type === "query" ? getRequestParamFromMethod(method) : null;
+    // override key is used to allow the user to override the the queryKey values
+    const overrideKey = ts.factory.createParameterDeclaration(undefined, undefined, ts.factory.createIdentifier(type === "query" ? "queryKey" : "mutationKey"), QuestionToken, ts.factory.createTypeReferenceNode("Array<unknown>", []));
+    return ts.factory.createVariableStatement([ts.factory.createModifier(ts.SyntaxKind.ExportKeyword)], ts.factory.createVariableDeclarationList([
+        ts.factory.createVariableDeclaration(ts.factory.createIdentifier(getQueryKeyFnName(queryKey)), undefined, undefined, ts.factory.createArrowFunction(undefined, undefined, params ? [params, overrideKey] : [overrideKey], undefined, EqualsOrGreaterThanToken, type === "query"
+            ? queryKeyFn(queryKey, method)
+            : mutationKeyFn(queryKey))),
+    ], ts.NodeFlags.Const));
+}
+function queryKeyFn(queryKey, method) {
+    return ts.factory.createArrayLiteralExpression([
+        ts.factory.createIdentifier(queryKey),
+        ts.factory.createSpreadElement(ts.factory.createParenthesizedExpression(ts.factory.createBinaryExpression(ts.factory.createIdentifier("queryKey"), ts.factory.createToken(ts.SyntaxKind.QuestionQuestionToken), getVariableArrowFunctionParameters(method)
+            ? // [...clientOptions]
+                ts.factory.createArrayLiteralExpression([
+                    ts.factory.createIdentifier("clientOptions"),
+                ])
+            : // []
+                ts.factory.createArrayLiteralExpression()))),
+    ], false);
+}
+function mutationKeyFn(mutationKey) {
+    return ts.factory.createArrayLiteralExpression([
+        ts.factory.createIdentifier(mutationKey),
+        ts.factory.createSpreadElement(ts.factory.createParenthesizedExpression(ts.factory.createBinaryExpression(ts.factory.createIdentifier("mutationKey"), ts.factory.createToken(ts.SyntaxKind.QuestionQuestionToken), ts.factory.createArrayLiteralExpression()))),
+    ], false);
+}
+export function getRequestParamFromMethod(method, pageParam, modelNames = []) {
+    if (!getVariableArrowFunctionParameters(method).length) {
+        return null;
+    }
+    const methodName = getNameFromVariable(method);
+    const params = getVariableArrowFunctionParameters(method).flatMap((param) => {
+        const paramNodes = extractPropertiesFromObjectParam(param);
+        return paramNodes
+            .filter((p) => p.name !== pageParam)
+            .map((refParam) => ({
+            name: refParam.name,
+            // TODO: Client<Request, Response, unknown, RequestOptions> -> Client<Request, Response, unknown>
+            typeName: getShortType(refParam.type?.getText() ?? ""),
+            optional: refParam.optional,
+        }));
+    });
+    const areAllPropertiesOptional = params.every((param) => param.optional);
+    return ts.factory.createParameterDeclaration(undefined, undefined, ts.factory.createIdentifier("clientOptions"), undefined, ts.factory.createTypeReferenceNode(ts.factory.createIdentifier("Options"), [
+        ts.factory.createTypeReferenceNode(modelNames.includes(`${capitalizeFirstLetter(methodName)}Data`)
+            ? `${capitalizeFirstLetter(methodName)}Data`
+            : "unknown"),
+        ts.factory.createTypeReferenceNode(ts.factory.createIdentifier("true")),
+    ]), 
+    // if all params are optional, we create an empty object literal
+    // so the hook can be called without any parameters
+    areAllPropertiesOptional
+        ? ts.factory.createObjectLiteralExpression()
+        : undefined);
+}

package/dist/constants.mjs

@@ -2,7 +2,7 @@ export const defaultOutputPath = "openapi";
 export const queriesOutputPath = "queries";
 export const requestsOutputPath = "requests";
 export const serviceFileName = "services.gen";
-export const modalsFileName = "types.gen";
+export const modelsFileName = "types.gen";
 export const OpenApiRqFiles = {
     queries: "queries",
     infiniteQueries: "infiniteQueries",
@@ -10,4 +10,5 @@ export const OpenApiRqFiles = {
     suspense: "suspense",
     index: "index",
     prefetch: "prefetch",
+    ensureQueryData: "ensureQueryData",
 };

package/dist/createExports.mjs

@@ -1,20 +1,61 @@
-import { createPrefetch } from "./createPrefetch.mjs";
+import ts from "typescript";
+import { capitalizeFirstLetter } from "./common.mjs";
+import { modelsFileName } from "./constants.mjs";
+import { createPrefetchOrEnsure } from "./createPrefetchOrEnsure.mjs";
 import { createUseMutation } from "./createUseMutation.mjs";
 import { createUseQuery } from "./createUseQuery.mjs";
-export const createExports = (service, pageParam, nextPageParam, initialPageParam) => {
-    const { klasses } = service;
-    const methods = klasses.flatMap((k) => k.methods);
+export const createExports = ({ service, client, project, pageParam, nextPageParam, initialPageParam, }) => {
+    const { methods } = service;
+    const methodDataNames = methods.reduce((acc, data) => {
+        const methodName = data.method.getName();
+        acc[`${capitalizeFirstLetter(methodName)}Data`] = methodName;
+        return acc;
+    }, {});
+    const modelsFile = project
+        .getSourceFiles?.()
+        .find((sourceFile) => sourceFile.getFilePath().includes(modelsFileName));
+    const modelDeclarations = modelsFile?.getExportedDeclarations();
+    const entries = modelDeclarations?.entries();
+    const modelNames = [];
+    const paginatableMethods = [];
+    for (const [key, value] of entries ?? []) {
+        modelNames.push(key);
+        const node = value[0].compilerNode;
+        if (ts.isTypeAliasDeclaration(node) && methodDataNames[key] !== undefined) {
+            // get the type alias declaration
+            const typeAliasDeclaration = node.type;
+            if (typeAliasDeclaration.kind === ts.SyntaxKind.TypeLiteral) {
+                const query = typeAliasDeclaration.members.find((m) => m.kind === ts.SyntaxKind.PropertySignature &&
+                    m.name?.getText() === "query");
+                if (query &&
+                    query.type.members
+                        .map((m) => m.name?.getText())
+                        .includes(pageParam)) {
+                    paginatableMethods.push(methodDataNames[key]);
+                }
+            }
+        }
+    }
     const allGet = methods.filter((m) => m.httpMethodName.toUpperCase().includes("GET"));
     const allPost = methods.filter((m) => m.httpMethodName.toUpperCase().includes("POST"));
     const allPut = methods.filter((m) => m.httpMethodName.toUpperCase().includes("PUT"));
     const allPatch = methods.filter((m) => m.httpMethodName.toUpperCase().includes("PATCH"));
     const allDelete = methods.filter((m) => m.httpMethodName.toUpperCase().includes("DELETE"));
-    const allGetQueries = allGet.map((m) => createUseQuery(m, pageParam, nextPageParam, initialPageParam));
-    const allPrefetchQueries = allGet.map((m) => createPrefetch(m));
-    const allPostMutations = allPost.map((m) => createUseMutation(m));
-    const allPutMutations = allPut.map((m) => createUseMutation(m));
-    const allPatchMutations = allPatch.map((m) => createUseMutation(m));
-    const allDeleteMutations = allDelete.map((m) => createUseMutation(m));
+    const allGetQueries = allGet.map((m) => createUseQuery({
+        functionDescription: m,
+        client,
+        pageParam,
+        nextPageParam,
+        initialPageParam,
+        paginatableMethods,
+        modelNames,
+    }));
+    const allPrefetchQueries = allGet.map((m) => createPrefetchOrEnsure({ ...m, functionType: "prefetch", modelNames }));
+    const allEnsureQueries = allGet.map((m) => createPrefetchOrEnsure({ ...m, functionType: "ensure", modelNames }));
+    const allPostMutations = allPost.map((m) => createUseMutation({ functionDescription: m, modelNames, client }));
+    const allPutMutations = allPut.map((m) => createUseMutation({ functionDescription: m, modelNames, client }));
+    const allPatchMutations = allPatch.map((m) => createUseMutation({ functionDescription: m, modelNames, client }));
+    const allDeleteMutations = allDelete.map((m) => createUseMutation({ functionDescription: m, modelNames, client }));
     const allQueries = [...allGetQueries];
     const allMutations = [
         ...allPostMutations,
@@ -28,8 +69,10 @@ export const createExports = (service, pageParam, nextPageParam, initialPagePara
         key,
         queryKeyFn,
     ]);
-    const commonInMutations = allMutations.flatMap(({ mutationResult }) => [
+    const commonInMutations = allMutations.flatMap(({ mutationResult, key, mutationKeyFn }) => [
         mutationResult,
+        key,
+        mutationKeyFn,
     ]);
     const allCommon = [...commonInQueries, ...commonInMutations];
     const mainQueries = allQueries.flatMap(({ queryHook }) => [queryHook]);
@@ -44,9 +87,8 @@ export const createExports = (service, pageParam, nextPageParam, initialPagePara
         suspenseQueryHook,
     ]);
     const suspenseExports = [...suspenseQueries];
-    const allPrefetches = allPrefetchQueries.flatMap(({ prefetchHook }) => [
-        prefetchHook,
-    ]);
+    const allPrefetches = allPrefetchQueries.flatMap(({ hook }) => [hook]);
+    const allEnsures = allEnsureQueries.flatMap(({ hook }) => [hook]);
     const allPrefetchExports = [...allPrefetches];
     return {
         /**
@@ -69,5 +111,9 @@ export const createExports = (service, pageParam, nextPageParam, initialPagePara
          * Prefetch exports are the hooks that are used in the prefetch components
          */
         allPrefetchExports,
+        /**
+         * Ensure exports are the hooks that are used in the loader components
+         */
+        allEnsures,
     };
 };