chore: example for react-query templates

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/tsconfig.json

@@ -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

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

examples/react-query-v5/package.json

@@ -24,6 +24,7 @@
   "dependencies": {
     "@kubb/cli": "workspace:*",
     "@kubb/core": "workspace:*",
+    "@kubb/react": "workspace:*",
     "@kubb/swagger": "workspace:*",
     "@kubb/swagger-client": "workspace:*",
     "@kubb/swagger-tanstack-query": "workspace:*",

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

@@ -26,7 +26,7 @@ type FindPetsByTags = {
     return: Awaited<ReturnType<FindPetsByTagsClient>>
   }
 }
-export const findPetsByTagsQueryKey = (params?: FindPetsByTags['queryParams']) => ['v5', { url: '/pet/findByTags' }, ...(params ? [params] : [])] as const
+export const findPetsByTagsQueryKey = (params?: FindPetsByTags['queryParams']) => ['/pet/findByTags', ...(params ? [params] : [])] as const
 export type FindPetsByTagsQueryKey = ReturnType<typeof findPetsByTagsQueryKey>
 export function findPetsByTagsQueryOptions(params?: FindPetsByTags['queryParams'], options: FindPetsByTags['client']['parameters'] = {}) {
   const queryKey = findPetsByTagsQueryKey(params)
@@ -69,8 +69,7 @@ export function useFindPetsByTagsHook<
   query.queryKey = queryKey as TQueryKey
   return query
 }
-export const findPetsByTagsInfiniteQueryKey = (params?: FindPetsByTags['queryParams']) =>
-  ['v5', { url: '/pet/findByTags' }, ...(params ? [params] : [])] as const
+export const findPetsByTagsInfiniteQueryKey = (params?: FindPetsByTags['queryParams']) => ['/pet/findByTags', ...(params ? [params] : [])] as const
 export type FindPetsByTagsInfiniteQueryKey = ReturnType<typeof findPetsByTagsInfiniteQueryKey>
 export function findPetsByTagsInfiniteQueryOptions(params?: FindPetsByTags['queryParams'], options: FindPetsByTags['client']['parameters'] = {}) {
   const queryKey = findPetsByTagsInfiniteQueryKey(params)
@@ -120,8 +119,7 @@ export function useFindPetsByTagsHookInfinite<
   query.queryKey = queryKey as TQueryKey
   return query
 }
-export const findPetsByTagsSuspenseQueryKey = (params?: FindPetsByTags['queryParams']) =>
-  ['v5', { url: '/pet/findByTags' }, ...(params ? [params] : [])] as const
+export const findPetsByTagsSuspenseQueryKey = (params?: FindPetsByTags['queryParams']) => ['/pet/findByTags', ...(params ? [params] : [])] as const
 export type FindPetsByTagsSuspenseQueryKey = ReturnType<typeof findPetsByTagsSuspenseQueryKey>
 export function findPetsByTagsSuspenseQueryOptions(params?: FindPetsByTags['queryParams'], options: FindPetsByTags['client']['parameters'] = {}) {
   const queryKey = findPetsByTagsSuspenseQueryKey(params)

examples/react-query-v5/templates/queryKey/index.tsx

@@ -0,0 +1,36 @@
+import { Type, Function } from '@kubb/react'
+import { useOperation, useSchemas } from '@kubb/swagger/hooks'
+import { QueryKey } from '@kubb/swagger-tanstack-query/components'
+import React from 'react'
+import { URLObject, URLPath } from '@kubb/core/utils'
+
+export const templates = {
+  ...QueryKey.templates,
+  react: function({ name, typeName, params, generics, returnType, JSDoc }: React.ComponentProps<typeof QueryKey.templates.react>) {
+    const schemas = useSchemas()
+    const operation = useOperation()
+    const path = new URLPath(operation.path)
+    const withQueryParams = !!schemas.queryParams?.name
+
+    const pathObject = path.toObject({
+      type: 'path',
+    }) as URLObject
+
+    const keys = [
+      JSON.stringify(pathObject.url),
+      withQueryParams ? `...(params ? [params] : [])` : undefined,
+    ].filter(Boolean)
+
+    return (
+      <>
+        <Function.Arrow name={name} export generics={generics} params={params} returnType={returnType} singleLine JSDoc={JSDoc}>
+          {`[${keys}] as const`}
+        </Function.Arrow>
+
+        <Type name={typeName} export>
+          {`ReturnType<typeof ${name}>`}
+        </Type>
+      </>
+    )
+  },
+} as const

examples/react-query-v5/tsconfig.json

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

packages/swagger-client/src/OperationGenerator.tsx

@@ -14,11 +14,17 @@ export class OperationGenerator extends Generator<PluginOptions['resolvedOptions
 
     const root = createRoot<AppContextProps>({ logger: pluginManager.logger })
 
-    if (!this.options.templates.operations) {
+    const templates = {
+      operations: Operations.templates,
+      client: Client.templates,
+      ...this.options.templates,
+    }
+
+    if (!templates.operations) {
       return []
     }
 
-    root.render(<Operations.File name="operations" paths={paths} templates={this.options.templates.operations} />, { meta: { oas, pluginManager, plugin } })
+    root.render(<Operations.File name="operations" paths={paths} templates={templates.operations} />, { meta: { oas, pluginManager, plugin } })
 
     return root.files
   }
@@ -28,11 +34,17 @@ export class OperationGenerator extends Generator<PluginOptions['resolvedOptions
 
     const root = createRoot<AppContextProps<PluginOptions['appMeta']>>({ logger: pluginManager.logger })
 
-    if (!options.templates.client) {
+    const templates = {
+      operations: Operations.templates,
+      client: Client.templates,
+      ...options.templates,
+    }
+
+    if (!templates.client) {
       return []
     }
 
-    root.render(<Client.File templates={options.templates.client} />, { meta: { oas, pluginManager, plugin: { ...plugin, options }, schemas, operation } })
+    root.render(<Client.File templates={templates.client} />, { meta: { oas, pluginManager, plugin: { ...plugin, options }, schemas, operation } })
 
     return root.files
   }

packages/swagger-msw/src/OperationGenerator.tsx

@@ -15,11 +15,17 @@ export class OperationGenerator extends Generator<PluginOptions['resolvedOptions
 
     const root = createRoot<AppContextProps>({ logger: pluginManager.logger })
 
-    if (!this.options.templates?.handlers) {
+    const templates = {
+      handlers: Handlers.templates,
+      mock: Mock.templates,
+      ...this.options.templates,
+    }
+
+    if (!templates?.handlers) {
       return []
     }
 
-    root.render(<Handlers.File name="handlers" paths={paths} templates={this.options.templates.handlers} />, { meta: { oas, pluginManager, plugin } })
+    root.render(<Handlers.File name="handlers" paths={paths} templates={templates.handlers} />, { meta: { oas, pluginManager, plugin } })
 
     return root.files
   }
@@ -29,11 +35,17 @@ export class OperationGenerator extends Generator<PluginOptions['resolvedOptions
 
     const root = createRoot<AppContextProps<PluginOptions['appMeta']>>({ logger: pluginManager.logger })
 
-    if (!options.templates?.mock) {
+    const templates = {
+      handlers: Handlers.templates,
+      mock: Mock.templates,
+      ...options.templates,
+    }
+
+    if (!templates?.mock) {
       return []
     }
 
-    root.render(<Mock.File templates={options.templates.mock} />, { meta: { oas, pluginManager, plugin: { ...plugin, options }, schemas, operation } })
+    root.render(<Mock.File templates={templates.mock} />, { meta: { oas, pluginManager, plugin: { ...plugin, options }, schemas, operation } })
 
     return root.files
   }

packages/swagger-tanstack-query/src/OperationGenerator.tsx

@@ -3,6 +3,8 @@ import { OperationGenerator as Generator } from '@kubb/swagger'
 
 import { Mutation } from './components/Mutation.tsx'
 import { Query } from './components/Query.tsx'
+import { QueryKey } from './components/QueryKey.tsx'
+import { QueryOptions } from './components/QueryOptions.tsx'
 
 import type { KubbFile } from '@kubb/core'
 import type { AppContextProps } from '@kubb/react'
@@ -20,12 +22,20 @@ export class OperationGenerator extends Generator<PluginOptions['resolvedOptions
 
     const root = createRoot<AppContextProps<PluginOptions['appMeta']>>({ logger: pluginManager.logger })
 
-    if (!options.templates?.query || !options.templates?.queryKey || !options.templates.queryOptions) {
+    const templates = {
+      mutation: Mutation.templates,
+      query: Query.templates,
+      queryOptions: QueryOptions.templates,
+      queryKey: QueryKey.templates,
+      ...options.templates,
+    }
+
+    if (!templates?.query || !templates?.queryKey || !templates.queryOptions) {
       return []
     }
 
     root.render(
-      <Query.File templates={{ query: options.templates.query, queryKey: options.templates.queryKey, queryOptions: options.templates.queryOptions }} />,
+      <Query.File templates={{ query: templates.query, queryKey: templates.queryKey, queryOptions: templates.queryOptions }} />,
       { meta: { oas, pluginManager, plugin: { ...plugin, options }, schemas, operation } },
     )
 
@@ -37,11 +47,19 @@ export class OperationGenerator extends Generator<PluginOptions['resolvedOptions
 
     const root = createRoot<AppContextProps<PluginOptions['appMeta']>>({ logger: pluginManager.logger })
 
-    if (!options.templates?.mutation) {
+    const templates = {
+      mutation: Mutation.templates,
+      query: Query.templates,
+      queryOptions: QueryOptions.templates,
+      queryKey: QueryKey.templates,
+      ...options.templates,
+    }
+
+    if (!templates?.mutation) {
       return []
     }
 
-    root.render(<Mutation.File templates={options.templates.mutation} />, { meta: { oas, pluginManager, plugin: { ...plugin, options }, schemas, operation } })
+    root.render(<Mutation.File templates={templates.mutation} />, { meta: { oas, pluginManager, plugin: { ...plugin, options }, schemas, operation } })
 
     return root.files
   }