chore: example for react-query templates (#842)

* chore: example for react-query templates

* fix: bundle require

* chore: update docs

.changeset/seven-geese-admire.md

@@ -0,0 +1,5 @@
+---
+"@kubb/cli": patch
+---
+
+correct import with bundle-require

docs/package.json

@@ -21,11 +21,11 @@
   "dependencies": {
     "@vercel/analytics": "^1.2.2",
     "sitemap": "^7.1.1",
-    "vitepress": "^1.0.0-rc.44",
+    "vitepress": "^1.0.0-rc.45",
     "vue": "^3.4.21"
   },
   "devDependencies": {
-    "@types/node": "^20.11.24"
+    "@types/node": "^20.11.25"
   },
   "packageManager": "[email protected]",
   "engines": {

docs/plugins/swagger-client/index.md

@@ -712,7 +712,7 @@ export default defineConfig({
 })
 ```
 
-<<< @/../examples/client/templates/CustomClientTemplate.tsx
+<<< @/../examples/client/templates/client/index.tsx
 
 :::
 

e2e/package.json

@@ -32,10 +32,10 @@
     "@kubb/swagger-ts": "workspace:*",
     "@kubb/swagger-zod": "workspace:*",
     "@kubb/swagger-zodios": "workspace:*",
-    "@tanstack/react-query": "^5.24.8",
-    "@tanstack/solid-query": "^5.24.8",
-    "@tanstack/svelte-query": "^5.24.8",
-    "@tanstack/vue-query": "^5.24.8",
+    "@tanstack/react-query": "^5.25.0",
+    "@tanstack/solid-query": "^5.25.0",
+    "@tanstack/svelte-query": "^5.25.0",
+    "@tanstack/vue-query": "^5.25.0",
     "@zodios/core": "^10.9.6",
     "axios": "^1.6.7",
     "msw": "^1.3.2",

examples/client/kubb.config.ts

@@ -1,6 +1,6 @@
 import { defineConfig } from '@kubb/core'
 
-import { templates } from './templates/CustomClientTemplate'
+import * as client from './templates/client/index'
 
 export default defineConfig(async () => {
   await setTimeout(() => {
@@ -52,7 +52,7 @@ export default defineConfig(async () => {
               pattern: 'user',
               options: {
                 templates: {
-                  client: templates,
+                  client: client.templates,
                 },
               },
             },

examples/client/package.json

@@ -32,7 +32,7 @@
     "@kubb/ts-config": "workspace:*",
     "react": "^18.2.0",
     "tsup": "^8.0.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   },
   "packageManager": "[email protected]",
   "engines": {

examples/client/templates/CustomClientTemplate.tsx → examples/client/templates/client/index.tsx

@@ -1,4 +1,4 @@
-import { File, Function } from '@kubb/react'
+import { Editor, File, Function } from '@kubb/react'
 import { Client } from '@kubb/swagger-client/components'
 import React from 'react'
 
@@ -7,12 +7,12 @@ export const templates = {
     const clientParams = [client.path.template, client.withData ? 'data' : undefined, 'options'].filter(Boolean).join(', ')
 
     return (
-      <>
+      <Editor language="typescript">
         <File.Import name="axios" path="axios" />
         <Function name={name} async export generics={generics} returnType={returnType} params={params} JSDoc={JSDoc}>
           {`return axios.${client.method}(${clientParams})`}
         </Function>
-      </>
+      </Editor>
     )
   },
 } as const

examples/client/tsconfig.json

@@ -18,7 +18,8 @@
     "noEmit": true
   },
   "include": [
-    "./src/**/*"
+    "./src/**/*",
+    "./templates/**/*"
   ],
   "exclude": [
     "**/node_modules",

examples/faker/package.json

@@ -35,7 +35,7 @@
   },
   "devDependencies": {
     "@kubb/ts-config": "workspace:*",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   },
   "packageManager": "[email protected]",
   "engines": {

examples/python/kubb.config.ts

@@ -1,6 +1,8 @@
 import { defineConfig } from '@kubb/core'
+import createSwagger from '@kubb/swagger'
+import { definePlugin as createSwaggerClient } from '@kubb/swagger-client'
 
-import { templates } from './templates/CustomClientTemplate'
+import * as client from './templates/client/index'
 
 export default defineConfig(async () => {
   return {
@@ -17,21 +19,18 @@ export default defineConfig(async () => {
       // done: ['npx eslint --fix ./src/gen', 'prettier --write "**/*.{ts,tsx}"', 'pnpm typecheck'],
     },
     plugins: [
-      ['@kubb/swagger', { output: false, validate: true }],
-      [
-        '@kubb/swagger-client',
-        {
-          output: {
-            path: './',
-            exportType: false,
-          },
-          group: { type: 'tag', output: './{{tag}}Service' },
-          templates: {
-            client: templates,
-            operations: false,
-          },
+      createSwagger({ output: false, validate: true }),
+      createSwaggerClient({
+        output: {
+          path: './',
+          exportType: false,
         },
-      ],
+        group: { type: 'tag', output: './{{tag}}Service' },
+        templates: {
+          client: client.templates,
+          operations: false,
+        },
+      }),
     ],
   }
 })

examples/python/package.json

@@ -26,13 +26,16 @@
     "@kubb/swagger": "workspace:*",
     "@kubb/swagger-client": "workspace:*",
     "@kubb/swagger-ts": "workspace:*",
-    "axios": "^1.6.7"
+    "axios": "^1.6.7",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
     "@kubb/ts-config": "workspace:*",
-    "react": "^18.2.0",
+    "@types/react": "^18.2.63",
+    "@types/react-dom": "^18.2.20",
     "tsup": "^8.0.2",
-    "typescript": "^5.3.3"
+    "typescript": "^5.4.2"
   },
   "packageManager": "[email protected]",
   "engines": {

examples/python/tsconfig.json

@@ -3,7 +3,7 @@
     "target": "ES2020",
     /* If NOT transpiling with TypeScript: */
     "module": "ES2020",
-    "moduleResolution": "Bundler",
+    "moduleResolution": "node",
     "sourceMap": true,
     "strictNullChecks": true,
     "jsx": "react-jsx",
@@ -18,7 +18,8 @@
     "noEmit": true
   },
   "include": [
-    "./src/**/*"
+    "./src/**/*",
+    "./templates/**/*"
   ],
   "exclude": [
     "**/node_modules",

examples/react-query-v5/kubb.config.js → examples/react-query-v5/kubb.config.ts

@@ -3,6 +3,8 @@ import createSwagger from '@kubb/swagger'
 import createSwaggerTanstackQuery from '@kubb/swagger-tanstack-query'
 import createSwaggerTS from '@kubb/swagger-ts'
 
+import * as queryKey from './templates/queryKey/index'
+
 /** @type {import('@kubb/core').UserConfig} */
 export const config = {
   root: '.',
@@ -50,6 +52,9 @@ export const config = {
             initialPageParam: 0,
             cursorParam: undefined,
           },
+          templates: {
+            queryKey: queryKey.templates,
+          },
         },
       }],
     }),

examples/react-query-v5/package.json

@@ -24,22 +24,23 @@
   "dependencies": {
     "@kubb/cli": "workspace:*",
     "@kubb/core": "workspace:*",
+    "@kubb/react": "workspace:*",
     "@kubb/swagger": "workspace:*",
     "@kubb/swagger-client": "workspace:*",
     "@kubb/swagger-tanstack-query": "workspace:*",
     "@kubb/swagger-ts": "workspace:*",
-    "@tanstack/react-query": "^5.24.8",
+    "@tanstack/react-query": "^5.25.0",
     "@tanstack/react-query-devtools": "5.0.0",
     "axios": "^1.6.7",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "tsup": "^8.0.2"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@types/react": "^18.2.62",
-    "@types/react-dom": "^18.2.19",
+    "@types/react": "^18.2.63",
+    "@types/react-dom": "^18.2.20",
     "@vitejs/plugin-react": "^4.2.1",
     "msw": "^1.3.2",
+    "tsup": "^8.0.2",
     "typescript": "~5.2.2",
     "unplugin-kubb": "workspace:*",
     "vite": "^4.5.2"

examples/react-query-v5/src/gen/hooks/index.ts

@@ -1,20 +1,20 @@
-export * from './useAddPetHook'
-export * from './useCreateUserHook'
-export * from './useCreateUsersWithListInputHook'
-export * from './useDeleteOrderHook'
-export * from './useDeletePetHook'
-export * from './useDeleteUserHook'
-export * from './useFindPetsByStatusHook'
-export * from './useFindPetsByTagsHook'
-export * from './useGetInventoryHook'
-export * from './useGetOrderByIdHook'
-export * from './useGetPetByIdHook'
-export * from './useGetUserByNameHook'
-export * from './useLoginUserHook'
-export * from './useLogoutUserHook'
-export * from './usePlaceOrderHook'
-export * from './usePlaceOrderPatchHook'
-export * from './useUpdatePetHook'
-export * from './useUpdatePetWithFormHook'
-export * from './useUpdateUserHook'
-export * from './useUploadFileHook'
+export * from "./useAddPetHook";
+export * from "./useCreateUserHook";
+export * from "./useCreateUsersWithListInputHook";
+export * from "./useDeleteOrderHook";
+export * from "./useDeletePetHook";
+export * from "./useDeleteUserHook";
+export * from "./useFindPetsByStatusHook";
+export * from "./useFindPetsByTagsHook";
+export * from "./useGetInventoryHook";
+export * from "./useGetOrderByIdHook";
+export * from "./useGetPetByIdHook";
+export * from "./useGetUserByNameHook";
+export * from "./useLoginUserHook";
+export * from "./useLogoutUserHook";
+export * from "./usePlaceOrderHook";
+export * from "./usePlaceOrderPatchHook";
+export * from "./useUpdatePetHook";
+export * from "./useUpdatePetWithFormHook";
+export * from "./useUpdateUserHook";
+export * from "./useUploadFileHook";

examples/react-query-v5/src/gen/hooks/useAddPetHook.ts

@@ -1,41 +1,41 @@
-import client from '@kubb/swagger-client/client'
-import { useMutation } from '@tanstack/react-query'
-import type { AddPetMutationRequest, AddPetMutationResponse, AddPet405 } from '../models/AddPet'
-import type { UseMutationOptions } from '@tanstack/react-query'
+import client from "@kubb/swagger-client/client";
+import { useMutation } from "@tanstack/react-query";
+import type { AddPetMutationRequest, AddPetMutationResponse, AddPet405 } from "../models/AddPet";
+import type { UseMutationOptions } from "@tanstack/react-query";
 
-type AddPetClient = typeof client<AddPetMutationResponse, AddPet405, AddPetMutationRequest>
+ type AddPetClient = typeof client<AddPetMutationResponse, AddPet405, AddPetMutationRequest>;
 type AddPet = {
-  data: AddPetMutationResponse
-  error: AddPet405
-  request: AddPetMutationRequest
-  pathParams: never
-  queryParams: never
-  headerParams: never
-  response: AddPetMutationResponse
-  client: {
-    parameters: Partial<Parameters<AddPetClient>[0]>
-    return: Awaited<ReturnType<AddPetClient>>
-  }
-}
+    data: AddPetMutationResponse;
+    error: AddPet405;
+    request: AddPetMutationRequest;
+    pathParams: never;
+    queryParams: never;
+    headerParams: never;
+    response: AddPetMutationResponse;
+    client: {
+        parameters: Partial<Parameters<AddPetClient>[0]>;
+        return: Awaited<ReturnType<AddPetClient>>;
+    };
+};
 /**
- * @description Add a new pet to the store
- * @summary Add a new pet to the store
- * @link /pet */
+     * @description Add a new pet to the store
+     * @summary Add a new pet to the store
+     * @link /pet */
 export function useAddPetHook(options: {
-  mutation?: UseMutationOptions<AddPet['response'], AddPet['error'], AddPet['request']>
-  client?: AddPet['client']['parameters']
+    mutation?: UseMutationOptions<AddPet["response"], AddPet["error"], AddPet["request"]>;
+    client?: AddPet["client"]["parameters"];
 } = {}) {
-  const { mutation: mutationOptions, client: clientOptions = {} } = options ?? {}
-  return useMutation({
-    mutationFn: async (data) => {
-      const res = await client<AddPet['data'], AddPet['error'], AddPet['request']>({
-        method: 'post',
-        url: `/pet`,
-        data,
-        ...clientOptions,
-      })
-      return res.data
-    },
-    ...mutationOptions,
-  })
-}
+    const { mutation: mutationOptions, client: clientOptions = {} } = options ?? {};
+    return useMutation({
+        mutationFn: async (data) => {
+            const res = await client<AddPet["data"], AddPet["error"], AddPet["request"]>({
+                method: "post",
+                url: `/pet`,
+                data,
+                ...clientOptions
+            });
+            return res.data;
+        },
+        ...mutationOptions
+    });
+}