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

package/src/components/InfiniteQueryOptions.tsx

@@ -0,0 +1,185 @@
+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
+  paramsType: PluginReactQuery['resolvedOptions']['paramsType']
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+  initialPageParam: Infinite['initialPageParam']
+  cursorParam: Infinite['cursorParam']
+  queryParam: Infinite['queryParam']
+}
+
+type GetParamsProps = {
+  paramsType: PluginReactQuery['resolvedOptions']['paramsType']
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
+
+function getParams({ paramsType, pathParamsType, typeSchemas }: GetParamsProps) {
+  if (paramsType === 'object') {
+    return FunctionParams.factory({
+      data: {
+        mode: 'object',
+        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: '{}',
+      },
+    })
+  }
+
+  return FunctionParams.factory({
+    pathParams: typeSchemas.pathParams?.name
+      ? {
+          mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+          children: getPathParams(typeSchemas.pathParams, { typed: true }),
+          type: typeSchemas.pathParams?.name,
+          optional: isOptional(typeSchemas.pathParams?.schema),
+        }
+      : undefined,
+    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,
+  paramsType,
+  dataReturnType,
+  pathParamsType,
+  queryParam,
+  queryKeyName,
+}: Props): ReactNode {
+  const params = getParams({ paramsType, pathParamsType, typeSchemas })
+  const clientParams = Client.getParams({
+    typeSchemas,
+    paramsType,
+    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()}>
+        {infiniteOverrideParams &&
+          `
+      const queryKey = ${queryKeyName}(${queryKeyParams.toCall()})
+      return infiniteQueryOptions({
+       ${enabledText}
+       queryKey,
+       queryFn: async ({ signal, pageParam }) => {
+          config.signal = signal
+          ${infiniteOverrideParams}
+          return ${clientName}(${clientParams.toCall()})
+       },
+       ${queryOptions.join('\n')}
+      })
+`}
+        {!infiniteOverrideParams &&
+          `
+      const queryKey = ${queryKeyName}(${queryKeyParams.toCall()})
+      return infiniteQueryOptions({
+       ${enabledText}
+       queryKey,
+       queryFn: async ({ signal }) => {
+          config.signal = signal
+          return ${clientName}(${clientParams.toCall()})
+       },
+       ${queryOptions.join('\n')}
+      })
+`}
+      </Function>
+    </File.Source>
+  )
+}
+
+InfiniteQueryOptions.getParams = getParams

package/src/components/Mutation.tsx

@@ -0,0 +1,163 @@
+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
+  typeName: string
+  clientName: string
+  mutationKeyName: string
+  typeSchemas: OperationSchemas
+  operation: Operation
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+  paramsType: PluginReactQuery['resolvedOptions']['paramsType']
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+}
+
+type GetParamsProps = {
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+  typeSchemas: OperationSchemas
+}
+
+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 ? `{${TRequest}}` : undefined]
+    .filter(Boolean)
+    .join(', ')
+
+  return FunctionParams.factory({
+    options: {
+      type: `
+{
+  mutation?: UseMutationOptions<${generics}>,
+  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>'},
+}
+`,
+      default: '{}',
+    },
+  })
+}
+
+export function Mutation({ name, clientName, paramsType, pathParamsType, dataReturnType, typeSchemas, operation, mutationKeyName }: Props): ReactNode {
+  const mutationKeyParams = MutationKey.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
+
+  const params = getParams({
+    pathParamsType,
+    dataReturnType,
+    typeSchemas,
+  })
+
+  const clientParams = Client.getParams({
+    paramsType,
+    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),
+    },
+  })
+
+  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 ? `{${TRequest}}` : undefined]
+    .filter(Boolean)
+    .join(', ')
+
+  return (
+    <File.Source name={name} isExportable isIndexable>
+      <Function
+        name={name}
+        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>
+  )
+}

package/src/components/MutationKey.tsx

@@ -0,0 +1,54 @@
+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, Transformer } from '../types'
+
+type Props = {
+  name: string
+  typeName: string
+  typeSchemas: OperationSchemas
+  operation: Operation
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  transformer: Transformer | undefined
+}
+
+type GetParamsProps = {
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
+
+function getParams({}: GetParamsProps) {
+  return FunctionParams.factory({})
+}
+
+const getTransformer: Transformer = ({ operation }) => {
+  const path = new URLPath(operation.path)
+
+  return [JSON.stringify({ url: path.path })].filter(Boolean)
+}
+
+export function MutationKey({ name, typeSchemas, pathParamsType, operation, typeName, transformer = getTransformer }: Props): ReactNode {
+  const params = getParams({ pathParamsType, typeSchemas })
+  const keys = transformer({ operation, schemas: typeSchemas })
+
+  return (
+    <>
+      <File.Source name={name} isExportable isIndexable>
+        <Function.Arrow name={name} export params={params.toConstructor()} singleLine>
+          {`[${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
+MutationKey.getTransformer = getTransformer

package/src/components/Query.tsx

@@ -0,0 +1,176 @@
+import { File, Function, FunctionParams } from '@kubb/react'
+
+import { type Operation, isOptional } from '@kubb/oas'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import { getComments, getPathParams } from '@kubb/plugin-oas/utils'
+import type { ReactNode } from 'react'
+import type { PluginReactQuery } from '../types.ts'
+import { QueryKey } from './QueryKey.tsx'
+import { QueryOptions } from './QueryOptions.tsx'
+
+type Props = {
+  /**
+   * Name of the function
+   */
+  name: string
+  queryOptionsName: string
+  queryKeyName: string
+  queryKeyTypeName: string
+  typeSchemas: OperationSchemas
+  operation: Operation
+  paramsType: PluginReactQuery['resolvedOptions']['paramsType']
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+}
+
+type GetParamsProps = {
+  paramsType: PluginReactQuery['resolvedOptions']['paramsType']
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+  typeSchemas: OperationSchemas
+}
+
+function getParams({ paramsType, pathParamsType, dataReturnType, typeSchemas }: GetParamsProps) {
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
+
+  if (paramsType === 'object') {
+    return FunctionParams.factory({
+      data: {
+        mode: 'object',
+        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,
+        },
+      },
+      options: {
+        type: `
+{
+  query?: Partial<QueryObserverOptions<${[TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error', 'TData', 'TQueryData', 'TQueryKey'].join(', ')}>>,
+  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>'}
+}
+`,
+        default: '{}',
+      },
+    })
+  }
+
+  return FunctionParams.factory({
+    pathParams: typeSchemas.pathParams?.name
+      ? {
+          mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
+          children: getPathParams(typeSchemas.pathParams, { typed: true }),
+          type: typeSchemas.pathParams?.name,
+          optional: isOptional(typeSchemas.pathParams?.schema),
+        }
+      : undefined,
+    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,
+    options: {
+      type: `
+{
+  query?: Partial<QueryObserverOptions<${[TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error', 'TData', 'TQueryData', 'TQueryKey'].join(', ')}>>,
+  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>'}
+}
+`,
+      default: '{}',
+    },
+  })
+}
+
+export function Query({
+  name,
+  queryKeyTypeName,
+  queryOptionsName,
+  queryKeyName,
+  paramsType,
+  pathParamsType,
+  dataReturnType,
+  typeSchemas,
+  operation,
+}: Props): ReactNode {
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
+  const returnType = `UseQueryResult<${['TData', typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error'].join(', ')}> & { queryKey: TQueryKey }`
+  const generics = [`TData = ${TData}`, `TQueryData = ${TData}`, `TQueryKey extends QueryKey = ${queryKeyTypeName}`]
+
+  const queryKeyParams = QueryKey.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
+  const queryOptionsParams = QueryOptions.getParams({
+    paramsType,
+    pathParamsType,
+    typeSchemas,
+  })
+  const params = getParams({
+    paramsType,
+    pathParamsType,
+    dataReturnType,
+    typeSchemas,
+  })
+
+  const queryOptions = `${queryOptionsName}(${queryOptionsParams.toCall()}) as unknown as QueryObserverOptions`
+
+  return (
+    <File.Source name={name} isExportable isIndexable>
+      <Function
+        name={name}
+        export
+        generics={generics.join(', ')}
+        params={params.toConstructor()}
+        JSDoc={{
+          comments: getComments(operation),
+        }}
+      >
+        {`
+       const { query: queryOptions, client: config = {} } = options ?? {}
+       const queryKey = queryOptions?.queryKey ?? ${queryKeyName}(${queryKeyParams.toCall()})
+
+       const query = useQuery({
+        ...${queryOptions},
+        queryKey,
+        ...queryOptions as unknown as Omit<QueryObserverOptions, "queryKey">
+       }) as ${returnType}
+
+       query.queryKey = queryKey as TQueryKey
+
+       return query
+       `}
+      </Function>
+    </File.Source>
+  )
+}
+
+Query.getParams = getParams

package/src/components/QueryKey.tsx

@@ -0,0 +1,83 @@
+import { URLPath } from '@kubb/core/utils'
+import { getPathParams } from '@kubb/plugin-oas/utils'
+import { File, Function, FunctionParams, Type } from '@kubb/react'
+
+import { type Operation, isOptional } from '@kubb/oas'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import type { ReactNode } from 'react'
+import type { PluginReactQuery, Transformer } from '../types'
+
+type Props = {
+  name: string
+  typeName: string
+  typeSchemas: OperationSchemas
+  operation: Operation
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  transformer: Transformer | undefined
+}
+
+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,
+  })
+}
+
+const getTransformer: Transformer = ({ operation, schemas }) => {
+  const path = new URLPath(operation.path)
+  const keys = [
+    path.toObject({
+      type: 'path',
+      stringify: true,
+    }),
+    schemas.queryParams?.name ? '...(params ? [params] : [])' : undefined,
+    schemas.request?.name ? '...(data ? [data] : [])' : undefined,
+  ].filter(Boolean)
+
+  return keys
+}
+
+export function QueryKey({ name, typeSchemas, pathParamsType, operation, typeName, transformer = getTransformer }: Props): ReactNode {
+  const params = getParams({ pathParamsType, typeSchemas })
+  const keys = transformer({
+    operation,
+    schemas: typeSchemas,
+  })
+
+  return (
+    <>
+      <File.Source name={name} isExportable isIndexable>
+        <Function.Arrow name={name} export params={params.toConstructor()} singleLine>
+          {`[${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>
+    </>
+  )
+}
+
+QueryKey.getParams = getParams
+QueryKey.getTransformer = getTransformer