@kubb/plugin-react-query 3.0.0-alpha.9 → 3.0.0-beta.10

package/src/generators/suspenseQueryGenerator.tsx

@@ -0,0 +1,123 @@
+import transformers from '@kubb/core/transformers'
+import { pluginClientName } from '@kubb/plugin-client'
+import { Client } from '@kubb/plugin-client/components'
+import { createReactGenerator } from '@kubb/plugin-oas'
+import { useOperationManager } from '@kubb/plugin-oas/hooks'
+import { pluginTsName } from '@kubb/plugin-ts'
+import { pluginZodName } from '@kubb/plugin-zod'
+import { File, useApp } from '@kubb/react'
+import { QueryKey, QueryOptions, SuspenseQuery } from '../components'
+import type { PluginReactQuery } from '../types'
+
+export const suspenseQueryGenerator = createReactGenerator<PluginReactQuery>({
+  name: 'react-suspense-query',
+  Operation({ options, operation }) {
+    const {
+      plugin: {
+        options: { output },
+      },
+    } = useApp<PluginReactQuery>()
+    const { getSchemas, getName, getFile } = useOperationManager()
+    const isQuery = typeof options.query === 'boolean' ? options.query : !!options.query.methods?.some((method) => operation.method === method)
+    const isSuspense = isQuery && !!options.suspense
+
+    const query = {
+      name: getName(operation, { type: 'function', prefix: 'use', suffix: 'suspense' }),
+      typeName: getName(operation, { type: 'type' }),
+      file: getFile(operation, { prefix: 'use', suffix: 'suspense' }),
+    }
+
+    const client = {
+      name: getName(operation, { type: 'function', pluginKey: [pluginClientName] }),
+    }
+
+    const queryOptions = {
+      name: getName(operation, { type: 'function', suffix: 'SuspenseQueryOptions' }),
+    }
+
+    const queryKey = {
+      name: getName(operation, { type: 'const', suffix: 'SuspenseQueryKey' }),
+      typeName: getName(operation, { type: 'type', suffix: 'SuspenseQueryKey' }),
+    }
+
+    const type = {
+      file: getFile(operation, { pluginKey: [pluginTsName] }),
+      //todo remove type?
+      schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' }),
+    }
+
+    const zod = {
+      file: getFile(operation, { pluginKey: [pluginZodName] }),
+      schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
+    }
+
+    if (!isQuery || !isSuspense || typeof options.query === 'boolean') {
+      return null
+    }
+
+    return (
+      <File baseName={query.file.baseName} path={query.file.path} meta={query.file.meta} banner={output?.banner} footer={output?.footer}>
+        {options.parser === 'zod' && <File.Import name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
+        <File.Import name={['useSuspenseQuery', 'queryOptions']} path={options.query.importPath} />
+        <File.Import name={['QueryKey', 'WithRequired', 'UseSuspenseQueryOptions', 'UseSuspenseQueryResult']} path={options.query.importPath} isTypeOnly />
+        <File.Import name={'client'} path={options.client.importPath} />
+        <File.Import name={['RequestConfig']} path={options.client.importPath} isTypeOnly />
+        {options.client.dataReturnType === 'full' && <File.Import name={['ResponseConfig']} path={options.client.importPath} isTypeOnly />}
+        <File.Import
+          name={[
+            type.schemas.request?.name,
+            type.schemas.response.name,
+            type.schemas.pathParams?.name,
+            type.schemas.queryParams?.name,
+            type.schemas.headerParams?.name,
+            ...(type.schemas.statusCodes?.map((item) => item.name) || []),
+          ].filter(Boolean)}
+          root={query.file.path}
+          path={type.file.path}
+          isTypeOnly
+        />
+
+        <QueryKey
+          name={queryKey.name}
+          typeName={queryKey.typeName}
+          operation={operation}
+          pathParamsType={options.pathParamsType}
+          typeSchemas={type.schemas}
+          keysFn={options.query.key}
+        />
+        <Client
+          name={client.name}
+          isExportable={false}
+          isIndexable={false}
+          baseURL={options.baseURL}
+          operation={operation}
+          typeSchemas={type.schemas}
+          zodSchemas={zod.schemas}
+          dataReturnType={options.client.dataReturnType}
+          paramsType={options.paramsType}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <QueryOptions
+          name={queryOptions.name}
+          clientName={client.name}
+          queryKeyName={queryKey.name}
+          typeSchemas={type.schemas}
+          paramsType={options.paramsType}
+          pathParamsType={options.pathParamsType}
+        />
+        <SuspenseQuery
+          name={query.name}
+          queryOptionsName={queryOptions.name}
+          typeSchemas={type.schemas}
+          paramsType={options.paramsType}
+          pathParamsType={options.pathParamsType}
+          operation={operation}
+          dataReturnType={options.client.dataReturnType}
+          queryKeyName={queryKey.name}
+          queryKeyTypeName={queryKey.typeName}
+        />
+      </File>
+    )
+  },
+})

package/src/plugin.ts

@@ -1,56 +1,47 @@
 import path from 'node:path'
 
-import { FileManager, PluginManager, createPlugin } from '@kubb/core'
+import { FileManager, type Group, PluginManager, createPlugin } from '@kubb/core'
 import { camelCase, pascalCase } from '@kubb/core/transformers'
-import { renderTemplate } from '@kubb/core/utils'
-import { pluginOasName } from '@kubb/plugin-oas'
+import { OperationGenerator, pluginOasName } from '@kubb/plugin-oas'
 
 import { pluginTsName } from '@kubb/plugin-ts'
 import { pluginZodName } from '@kubb/plugin-zod'
 
-import { OperationGenerator } from './OperationGenerator.tsx'
-import { Mutation, Query, QueryKey, QueryOptions } from './components/index.ts'
-
 import type { Plugin } from '@kubb/core'
 import type { PluginOas } from '@kubb/plugin-oas'
-import { QueryImports } from './components/QueryImports.tsx'
+import { infiniteQueryGenerator, mutationGenerator, queryGenerator, suspenseQueryGenerator } from './generators'
 import type { PluginReactQuery } from './types.ts'
 
 export const pluginReactQueryName = 'plugin-react-query' satisfies PluginReactQuery['name']
 
 export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
   const {
-    output = { path: 'hooks' },
+    output = { path: 'hooks', barrelType: 'named' },
     group,
     exclude = [],
     include,
     override = [],
-    parser,
+    parser = 'client',
     suspense = {},
-    infinite,
+    infinite = false,
     transformers = {},
-    dataReturnType = 'data',
+    paramsType = 'inline',
     pathParamsType = 'inline',
-    mutate = {},
+    generators = [queryGenerator, suspenseQueryGenerator, infiniteQueryGenerator, mutationGenerator].filter(Boolean),
+    mutation = {},
     query = {},
-    queryOptions = {},
-    templates,
   } = options
-  const template = group?.output ? group.output : `${output.path}/{{tag}}Controller`
 
   return {
     name: pluginReactQueryName,
-    output: {
-      exportType: 'barrelNamed',
-      ...output,
-    },
     options: {
+      output,
+      baseURL: undefined,
       client: {
         importPath: '@kubb/plugin-client/client',
+        dataReturnType: 'data',
         ...options.client,
       },
-      dataReturnType,
-      pathParamsType,
       infinite: infinite
         ? {
             queryParam: 'id',
@@ -60,30 +51,20 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
           }
         : false,
       suspense,
-      query: query
-        ? {
-            queryKey: (key: unknown[]) => key,
-            methods: ['get'],
-            importPath: '@tanstack/react-query',
-            ...query,
-          }
-        : false,
-      queryOptions,
-      mutate: mutate
-        ? {
-            variablesType: 'hook',
-            methods: ['post', 'put', 'patch', 'delete'],
-            ...mutate,
-          }
-        : false,
-      templates: {
-        mutation: Mutation.templates,
-        query: Query.templates,
-        queryOptions: QueryOptions.templates,
-        queryKey: QueryKey.templates,
-        queryImports: QueryImports.templates,
-        ...templates,
+      query: {
+        key: (key: unknown[]) => key,
+        methods: ['get'],
+        importPath: '@tanstack/react-query',
+        ...query,
+      },
+      mutation: {
+        key: (key: unknown[]) => key,
+        methods: ['post', 'put', 'patch', 'delete'],
+        importPath: '@tanstack/react-query',
+        ...mutation,
       },
+      paramsType,
+      pathParamsType: paramsType === 'object' ? 'object' : pathParamsType,
       parser,
     },
     pre: [pluginOasName, pluginTsName, parser === 'zod' ? pluginZodName : undefined].filter(Boolean),
@@ -91,6 +72,12 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
       const root = path.resolve(this.config.root, this.config.output.path)
       const mode = pathMode ?? FileManager.getMode(path.resolve(root, output.path))
 
+      if (options?.tag && group?.type === 'tag') {
+        const groupName: Group['name'] = group?.name ? group.name : (ctx) => `${ctx.group}Controller`
+
+        return path.resolve(root, output.path, groupName({ group: camelCase(options.tag) }), baseName)
+      }
+
       if (mode === 'single') {
         /**
          * when output is a file then we will always append to the same file(output file), see fileManager.addOrAppend
@@ -99,12 +86,6 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
         return path.resolve(root, output.path)
       }
 
-      if (options?.tag && group?.type === 'tag') {
-        const tag = camelCase(options.tag)
-
-        return path.resolve(root, renderTemplate(template, { tag }), baseName)
-      }
-
       return path.resolve(root, output.path, baseName)
     },
     resolveName(name, type) {
@@ -112,7 +93,6 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
 
       if (type === 'file' || type === 'function') {
         resolvedName = camelCase(name, {
-          prefix: 'use',
           isFile: type === 'file',
         })
       }
@@ -132,34 +112,40 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
       const oas = await swaggerPlugin.context.getOas()
       const root = path.resolve(this.config.root, this.config.output.path)
       const mode = FileManager.getMode(path.resolve(root, output.path))
-
-      const operationGenerator = new OperationGenerator(this.plugin.options, {
-        oas,
-        pluginManager: this.pluginManager,
-        plugin: this.plugin,
-        contentType: swaggerPlugin.context.contentType,
-        exclude,
-        include,
-        override,
-        mode,
-      })
-
-      const files = await operationGenerator.build()
+      const baseURL = await swaggerPlugin.context.getBaseURL()
+
+      const operationGenerator = new OperationGenerator(
+        {
+          ...this.plugin.options,
+          baseURL,
+        },
+        {
+          oas,
+          pluginManager: this.pluginManager,
+          plugin: this.plugin,
+          contentType: swaggerPlugin.context.contentType,
+          exclude,
+          include,
+          override,
+          mode,
+        },
+      )
+
+      const files = await operationGenerator.build(...generators)
       await this.addFile(...files)
 
-      if (this.config.output.exportType) {
-        const barrelFiles = await this.fileManager.getBarrelFiles({
-          root,
-          output,
-          files: this.fileManager.files,
-          meta: {
-            pluginKey: this.plugin.key,
-          },
-          logger: this.logger,
-        })
+      const barrelFiles = await this.fileManager.getBarrelFiles({
+        type: output.barrelType ?? 'named',
+        root,
+        output,
+        files: this.fileManager.files,
+        meta: {
+          pluginKey: this.plugin.key,
+        },
+        logger: this.logger,
+      })
 
-        await this.addFile(...barrelFiles)
-      }
+      await this.addFile(...barrelFiles)
     },
   }
 })

package/src/types.ts

@@ -1,27 +1,16 @@
-import type { Plugin, PluginFactoryOptions, ResolveNameParams } from '@kubb/core'
-import type * as KubbFile from '@kubb/fs/types'
+import type { Group, Output, PluginFactoryOptions, ResolveNameParams } from '@kubb/core'
 
 import type { HttpMethod } from '@kubb/oas'
-import type { Exclude, Include, Override, ResolvePathOptions } from '@kubb/plugin-oas'
-import type { Mutation } from './components/Mutation.tsx'
-import type { Query as QueryTemplate } from './components/Query.tsx'
-import type { QueryKey } from './components/QueryKey.tsx'
-import type { QueryOptions as QueryOptionsTemplate } from './components/QueryOptions.tsx'
+import type { PluginClient } from '@kubb/plugin-client'
+import type { Exclude, Generator, Include, Override, ResolvePathOptions } from '@kubb/plugin-oas'
 
-type Templates = {
-  mutation?: typeof Mutation.templates | false
-  query?: typeof QueryTemplate.templates | false
-  queryOptions?: typeof QueryOptionsTemplate.templates | false
-  queryKey?: typeof QueryKey.templates | false
-}
-
-export type Suspense = object
+type Suspense = object
 
-export type Query = {
+type Query = {
   /**
    * Customize the queryKey, here you can specify a suffix.
    */
-  queryKey: (key: unknown[]) => unknown[]
+  key: (key: unknown[]) => unknown[]
   /**
    * Define which HttpMethods can be used for queries
    * @default ['get']
@@ -37,14 +26,11 @@ export type Query = {
   importPath?: string
 }
 
-export type QueryOptions = object
-
-export type Mutate = {
+type Mutation = {
   /**
-   * Define the way of passing through the queryParams, headerParams and data.
-   * @default `'hook'`
+   * Customize the queryKey, here you can specify a suffix.
    */
-  variablesType: 'mutate' | 'hook'
+  key: (key: unknown[]) => unknown[]
   /**
    * Define which HttpMethods can be used for mutations
    * @default ['post', 'put', 'delete']
@@ -63,8 +49,7 @@ export type Mutate = {
 export type Infinite = {
   /**
    * Specify the params key used for `pageParam`.
-   * Used inside `useInfiniteQuery`, `createInfiniteQueries`, `createInfiniteQuery`
-   * @default `'id'`
+   * @default 'id'
    */
   queryParam: string
   /**
@@ -73,99 +58,23 @@ export type Infinite = {
   cursorParam?: string | undefined
   /**
    * The initial value, the value of the first page.
-   * @default `0`
+   * @default 0
    */
   initialPageParam: unknown
 }
 
 export type Options = {
-  output?: {
-    /**
-     * Output to save the @tanstack/query hooks.
-     * @default `"hooks"`
-     */
-    path: string
-    /**
-     * Name to be used for the `export * as {{exportAs}} from './'`
-     */
-    exportAs?: string
-    /**
-     * Add an extension to the generated imports and exports, default it will not use an extension
-     */
-    extName?: KubbFile.Extname
-    /**
-     * Define what needs to exported, here you can also disable the export of barrel files
-     * @default `'barrel'`
-     */
-    exportType?: 'barrel' | 'barrelNamed' | false
-  }
-  /**
-   * Group the @tanstack/query hooks based on the provided name.
-   */
-  group?: {
-    /**
-     * Tag will group based on the operation tag inside the Swagger file
-     */
-    type: 'tag'
-    /**
-     * Relative path to save the grouped @tanstack/query hooks.
-     *
-     * `{{tag}}` will be replaced by the current tagName.
-     * @example `${output}/{{tag}}Controller` => `hooks/PetController`
-     * @default `${output}/{{tag}}Controller`
-     */
-    output?: string
-    /**
-     * Name to be used for the `export * as {{exportAs}} from './`
-     * @default `"{{tag}}Hooks"`
-     */
-    exportAs?: string
-  }
-
-  client?: {
-    /**
-     * Path to the client that will be used to do the API calls.
-     * It will be used as `import client from '${client.importPath}'`.
-     * It allows both relative and absolute path.
-     * the path will be applied as is, so relative path should be based on the file being generated.
-     * @default '@kubb/plugin-client/client'
-     */
-    importPath?: string
-  }
-  /**
-   * ReturnType that needs to be used when calling client().
-   *
-   * `Data` will return ResponseConfig[data].
-   *
-   * `Full` will return ResponseConfig.
-   * @default `'data'`
-   * @private
-   */
   /**
-   * ReturnType that needs to be used when calling client().
-   *
-   * `Data` will return ResponseConfig[data].
-   *
-   * `Full` will return ResponseConfig.
-   * @default `'data'`
-   * @private
+   * Specify the export location for the files and define the behavior of the output
+   * @default { path: 'hooks', barrelType: 'named' }
    */
-  dataReturnType?: 'data' | 'full'
+  output?: Output
   /**
-   * How to pass your pathParams.
-   *
-   * `object` will return the pathParams as an object.
-   *
-   * `inline` will return the pathParams as comma separated params.
-   * @default `'inline'`
-   * @private
-   */
-  pathParamsType?: 'object' | 'inline'
-  /**
-   * Which parser can be used before returning the data to `@tanstack/query`.
-   * `'zod'` will use `@kubb/plugin-zod` to parse the data.
+   * Group the @tanstack/query hooks based on the provided name.
    */
-  parser?: 'zod'
+  group?: Group
+
+  client?: Pick<PluginClient['options'], 'dataReturnType' | 'importPath'>
   /**
    * Array containing exclude parameters to exclude/skip tags/operations/methods/paths.
    */
@@ -178,6 +87,21 @@ export type Options = {
    * Array containing override parameters to override `options` based on tags/operations/methods/paths.
    */
   override?: Array<Override<ResolvedOptions>>
+  /**
+   * How to pass your params
+   * - 'object' will return the params and pathParams as an object.
+   * - 'inline' will return the params as comma separated params.
+   * @default 'inline'
+   */
+  paramsType?: 'object' | 'inline'
+  /**
+   * How to pass your pathParams.
+   * - 'object' will return the pathParams as an object.
+   * - 'inline' will return the pathParams as comma separated params.
+   * @default 'inline'
+   */
+  pathParamsType?: PluginClient['options']['pathParamsType']
+
   /**
    * When set, an infiniteQuery hooks will be added.
    */
@@ -190,11 +114,15 @@ export type Options = {
    * Override some useQuery behaviours.
    */
   query?: Partial<Query> | false
-  queryOptions?: Partial<QueryOptions> | false
   /**
    * Override some useMutation behaviours.
    */
-  mutate?: Mutate | false
+  mutation?: Partial<Mutation> | false
+  /**
+   * Which parser should be used before returning the data to `@tanstack/query`.
+   * `'zod'` will use `@kubb/plugin-zod` to parse the data.
+   */
+  parser?: PluginClient['options']['parser']
   transformers?: {
     /**
      * Customize the names based on the type that is provided by the plugin.
@@ -202,30 +130,25 @@ export type Options = {
     name?: (name: ResolveNameParams['name'], type?: ResolveNameParams['type']) => string
   }
   /**
-   * Make it possible to override one of the templates
+   * Define some generators next to the react-query generators
    */
-  templates?: Partial<Templates>
+  generators?: Array<Generator<PluginReactQuery>>
 }
 
 type ResolvedOptions = {
+  output: Output
+  baseURL: string | undefined
   client: Required<NonNullable<PluginReactQuery['options']['client']>>
-  dataReturnType: NonNullable<PluginReactQuery['options']['dataReturnType']>
-  pathParamsType: NonNullable<PluginReactQuery['options']['pathParamsType']>
-  parser: PluginReactQuery['options']['parser']
+  parser: Required<NonNullable<Options['parser']>>
+  pathParamsType: NonNullable<Options['pathParamsType']>
+  paramsType: NonNullable<Options['paramsType']>
   /**
    * Only used of infinite
    */
-  infinite: Infinite | false
+  infinite: NonNullable<Infinite> | false
   suspense: Suspense | false
-  query: Query | false
-  queryOptions: QueryOptions | false
-  mutate: Mutate | false
-  templates: NonNullable<Templates>
-}
-
-export type FileMeta = {
-  pluginKey?: Plugin['key']
-  tag?: string
+  query: NonNullable<Required<Query>> | false
+  mutation: NonNullable<Required<Mutation>> | false
 }
 
 export type PluginReactQuery = PluginFactoryOptions<'plugin-react-query', Options, ResolvedOptions, never, ResolvePathOptions>