@kubb/plugin-react-query 3.0.0-alpha.2 → 3.0.0-alpha.21

package/src/generators/infiniteQueryGenerator.tsx

@@ -0,0 +1,125 @@
+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 { InfiniteQuery, InfiniteQueryOptions, QueryKey } from '../components'
+import type { PluginReactQuery } from '../types'
+
+export const infiniteQueryGenerator = createReactGenerator<PluginReactQuery>({
+  name: 'react-infinite-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 isInfinite = isQuery && !!options.infinite
+
+    const query = {
+      name: getName(operation, { type: 'function', prefix: 'use', suffix: 'infinite' }),
+      typeName: getName(operation, { type: 'type' }),
+      file: getFile(operation, { prefix: 'use', suffix: 'infinite' }),
+    }
+
+    const client = {
+      name: getName(operation, { type: 'function', pluginKey: [pluginClientName] }),
+    }
+
+    const queryOptions = {
+      name: transformers.camelCase(`${operation.getOperationId()} InfiniteQueryOptions`),
+    }
+
+    const queryKey = {
+      name: transformers.camelCase(`${operation.getOperationId()} InfiniteQueryKey`),
+      typeName: transformers.pascalCase(`${operation.getOperationId()} InfiniteQueryKey`),
+    }
+
+    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 || !isInfinite || typeof options.query === 'boolean' || typeof options.infinite === '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 extName={output?.extName} name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
+        <File.Import name={['useInfiniteQuery', 'infiniteQueryOptions']} path={options.query.importPath} />
+        <File.Import name={['QueryKey', 'WithRequired', 'InfiniteQueryObserverOptions', 'UseInfiniteQueryResult']} 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
+          extName={output?.extName}
+          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}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <InfiniteQueryOptions
+          name={queryOptions.name}
+          clientName={client.name}
+          queryKeyName={queryKey.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+          dataReturnType={options.client.dataReturnType}
+          cursorParam={options.infinite.cursorParam}
+          initialPageParam={options.infinite.initialPageParam}
+          queryParam={options.infinite.queryParam}
+        />
+        <InfiniteQuery
+          name={query.name}
+          queryOptionsName={queryOptions.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+          operation={operation}
+          dataReturnType={options.client.dataReturnType}
+          queryKeyName={queryKey.name}
+          queryKeyTypeName={queryKey.typeName}
+        />
+      </File>
+    )
+  },
+})

package/src/generators/mutationGenerator.tsx

@@ -0,0 +1,96 @@
+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 { Mutation } from '../components'
+import type { PluginReactQuery } from '../types'
+
+export const mutationGenerator = 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 isMutation = !isQuery && options.mutation && options.mutation.methods.some((method) => operation.method === method)
+
+    const mutation = {
+      name: getName(operation, { type: 'function', prefix: 'use' }),
+      typeName: getName(operation, { type: 'type' }),
+      file: getFile(operation, { prefix: 'use' }),
+    }
+
+    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' }),
+    }
+
+    const client = {
+      name: getName(operation, { type: 'function', pluginKey: [pluginClientName] }),
+    }
+
+    if (!isMutation || typeof options.mutation === 'boolean') {
+      return null
+    }
+
+    return (
+      <File baseName={mutation.file.baseName} path={mutation.file.path} meta={mutation.file.meta} banner={output?.banner} footer={output?.footer}>
+        {options.parser === 'zod' && (
+          <File.Import extName={output?.extName} name={[zod.schemas.response.name]} root={mutation.file.path} path={zod.file.path} />
+        )}
+        <File.Import name={['useMutation']} path={options.mutation.importPath} />
+        <File.Import name={['UseMutationOptions']} path={options.mutation.importPath} isTypeOnly />
+        <File.Import name={'client'} path={options.client.importPath} />
+        <File.Import name={['RequestConfig', 'ResponseConfig']} path={options.client.importPath} isTypeOnly />
+        <File.Import
+          extName={output?.extName}
+          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={mutation.file.path}
+          path={type.file.path}
+          isTypeOnly
+        />
+        <Client
+          name={client.name}
+          isExportable={false}
+          isIndexable={false}
+          baseURL={options.baseURL}
+          operation={operation}
+          typeSchemas={type.schemas}
+          zodSchemas={zod.schemas}
+          dataReturnType={options.client.dataReturnType}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <Mutation
+          name={mutation.name}
+          clientName={client.name}
+          typeName={mutation.typeName}
+          typeSchemas={type.schemas}
+          operation={operation}
+          dataReturnType={options.client.dataReturnType}
+          pathParamsType={options.pathParamsType}
+        />
+      </File>
+    )
+  },
+})

package/src/generators/queryGenerator.tsx

@@ -0,0 +1,122 @@
+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 { 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 isMutation = !isQuery && options.mutation && options.mutation.methods.some((method) => operation.method === method)
+
+    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: transformers.camelCase(`${operation.getOperationId()} QueryOptions`),
+    }
+
+    const queryKey = {
+      name: transformers.camelCase(`${operation.getOperationId()} QueryKey`),
+      typeName: transformers.pascalCase(`${operation.getOperationId()} 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 || 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 extName={output?.extName} name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
+        <File.Import name={['useQuery', 'queryOptions']} path={options.query.importPath} />
+        <File.Import name={['QueryKey', 'WithRequired', 'QueryObserverOptions', 'UseQueryResult']} 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
+          extName={output?.extName}
+          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}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <QueryOptions
+          name={queryOptions.name}
+          clientName={client.name}
+          queryKeyName={queryKey.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+        />
+        <Query
+          name={query.name}
+          queryOptionsName={queryOptions.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+          operation={operation}
+          dataReturnType={options.client.dataReturnType}
+          queryKeyName={queryKey.name}
+          queryKeyTypeName={queryKey.typeName}
+        />
+      </File>
+    )
+  },
+})

package/src/generators/suspenseQueryGenerator.tsx

@@ -0,0 +1,121 @@
+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: transformers.camelCase(`${operation.getOperationId()} SuspenseQueryOptions`),
+    }
+
+    const queryKey = {
+      name: transformers.camelCase(`${operation.getOperationId()} SuspenseQueryKey`),
+      typeName: transformers.pascalCase(`${operation.getOperationId()} 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 extName={output?.extName} 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
+          extName={output?.extName}
+          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}
+          pathParamsType={options.pathParamsType}
+          parser={options.parser}
+        />
+        <QueryOptions
+          name={queryOptions.name}
+          clientName={client.name}
+          queryKeyName={queryKey.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+        />
+        <SuspenseQuery
+          name={query.name}
+          queryOptionsName={queryOptions.name}
+          typeSchemas={type.schemas}
+          pathParamsType={options.pathParamsType}
+          operation={operation}
+          dataReturnType={options.client.dataReturnType}
+          queryKeyName={queryKey.name}
+          queryKeyTypeName={queryKey.typeName}
+        />
+      </File>
+    )
+  },
+})

package/src/plugin.ts

@@ -3,17 +3,14 @@ import path from 'node:path'
 import { FileManager, 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 { getGroupedByTagFiles } from '@kubb/plugin-oas/utils'
+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, Operations, 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']
@@ -25,28 +22,30 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
     exclude = [],
     include,
     override = [],
-    parser,
+    parser = 'client',
     suspense = {},
     infinite,
     transformers = {},
-    dataReturnType = 'data',
     pathParamsType = 'inline',
-    mutate = {},
+    mutation = {},
     query = {},
-    queryOptions = {},
-    templates,
   } = options
   const template = group?.output ? group.output : `${output.path}/{{tag}}Controller`
 
   return {
     name: pluginReactQueryName,
     options: {
+      output: {
+        exportType: 'barrelNamed',
+        ...output,
+      },
+      baseURL: undefined,
       client: {
         importPath: '@kubb/plugin-client/client',
+        dataReturnType: 'data',
+        pathParamsType: 'inline',
         ...options.client,
       },
-      dataReturnType,
-      pathParamsType,
       infinite: infinite
         ? {
             queryParam: 'id',
@@ -56,31 +55,18 @@ 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,
-        operations: Operations.templates,
-        ...templates,
+      query: {
+        key: (key: unknown[]) => key,
+        methods: ['get'],
+        importPath: '@tanstack/react-query',
+        ...query,
+      },
+      mutation: {
+        methods: ['post', 'put', 'patch', 'delete'],
+        importPath: '@tanstack/react-query',
+        ...mutation,
       },
+      pathParamsType,
       parser,
     },
     pre: [pluginOasName, pluginTsName, parser === 'zod' ? pluginZodName : undefined].filter(Boolean),
@@ -109,7 +95,6 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
 
       if (type === 'file' || type === 'function') {
         resolvedName = camelCase(name, {
-          prefix: 'use',
           isFile: type === 'file',
         })
       }
@@ -129,48 +114,41 @@ 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(queryGenerator, suspenseQueryGenerator, infiniteQueryGenerator, mutationGenerator)
       await this.addFile(...files)
-    },
-    async buildEnd() {
-      if (this.config.output.write === false) {
-        return
-      }
-
-      const root = path.resolve(this.config.root, this.config.output.path)
 
-      if (group?.type === 'tag') {
-        const rootFiles = await getGroupedByTagFiles({
-          logger: this.logger,
-          files: this.fileManager.files,
-          plugin: this.plugin,
-          template,
-          exportAs: group.exportAs || '{{tag}}Hooks',
+      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,
         })
 
-        await this.addFile(...rootFiles)
+        await this.addFile(...barrelFiles)
       }
-
-      await this.fileManager.addIndexes({
-        root,
-        output,
-        meta: { pluginKey: this.plugin.key },
-        logger: this.logger,
-      })
     },
   }
 })