@kubb/plugin-react-query 3.0.0-alpha.3 → 3.0.0-alpha.30

package/src/components/InfiniteQueryOptions.tsx

@@ -0,0 +1,130 @@
+import { getPathParams } from '@kubb/plugin-oas/utils'
+import { File, Function, FunctionParams } from '@kubb/react'
+
+import type { ReactNode } from 'react'
+
+import { isOptional } from '@kubb/oas'
+import { Client } from '@kubb/plugin-client/components'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import type { Infinite, PluginReactQuery } from '../types.ts'
+import { QueryKey } from './QueryKey.tsx'
+
+type Props = {
+  name: string
+  clientName: string
+  queryKeyName: string
+  typeSchemas: OperationSchemas
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+  initialPageParam: Infinite['initialPageParam']
+  cursorParam: Infinite['cursorParam']
+  queryParam: Infinite['queryParam']
+}
+
+type GetParamsProps = {
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
+
+function getParams({ pathParamsType, typeSchemas }: GetParamsProps) {
+  return FunctionParams.factory({
+    pathParams: {
+      mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+      children: getPathParams(typeSchemas.pathParams, { typed: true }),
+    },
+    data: typeSchemas.request?.name
+      ? {
+          type: typeSchemas.request?.name,
+          optional: isOptional(typeSchemas.request?.schema),
+        }
+      : undefined,
+    params: typeSchemas.queryParams?.name
+      ? {
+          type: typeSchemas.queryParams?.name,
+          optional: isOptional(typeSchemas.queryParams?.schema),
+        }
+      : undefined,
+    headers: typeSchemas.headerParams?.name
+      ? {
+          type: typeSchemas.headerParams?.name,
+          optional: isOptional(typeSchemas.headerParams?.schema),
+        }
+      : undefined,
+    config: {
+      type: typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>',
+      default: '{}',
+    },
+  })
+}
+
+export function InfiniteQueryOptions({
+  name,
+  clientName,
+  initialPageParam,
+  cursorParam,
+  typeSchemas,
+  dataReturnType,
+  pathParamsType,
+  queryParam,
+  queryKeyName,
+}: Props): ReactNode {
+  const params = getParams({ pathParamsType, typeSchemas })
+  const clientParams = Client.getParams({
+    typeSchemas,
+    pathParamsType,
+  })
+  const queryKeyParams = QueryKey.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
+
+  const queryOptions = [
+    `initialPageParam: ${typeof initialPageParam === 'string' ? JSON.stringify(initialPageParam) : initialPageParam}`,
+    cursorParam ? `getNextPageParam: (lastPage) => lastPage['${cursorParam}']` : undefined,
+    cursorParam ? `getPreviousPageParam: (firstPage) => firstPage['${cursorParam}']` : undefined,
+    !cursorParam && dataReturnType === 'full'
+      ? 'getNextPageParam: (lastPage, _allPages, lastPageParam) => Array.isArray(lastPage.data) && lastPage.data.length === 0 ? undefined : lastPageParam + 1'
+      : undefined,
+    !cursorParam && dataReturnType === 'data'
+      ? 'getNextPageParam: (lastPage, _allPages, lastPageParam) => Array.isArray(lastPage) && lastPage.length === 0 ? undefined : lastPageParam + 1'
+      : undefined,
+    !cursorParam ? 'getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => firstPageParam <= 1 ? undefined : firstPageParam - 1' : undefined,
+  ].filter(Boolean)
+
+  const infiniteOverrideParams =
+    queryParam && typeSchemas.queryParams?.name
+      ? `
+          if(params) {
+           params['${queryParam}'] = pageParam as unknown as ${typeSchemas.queryParams?.name}['${queryParam}']
+          }`
+      : ''
+
+  const enabled = Object.entries(queryKeyParams.flatParams)
+    .map(([key, item]) => (item && !item.optional ? key : undefined))
+    .filter(Boolean)
+    .join('&& ')
+
+  const enabledText = enabled ? `enabled: !!(${enabled})` : ''
+
+  return (
+    <File.Source name={name} isExportable isIndexable>
+      <Function name={name} export params={params.toConstructor()}>
+        {`
+      const queryKey = ${queryKeyName}(${queryKeyParams.toCall()})
+      return infiniteQueryOptions({
+       ${enabledText}
+       queryKey,
+       queryFn: async ({ signal, pageParam }) => {
+          config.signal = signal
+          ${infiniteOverrideParams}
+          return ${clientName}(${clientParams.toCall()})
+       },
+       ${queryOptions.join('\n')}
+      })
+`}
+      </Function>
+    </File.Source>
+  )
+}
+
+InfiniteQueryOptions.getParams = getParams

package/src/components/Mutation.tsx

@@ -1,341 +1,157 @@
-import transformers from '@kubb/core/transformers'
-import { FunctionParams, URLPath } from '@kubb/core/utils'
-import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
-import { getASTParams, getComments } from '@kubb/plugin-oas/utils'
-import { File, Function, Parser, useApp } from '@kubb/react'
-import { pluginTsName } from '@kubb/plugin-ts'
-
-import { SchemaType } from './SchemaType.tsx'
-
-import { isRequired } from '@kubb/oas'
-import type { HttpMethod } from '@kubb/oas'
-import type { ComponentProps, ComponentType, ReactNode } from 'react'
-import type { FileMeta, PluginReactQuery } from '../types.ts'
-
-type TemplateProps = {
+import { File, Function, FunctionParams } from '@kubb/react'
+
+import { type Operation, isOptional } from '@kubb/oas'
+import { Client } from '@kubb/plugin-client/components'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import { getComments, getPathParams } from '@kubb/plugin-oas/utils'
+import type { Params } from '@kubb/react/types'
+import type { ReactNode } from 'react'
+import type { PluginReactQuery } from '../types.ts'
+import { MutationKey } from './MutationKey.tsx'
+
+type Props = {
   /**
    * Name of the function
    */
   name: string
-  /**
-   * Parameters/options/props that need to be used
-   */
-  params: string
-  mutateParams: string
-  /**
-   * Options for JSdocs
-   */
-  JSDoc?: {
-    comments: string[]
-  }
-  hook: {
-    name: string
-    generics?: string
-    children?: string
-  }
-  client: {
-    generics: string
-    method: HttpMethod
-    path: URLPath
-    withQueryParams: boolean
-    withPathParams: boolean
-    withData: boolean
-    withHeaders: boolean
-    contentType: string
-  }
-  dataReturnType: NonNullable<PluginReactQuery['options']['dataReturnType']>
+  typeName: string
+  clientName: string
+  mutationKeyName: string
+  typeSchemas: OperationSchemas
+  operation: Operation
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
 }
 
-function Template({ name, params, mutateParams, JSDoc, client, hook, dataReturnType }: TemplateProps): ReactNode {
-  const isFormData = client.contentType === 'multipart/form-data'
-  const headers = [
-    client.contentType !== 'application/json' ? `'Content-Type': '${client.contentType}'` : undefined,
-    client.withHeaders ? '...headers' : undefined,
-  ]
-    .filter(Boolean)
-    .join(', ')
-
-  const clientOptions = [
-    `method: "${client.method}"`,
-    `url: ${client.path.template}`,
-    client.withQueryParams ? 'params' : undefined,
-    client.withData && !isFormData ? 'data' : undefined,
-    client.withData && isFormData ? 'data: formData' : undefined,
-    headers.length ? `headers: { ${headers}, ...clientOptions.headers }` : undefined,
-    '...clientOptions',
-  ].filter(Boolean)
-
-  const resolvedClientOptions = `${transformers.createIndent(4)}${clientOptions.join(`,\n${transformers.createIndent(4)}`)}`
-
-  const formData = isFormData
-    ? `
-   const formData = new FormData()
-   if(data) {
-    Object.keys(data).forEach((key) => {
-      const value = data[key];
-      if (typeof key === "string" && (typeof value === "string" || value instanceof Blob)) {
-        formData.append(key, value);
-      }
-    })
-   }
-  `
-    : undefined
-
-  return (
-    <Function export name={name} params={params} JSDoc={JSDoc}>
-      {`
-         const { mutation: mutationOptions, client: clientOptions = {} } = options ?? {}
-
-         return ${hook.name}({
-           mutationFn: async(${mutateParams}) => {
-             ${hook.children || ''}
-             ${formData || ''}
-             const res = await client<${client.generics}>({
-              ${resolvedClientOptions}
-             })
-
-             return ${dataReturnType === 'data' ? 'res.data' : 'res'}
-           },
-           ...mutationOptions
-         })`}
-    </Function>
-  )
+type GetParamsProps = {
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+  typeSchemas: OperationSchemas
 }
 
-type RootTemplateProps = {
-  children?: React.ReactNode
+function getParams({ dataReturnType, typeSchemas }: GetParamsProps) {
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
+  const mutationParams = FunctionParams.factory({
+    ...getPathParams(typeSchemas.pathParams, { typed: true }),
+    data: typeSchemas.request?.name
+      ? {
+          type: typeSchemas.request?.name,
+          optional: isOptional(typeSchemas.request?.schema),
+        }
+      : undefined,
+    params: typeSchemas.queryParams?.name
+      ? {
+          type: typeSchemas.queryParams?.name,
+          optional: isOptional(typeSchemas.queryParams?.schema),
+        }
+      : undefined,
+    headers: typeSchemas.headerParams?.name
+      ? {
+          type: typeSchemas.headerParams?.name,
+          optional: isOptional(typeSchemas.headerParams?.schema),
+        }
+      : undefined,
+  })
+  const TRequest = mutationParams.toConstructor({ valueAsType: true })
+  const generics = [TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error', `{${TRequest}}`].join(', ')
+
+  return FunctionParams.factory({
+    options: {
+      type: `
+{
+  mutation?: UseMutationOptions<${generics}>,
+  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>'},
 }
-
-function RootTemplate({ children }: RootTemplateProps) {
-  const {
-    plugin: {
-      options: {
-        client: { importPath },
-        mutate,
-      },
+`,
+      default: '{}',
     },
-  } = useApp<PluginReactQuery>()
-
-  const { getSchemas, getFile } = useOperationManager()
-  const operation = useOperation()
-
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-  const file = getFile(operation)
-  const fileType = getFile(operation, { pluginKey: [pluginTsName] })
-
-  return (
-    <Parser language="typescript">
-      <File<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
-        <File.Import name={'client'} path={importPath} />
-        <File.Import name={['ResponseConfig']} path={importPath} isTypeOnly />
-        <File.Import
-          name={[
-            schemas.request?.name,
-            schemas.response.name,
-            schemas.pathParams?.name,
-            schemas.queryParams?.name,
-            schemas.headerParams?.name,
-            ...(schemas.errors?.map((error) => error.name) || []),
-          ].filter(Boolean)}
-          root={file.path}
-          path={fileType.path}
-          isTypeOnly
-        />
-        <File.Import
-          name={['UseMutationOptions', 'UseMutationResult']}
-          path={typeof mutate !== 'boolean' && mutate.importPath ? mutate.importPath : '@tanstack/react-query'}
-          isTypeOnly
-        />
-        <File.Import name={['useMutation']} path={typeof mutate !== 'boolean' && mutate.importPath ? mutate.importPath : '@tanstack/react-query'} />
-        <File.Source>{children}</File.Source>
-      </File>
-    </Parser>
-  )
-}
-
-const defaultTemplates = { default: Template, root: RootTemplate } as const
-
-type Templates = Partial<typeof defaultTemplates>
-
-type MutationProps = {
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  Template?: ComponentType<ComponentProps<typeof Template>>
+  })
 }
 
-export function Mutation({ Template = defaultTemplates.default }: MutationProps): ReactNode {
-  // TODO do checks on pathParamsType
-
-  const {
-    plugin: {
-      options: { dataReturnType, mutate },
+export function Mutation({ name, clientName, pathParamsType, dataReturnType, typeSchemas, operation, mutationKeyName }: Props): ReactNode {
+  const mutationKeyParams = MutationKey.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
+
+  const params = getParams({
+    pathParamsType,
+    dataReturnType,
+    typeSchemas,
+  })
+
+  const clientParams = Client.getParams({
+    typeSchemas,
+    pathParamsType,
+  })
+
+  const mutationParams = FunctionParams.factory({
+    ...getPathParams(typeSchemas.pathParams, { typed: true }),
+    data: typeSchemas.request?.name
+      ? {
+          type: typeSchemas.request?.name,
+          optional: isOptional(typeSchemas.request?.schema),
+        }
+      : undefined,
+    params: typeSchemas.queryParams?.name
+      ? {
+          type: typeSchemas.queryParams?.name,
+          optional: isOptional(typeSchemas.queryParams?.schema),
+        }
+      : undefined,
+    headers: typeSchemas.headerParams?.name
+      ? {
+          type: typeSchemas.headerParams?.name,
+          optional: isOptional(typeSchemas.headerParams?.schema),
+        }
+      : undefined,
+  })
+
+  const dataParams = FunctionParams.factory({
+    data: {
+      // No use of pathParams because useMutation can only take one argument in object form,
+      // see https://tanstack.com/query/latest/docs/framework/react/reference/useMutation#usemutation
+      mode: 'object',
+      children: Object.entries(mutationParams.params).reduce((acc, [key, value]) => {
+        if (value) {
+          acc[key] = {
+            ...value,
+            type: undefined,
+          }
+        }
+
+        return acc
+      }, {} as Params),
     },
-  } = useApp<PluginReactQuery>()
-
-  const operation = useOperation()
-  const { getSchemas, getName } = useOperationManager()
-
-  const name = getName(operation, { type: 'function' })
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-  const contentType = operation.getContentType()
-
-  const params = new FunctionParams()
-  const mutateParams = new FunctionParams()
-  const factoryName = getName(operation, { type: 'type' })
-
-  const requestType =
-    mutate && mutate.variablesType === 'mutate'
-      ? FunctionParams.toObject([
-          ...getASTParams(schemas.pathParams, { typed: true }),
-          {
-            name: 'params',
-            type: `${factoryName}['queryParams']`,
-            enabled: !!schemas.queryParams?.name,
-            required: isRequired(schemas.queryParams?.schema),
-          },
-          {
-            name: 'headers',
-            type: `${factoryName}['headerParams']`,
-            enabled: !!schemas.headerParams?.name,
-            required: isRequired(schemas.headerParams?.schema),
-          },
-          {
-            name: 'data',
-            type: `${factoryName}['request']`,
-            enabled: !!schemas.request?.name,
-            required: isRequired(schemas.request?.schema),
-          },
-        ])?.type
-      : schemas.request?.name
-        ? `${factoryName}['request']`
-        : 'never'
-
-  const client = {
-    method: operation.method,
-    path: new URLPath(operation.path),
-    generics: [`${factoryName}["data"]`, `${factoryName}["error"]`, requestType ? `${factoryName}["request"]` : 'void'].join(', '),
-    withQueryParams: !!schemas.queryParams?.name,
-    withData: !!schemas.request?.name,
-    withPathParams: !!schemas.pathParams?.name,
-    withHeaders: !!schemas.headerParams?.name,
-    contentType,
-  }
-  const hook = {
-    name: 'useMutation',
-    generics: [`${factoryName}['response']`, `${factoryName}["error"]`, requestType ? `${requestType}` : 'void'].join(', '),
-  }
-
-  const resultGenerics = [
-    `${factoryName}["response"]`,
-    `${factoryName}["error"]`,
-    mutate && mutate?.variablesType === 'mutate' ? requestType : `${factoryName}["request"]`,
-  ]
-
-  if (mutate && mutate?.variablesType === 'mutate') {
-    params.add([
-      {
-        name: 'options',
-        type: `{
-      mutation?: UseMutationOptions<${resultGenerics.join(', ')}>,
-      client?: ${factoryName}['client']['parameters']
-  }`,
-        default: '{}',
-      },
-    ])
-
-    mutateParams.add([
-      [
-        ...getASTParams(schemas.pathParams, { typed: false }),
-        {
-          name: 'params',
-          enabled: client.withQueryParams,
-          required: isRequired(schemas.queryParams?.schema),
-        },
-        {
-          name: 'headers',
-          enabled: client.withHeaders,
-          required: isRequired(schemas.headerParams?.schema),
-        },
-        {
-          name: 'data',
-          enabled: !!schemas.request?.name,
-          required: isRequired(schemas.request?.schema),
-        },
-      ],
-    ])
-  } else {
-    params.add([
-      ...getASTParams(schemas.pathParams, { typed: true }),
-      {
-        name: 'params',
-        type: `${factoryName}['queryParams']`,
-        enabled: client.withQueryParams,
-        required: isRequired(schemas.queryParams?.schema),
-      },
-      {
-        name: 'headers',
-        type: `${factoryName}['headerParams']`,
-        enabled: client.withHeaders,
-        required: isRequired(schemas.headerParams?.schema),
-      },
-      {
-        name: 'options',
-        type: `{
-      mutation?: UseMutationOptions<${resultGenerics.join(', ')}>,
-      client?: ${factoryName}['client']['parameters']
-  }`,
-        default: '{}',
-      },
-    ])
+  })
 
-    mutateParams.add([
-      {
-        name: 'data',
-        enabled: !!schemas.request?.name,
-        required: isRequired(schemas.request?.schema),
-      },
-    ])
-  }
-
-  if (!mutate) {
-    return null
-  }
+  const TRequest = mutationParams.toConstructor({ valueAsType: true })
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
+  const generics = [TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error', `{${TRequest}}`].join(', ')
 
   return (
-    <>
-      <Template
+    <File.Source name={name} isExportable isIndexable>
+      <Function
         name={name}
-        JSDoc={{ comments: getComments(operation) }}
-        client={client}
-        hook={hook}
-        params={params.toString()}
-        mutateParams={mutateParams.toString()}
-        dataReturnType={dataReturnType}
-      />
-    </>
-  )
-}
-
-type FileProps = {
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  templates?: Templates
-}
-
-Mutation.File = function ({ ...props }: FileProps): ReactNode {
-  const templates = { ...defaultTemplates, ...props.templates }
-
-  const Template = templates.default
-  const RootTemplate = templates.root
-
-  return (
-    <RootTemplate>
-      <SchemaType />
-      <Mutation Template={Template} />
-    </RootTemplate>
+        export
+        params={params.toConstructor()}
+        JSDoc={{
+          comments: getComments(operation),
+        }}
+      >
+        {`
+        const { mutation: mutationOptions, client: config = {} } = options ?? {}
+        const mutationKey = mutationOptions?.mutationKey ?? ${mutationKeyName}(${mutationKeyParams.toCall()})
+
+        return useMutation<${generics}>({
+          mutationFn: async(${dataParams.toConstructor()}) => {
+            return ${clientName}(${clientParams.toCall()})
+          },
+          mutationKey,
+          ...mutationOptions
+        })
+    `}
+      </Function>
+    </File.Source>
   )
 }
-
-Mutation.templates = defaultTemplates

package/src/components/MutationKey.tsx

@@ -0,0 +1,48 @@
+import { URLPath } from '@kubb/core/utils'
+import { File, Function, FunctionParams, Type } from '@kubb/react'
+
+import type { Operation } from '@kubb/oas'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import type { ReactNode } from 'react'
+import type { PluginReactQuery } from '../types'
+
+type Props = {
+  name: string
+  typeName: string
+  typeSchemas: OperationSchemas
+  operation: Operation
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  keysFn: ((keys: unknown[]) => unknown[]) | undefined
+}
+
+type GetParamsProps = {
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
+
+function getParams({}: GetParamsProps) {
+  return FunctionParams.factory({})
+}
+
+export function MutationKey({ name, typeSchemas, pathParamsType, operation, typeName, keysFn = (name) => name }: Props): ReactNode {
+  const path = new URLPath(operation.path)
+  const params = getParams({ pathParamsType, typeSchemas })
+  const keys = [JSON.stringify({ url: path.path })].filter(Boolean)
+
+  return (
+    <>
+      <File.Source name={name} isExportable isIndexable>
+        <Function.Arrow name={name} export params={params.toConstructor()} singleLine>
+          {`[${keysFn(keys).join(', ')}] as const`}
+        </Function.Arrow>
+      </File.Source>
+      <File.Source name={typeName} isExportable isIndexable isTypeOnly>
+        <Type name={typeName} export>
+          {`ReturnType<typeof ${name}>`}
+        </Type>
+      </File.Source>
+    </>
+  )
+}
+
+MutationKey.getParams = getParams