@kubb/plugin-react-query 0.0.0-canary-20241104172400

package/src/generators/queryGenerator.tsx

@@ -0,0 +1,127 @@
+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 { Query, QueryKey, QueryOptions } from '../components'
+import type { PluginReactQuery } from '../types'
+
+export const queryGenerator = createReactGenerator<PluginReactQuery>({
+  name: 'react-query',
+  Operation({ options, operation }) {
+    const {
+      plugin: {
+        options: { output },
+      },
+    } = useApp<PluginReactQuery>()
+    const { getSchemas, getName, getFile } = useOperationManager()
+
+    const isQuery = typeof options.query === 'boolean' ? true : options.query?.methods.some((method) => operation.method === method)
+    const importPath = options.query ? options.query.importPath : '@tanstack/react-query'
+
+    const query = {
+      name: getName(operation, { type: 'function', prefix: 'use' }),
+      typeName: getName(operation, { type: 'type' }),
+      file: getFile(operation, { prefix: 'use' }),
+    }
+
+    const client = {
+      name: getName(operation, { type: 'function', pluginKey: [pluginClientName] }),
+    }
+
+    const queryOptions = {
+      name: getName(operation, { type: 'function', suffix: 'QueryOptions' }),
+    }
+
+    const queryKey = {
+      name: getName(operation, { type: 'const', suffix: 'QueryKey' }),
+      typeName: getName(operation, { type: 'type', suffix: 'QueryKey' }),
+    }
+
+    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) {
+      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={'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}
+          transformer={options.queryKey}
+        />
+        <Client
+          name={client.name}
+          isExportable={false}
+          isIndexable={false}
+          baseURL={options.client.baseURL}
+          operation={operation}
+          typeSchemas={type.schemas}
+          zodSchemas={zod.schemas}
+          dataReturnType={options.client.dataReturnType}
+          paramsType={options.paramsType}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <File.Import name={['queryOptions']} path={importPath} />
+        <QueryOptions
+          name={queryOptions.name}
+          clientName={client.name}
+          queryKeyName={queryKey.name}
+          typeSchemas={type.schemas}
+          paramsType={options.paramsType}
+          pathParamsType={options.pathParamsType}
+        />
+        {options.query && (
+          <>
+            <File.Import name={['useQuery']} path={importPath} />
+            <File.Import name={['QueryKey', 'QueryObserverOptions', 'UseQueryResult']} path={importPath} isTypeOnly />
+            <Query
+              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/generators/suspenseQueryGenerator.tsx

@@ -0,0 +1,130 @@
+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 importPath = options.query ? options.query.importPath : '@tanstack/react-query'
+
+    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) {
+      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={'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}
+          transformer={options.queryKey}
+        />
+
+        <Client
+          name={client.name}
+          isExportable={false}
+          isIndexable={false}
+          baseURL={options.client.baseURL}
+          operation={operation}
+          typeSchemas={type.schemas}
+          zodSchemas={zod.schemas}
+          dataReturnType={options.client.dataReturnType}
+          paramsType={options.paramsType}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <File.Import name={['queryOptions']} path={importPath} />
+        <QueryOptions
+          name={queryOptions.name}
+          clientName={client.name}
+          queryKeyName={queryKey.name}
+          typeSchemas={type.schemas}
+          paramsType={options.paramsType}
+          pathParamsType={options.pathParamsType}
+        />
+        {options.suspense && (
+          <>
+            <File.Import name={['useSuspenseQuery']} path={importPath} />
+            <File.Import name={['QueryKey', 'UseSuspenseQueryOptions', 'UseSuspenseQueryResult']} path={importPath} isTypeOnly />
+            <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/index.ts

@@ -0,0 +1,2 @@
+export { pluginReactQuery, pluginReactQueryName } from './plugin.ts'
+export type { PluginReactQuery } from './types.ts'

package/src/plugin.ts

@@ -0,0 +1,152 @@
+import path from 'node:path'
+
+import { FileManager, type Group, PluginManager, createPlugin } from '@kubb/core'
+import { camelCase, pascalCase } from '@kubb/core/transformers'
+import { OperationGenerator, pluginOasName } from '@kubb/plugin-oas'
+
+import { pluginTsName } from '@kubb/plugin-ts'
+import { pluginZodName } from '@kubb/plugin-zod'
+
+import type { Plugin } from '@kubb/core'
+import type { PluginOas } from '@kubb/plugin-oas'
+import { MutationKey } from './components'
+import { QueryKey } from './components/QueryKey.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', barrelType: 'named' },
+    group,
+    exclude = [],
+    include,
+    override = [],
+    parser = 'client',
+    suspense = {},
+    infinite = false,
+    transformers = {},
+    paramsType = 'inline',
+    pathParamsType = 'inline',
+    generators = [queryGenerator, suspenseQueryGenerator, infiniteQueryGenerator, mutationGenerator].filter(Boolean),
+    mutation = {},
+    query = {},
+    mutationKey = MutationKey.getTransformer,
+    queryKey = QueryKey.getTransformer,
+  } = options
+
+  return {
+    name: pluginReactQueryName,
+    options: {
+      output,
+      client: {
+        importPath: '@kubb/plugin-client/client',
+        dataReturnType: 'data',
+        ...options.client,
+      },
+      infinite: infinite
+        ? {
+            queryParam: 'id',
+            initialPageParam: 0,
+            cursorParam: undefined,
+            ...infinite,
+          }
+        : false,
+      suspense,
+      queryKey,
+      query: {
+        methods: ['get'],
+        importPath: '@tanstack/react-query',
+        ...query,
+      },
+      mutationKey,
+      mutation: {
+        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),
+    resolvePath(baseName, pathMode, 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
+         * Other plugins then need to call addOrAppend instead of just add from the fileManager class
+         */
+        return path.resolve(root, output.path)
+      }
+
+      return path.resolve(root, output.path, baseName)
+    },
+    resolveName(name, type) {
+      let resolvedName = camelCase(name)
+
+      if (type === 'file' || type === 'function') {
+        resolvedName = camelCase(name, {
+          isFile: type === 'file',
+        })
+      }
+      if (type === 'type') {
+        resolvedName = pascalCase(name)
+      }
+
+      if (type) {
+        return transformers?.name?.(resolvedName, type) || resolvedName
+      }
+
+      return resolvedName
+    },
+    async buildStart() {
+      const [swaggerPlugin]: [Plugin<PluginOas>] = PluginManager.getDependedPlugins<PluginOas>(this.plugins, [pluginOasName])
+
+      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 baseURL = await swaggerPlugin.context.getBaseURL()
+
+      if (baseURL) {
+        this.plugin.options.client.baseURL = baseURL
+      }
+
+      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(...generators)
+      await this.addFile(...files)
+
+      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)
+    },
+  }
+})

package/src/types.ts

@@ -0,0 +1,166 @@
+import type { Group, Output, PluginFactoryOptions, ResolveNameParams } from '@kubb/core'
+
+import type { HttpMethod, Operation } from '@kubb/oas'
+import type { PluginClient } from '@kubb/plugin-client'
+import type { Exclude, Generator, Include, OperationSchemas, Override, ResolvePathOptions } from '@kubb/plugin-oas'
+
+type TransformerProps = {
+  operation: Operation
+  schemas: OperationSchemas
+}
+
+export type Transformer = (props: TransformerProps) => unknown[]
+
+type Suspense = object
+
+/**
+ * Customize the queryKey
+ */
+type QueryKey = Transformer
+
+/**
+ * Customize the mutationKey
+ */
+type MutationKey = Transformer
+
+type Query = {
+  /**
+   * Define which HttpMethods can be used for queries
+   * @default ['get']
+   */
+  methods: Array<HttpMethod>
+  /**
+   * Path to the useQuery that will be used to do the useQuery functionality.
+   * It will be used as `import { useQuery } from '${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 '@tanstack/react-query'
+   */
+  importPath?: string
+}
+
+type Mutation = {
+  /**
+   * Define which HttpMethods can be used for mutations
+   * @default ['post', 'put', 'delete']
+   */
+  methods: Array<HttpMethod>
+  /**
+   * Path to the useQuery that will be used to do the useQuery functionality.
+   * It will be used as `import { useQuery } from '${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 '@tanstack/react-query'
+   */
+  importPath?: string
+}
+
+export type Infinite = {
+  /**
+   * Specify the params key used for `pageParam`.
+   * @default 'id'
+   */
+  queryParam: string
+  /**
+   * Which field of the data will be used, set it to undefined when no cursor is known.
+   */
+  cursorParam?: string | undefined
+  /**
+   * The initial value, the value of the first page.
+   * @default 0
+   */
+  initialPageParam: unknown
+}
+
+export type Options = {
+  /**
+   * Specify the export location for the files and define the behavior of the output
+   * @default { path: 'hooks', barrelType: 'named' }
+   */
+  output?: Output
+  /**
+   * Group the @tanstack/query hooks based on the provided name.
+   */
+  group?: Group
+
+  client?: Pick<PluginClient['options'], 'dataReturnType' | 'importPath' | 'baseURL'>
+  /**
+   * Array containing exclude parameters to exclude/skip tags/operations/methods/paths.
+   */
+  exclude?: Array<Exclude>
+  /**
+   * Array containing include parameters to include tags/operations/methods/paths.
+   */
+  include?: Array<Include>
+  /**
+   * 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.
+   */
+  infinite?: Partial<Infinite> | false
+  /**
+   * When set, a suspenseQuery hooks will be added.
+   */
+  suspense?: Partial<Suspense> | false
+  queryKey?: QueryKey
+  /**
+   * Override some useQuery behaviours.
+   */
+  query?: Partial<Query> | false
+  mutationKey?: MutationKey
+  /**
+   * Override some useMutation behaviours.
+   */
+  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.
+     */
+    name?: (name: ResolveNameParams['name'], type?: ResolveNameParams['type']) => string
+  }
+  /**
+   * Define some generators next to the react-query generators
+   */
+  generators?: Array<Generator<PluginReactQuery>>
+}
+
+type ResolvedOptions = {
+  output: Output
+  client: Required<Omit<NonNullable<PluginReactQuery['options']['client']>, 'baseURL'>> & { baseURL?: string }
+  parser: Required<NonNullable<Options['parser']>>
+  pathParamsType: NonNullable<Options['pathParamsType']>
+  paramsType: NonNullable<Options['paramsType']>
+  /**
+   * Only used of infinite
+   */
+  infinite: NonNullable<Infinite> | false
+  suspense: Suspense | false
+  queryKey: QueryKey | undefined
+  query: NonNullable<Required<Query>> | false
+  mutationKey: MutationKey | undefined
+  mutation: NonNullable<Required<Mutation>> | false
+}
+
+export type PluginReactQuery = PluginFactoryOptions<'plugin-react-query', Options, ResolvedOptions, never, ResolvePathOptions>