@kubb/plugin-react-query 3.0.0-alpha.14 → 3.0.0-alpha.16

package/src/components/QueryOptions.tsx

@@ -1,485 +1,84 @@
-import { PackageManager } from '@kubb/core'
-import transformers from '@kubb/core/transformers'
-import { FunctionParams, URLPath } from '@kubb/core/utils'
-import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
-import { getASTParams } from '@kubb/plugin-oas/utils'
-import { pluginZodName } from '@kubb/plugin-zod'
-import { File, Function, useApp } from '@kubb/react'
+import { getPathParams } from '@kubb/plugin-oas/utils'
+import { File, Function, FunctionParams } from '@kubb/react'
 
-import { isRequired } from '@kubb/oas'
-import type { HttpMethod } from '@kubb/oas'
-import { pluginTsName } from '@kubb/plugin-ts'
 import type { ReactNode } from 'react'
-import type { Infinite, PluginReactQuery, Suspense } from '../types.ts'
-import { reactQueryDepRegex } from '../utils.ts'
 
-type TemplateProps = {
-  /**
-   * Name of the function
-   */
+import { isOptional } from '@kubb/oas'
+import { Client } from '@kubb/plugin-client/components'
+import type { OperationSchemas } from '@kubb/plugin-oas'
+import type { PluginReactQuery } from '../types.ts'
+import { QueryKey } from './QueryKey.tsx'
+
+type Props = {
   name: string
-  /**
-   * Parameters/options/props that need to be used
-   */
-  params: string
-  /**
-   * Options for JSdocs
-   */
-  JSDoc?: {
-    comments: string[]
-  }
-  hook: {
-    queryKey: string
-    children?: string
-  }
-  client: {
-    generics: string
-    method: HttpMethod
-    path: URLPath
-    withQueryParams: boolean
-    withPathParams: boolean
-    withData: boolean
-    withHeaders: boolean
-    contentType: string
-  }
-  infinite: Infinite | false
-  dataReturnType: NonNullable<PluginReactQuery['options']['dataReturnType']>
-  parser: string | undefined
+  clientName: string
+  queryKeyName: string
+  typeSchemas: OperationSchemas
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
 }
 
-function Template({ name, params, JSDoc, hook, client, infinite, dataReturnType, parser }: TemplateProps): ReactNode {
-  const isV5 = new PackageManager().isValidSync(reactQueryDepRegex, '>=5')
-  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 && !infinite ? 'params' : undefined,
-    client.withData && !isFormData ? 'data' : undefined,
-    client.withData && isFormData ? 'data: formData' : undefined,
-    headers.length ? `headers: { ${headers}, ...options.headers }` : undefined,
-    '...options',
-    client.withQueryParams && !!infinite
-      ? `params: {
-      ...params,
-      ['${infinite.queryParam}']: pageParam,
-      ...(options.params || {}),
-    }`
-      : undefined,
-  ].filter(Boolean)
+type GetParamsProps = {
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  typeSchemas: OperationSchemas
+}
 
-  const queryOptions = [
-    isV5 && !!infinite ? `initialPageParam: ${infinite.initialPageParam}` : undefined,
-    isV5 && !!infinite && !!infinite.cursorParam ? `getNextPageParam: (lastPage) => lastPage['${infinite.cursorParam}']` : undefined,
-    isV5 && !!infinite && !!infinite.cursorParam ? `getPreviousPageParam: (firstPage) => firstPage['${infinite.cursorParam}']` : undefined,
-    isV5 && !!infinite && !infinite.cursorParam && dataReturnType === 'full'
-      ? 'getNextPageParam: (lastPage, _allPages, lastPageParam) => Array.isArray(lastPage.data) && lastPage.data.length === 0 ? undefined : lastPageParam + 1'
+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,
-    isV5 && !!infinite && !infinite.cursorParam && dataReturnType === 'data'
-      ? 'getNextPageParam: (lastPage, _allPages, lastPageParam) => Array.isArray(lastPage) && lastPage.length === 0 ? undefined : lastPageParam + 1'
+    params: typeSchemas.queryParams?.name
+      ? {
+          type: typeSchemas.queryParams?.name,
+          optional: isOptional(typeSchemas.queryParams?.schema),
+        }
       : undefined,
-    isV5 && !!infinite && !infinite.cursorParam
-      ? 'getPreviousPageParam: (_firstPage, _allPages, firstPageParam) => firstPageParam <= 1 ? undefined : firstPageParam - 1'
+    headers: typeSchemas.headerParams?.name
+      ? {
+          type: typeSchemas.headerParams?.name,
+          optional: isOptional(typeSchemas.headerParams?.schema),
+        }
       : undefined,
-  ].filter(Boolean)
-
-  const resolvedClientOptions = `${transformers.createIndent(4)}${clientOptions.join(`,\n${transformers.createIndent(4)}`)}`
-  const resolvedQueryOptions = `${transformers.createIndent(4)}${queryOptions.join(`,\n${transformers.createIndent(4)}`)}`
-
-  let returnRes = parser ? `return ${parser}(res.data)` : 'return res.data'
-
-  if (dataReturnType === 'full') {
-    returnRes = parser ? `return {...res, data: ${parser}(res.data)}` : 'return res'
-  }
-
-  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
-
-  if (infinite) {
-    if (isV5) {
-      return (
-        <File.Source name={name} isExportable isIndexable>
-          <Function name={name} export params={params} JSDoc={JSDoc}>
-            {`
-       const queryKey = ${hook.queryKey}
-
-       return infiniteQueryOptions({
-         queryKey,
-         queryFn: async ({ pageParam }) => {
-          ${hook.children || ''}
-          ${formData || ''}
-           const res = await client<${client.generics}>({
-            ${resolvedClientOptions}
-           })
-
-           ${returnRes}
-         },
-         ${resolvedQueryOptions}
-       })
-
-       `}
-          </Function>
-        </File.Source>
-      )
-    }
-
-    return (
-      <File.Source name={name} isExportable isIndexable>
-        <Function name={name} export params={params} JSDoc={JSDoc}>
-          {`
-         const queryKey = ${hook.queryKey}
-
-         return {
-           queryKey,
-           queryFn: async ({ pageParam }) => {
-             ${hook.children || ''}
-             ${formData || ''}
-             const res = await client<${client.generics}>({
-              ${resolvedClientOptions}
-             })
-
-             ${returnRes}
-           },
-           ${resolvedQueryOptions}
-         }
-
-         `}
-        </Function>
-      </File.Source>
-    )
-  }
-
-  if (isV5) {
-    return (
-      <File.Source name={name} isExportable isIndexable>
-        <Function name={name} export params={params} JSDoc={JSDoc}>
-          {`
-   const queryKey = ${hook.queryKey}
-
-   return queryOptions({
-     queryKey,
-     queryFn: async () => {
-       ${hook.children || ''}
-       ${formData || ''}
-       const res = await client<${client.generics}>({
-        ${resolvedClientOptions}
-       })
-
-       ${returnRes}
-     },
-     ${resolvedQueryOptions}
-   })
+    config: {
+      type: typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>',
+      default: '{}',
+    },
+  })
+}
 
-   `}
-        </Function>
-      </File.Source>
-    )
-  }
+export function QueryOptions({ name, clientName, typeSchemas, pathParamsType, queryKeyName }: Props): ReactNode {
+  const params = getParams({ pathParamsType, typeSchemas })
+  const clientParams = Client.getParams({
+    typeSchemas,
+    pathParamsType,
+  })
+  const queryKeyParams = QueryKey.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
 
   return (
     <File.Source name={name} isExportable isIndexable>
-      <Function name={name} export params={params} JSDoc={JSDoc}>
+      <Function name={name} export params={params.toConstructor()}>
         {`
-       const queryKey = ${hook.queryKey}
-
-       return {
-         queryKey,
-         queryFn: async () => {
-           ${hook.children || ''}
-           ${formData || ''}
-           const res = await client<${client.generics}>({
-            ${resolvedClientOptions}
-           })
-
-           ${returnRes}
-         },
-         ${resolvedQueryOptions}
-       }
-
-       `}
+      const queryKey = ${queryKeyName}(${queryKeyParams.toCall()})
+      return queryOptions({
+       queryKey,
+       queryFn: async () => {
+          return ${clientName}(${clientParams.toCall()})
+       },
+      })
+`}
       </Function>
     </File.Source>
   )
 }
 
-type FrameworkProps = TemplateProps & {
-  context: {
-    factory: {
-      name: string
-    }
-    queryKey: string
-  }
-}
-
-const defaultTemplates = {
-  get react() {
-    return function (props: FrameworkProps): ReactNode {
-      return <Template {...props} />
-    }
-  },
-  get solid() {
-    return function (props: FrameworkProps): ReactNode {
-      return <Template {...props} />
-    }
-  },
-  get svelte() {
-    return function (props: FrameworkProps): ReactNode {
-      return <Template {...props} />
-    }
-  },
-  get vue() {
-    return function ({ client, context, ...rest }: FrameworkProps): ReactNode {
-      const { factory, queryKey } = context
-
-      const {
-        plugin: {
-          options: { pathParamsType },
-        },
-      } = useApp<PluginReactQuery>()
-
-      const { getSchemas } = useOperationManager()
-      const operation = useOperation()
-
-      const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-      const params = new FunctionParams()
-      const queryKeyParams = new FunctionParams()
-
-      params.add([
-        ...(pathParamsType === 'object'
-          ? [
-              getASTParams(schemas.pathParams, {
-                typed: true,
-                override: (item) => ({
-                  ...item,
-                  name: item.name ? `ref${transformers.pascalCase(item.name)}` : undefined,
-                  type: `MaybeRef<${item.type}>`,
-                }),
-              }),
-            ]
-          : getASTParams(schemas.pathParams, {
-              typed: true,
-              override: (item) => ({
-                ...item,
-                name: item.name ? `ref${transformers.pascalCase(item.name)}` : undefined,
-                type: `MaybeRef<${item.type}>`,
-              }),
-            })),
-        {
-          name: 'refParams',
-          type: `MaybeRef<${schemas.queryParams?.name}>`,
-          enabled: client.withQueryParams,
-          required: isRequired(schemas.queryParams?.schema),
-        },
-        {
-          name: 'refHeaders',
-          type: `MaybeRef<${schemas.headerParams?.name}>`,
-          enabled: client.withHeaders,
-          required: isRequired(schemas.headerParams?.schema),
-        },
-        {
-          name: 'refData',
-          type: `MaybeRef<${schemas.request?.name}>`,
-          enabled: client.withData,
-          required: isRequired(schemas.request?.schema),
-        },
-        {
-          name: 'options',
-          type: `${factory.name}['client']['parameters']`,
-          default: '{}',
-        },
-      ])
-
-      queryKeyParams.add([
-        ...(pathParamsType === 'object'
-          ? [
-              getASTParams(schemas.pathParams, {
-                override: (item) => ({
-                  ...item,
-                  name: item.name ? `ref${transformers.pascalCase(item.name)}` : undefined,
-                }),
-              }),
-            ]
-          : getASTParams(schemas.pathParams, {
-              override: (item) => ({
-                ...item,
-                name: item.name ? `ref${transformers.pascalCase(item.name)}` : undefined,
-              }),
-            })),
-        {
-          name: 'refParams',
-          enabled: client.withQueryParams,
-          required: isRequired(schemas.queryParams?.schema),
-        },
-        {
-          name: 'refData',
-          enabled: client.withData,
-          required: isRequired(schemas.request?.schema),
-        },
-      ])
-
-      const unrefs = params.items
-        .filter((item) => item.enabled)
-        .map((item) => {
-          return item.name ? `const ${transformers.camelCase(item.name.replace('ref', ''))} = unref(${item.name})` : undefined
-        })
-        .join('\n')
-
-      const hook = {
-        queryKey: `${queryKey}(${queryKeyParams.toString()})`,
-        children: unrefs,
-      }
-
-      return <Template {...rest} params={params.toString()} hook={hook} client={client} />
-    }
-  },
-} as const
-
-type Props = {
-  infinite: Infinite | false
-  suspense: Suspense | false
-  factory: {
-    name: string
-  }
-  resultType: string
-  /**
-   * This will make it possible to override the default behaviour.
-   */
-  Template?: React.ComponentType<FrameworkProps>
-  dataReturnType: NonNullable<PluginReactQuery['options']['dataReturnType']>
-}
-
-export function QueryOptions({ factory, infinite, suspense, resultType, dataReturnType, Template = defaultTemplates.react }: Props): ReactNode {
-  const {
-    pluginManager,
-    plugin: {
-      key: pluginKey,
-      options: { parser, pathParamsType, queryOptions },
-    },
-  } = useApp<PluginReactQuery>()
-
-  const { getSchemas } = useOperationManager()
-  const operation = useOperation()
-
-  const contentType = operation.getContentType()
-  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
-  const zodSchemas = getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' })
-
-  const queryKey = pluginManager.resolveName({
-    name: [factory.name, infinite ? 'Infinite' : undefined, suspense ? 'Suspense' : undefined, 'QueryKey'].filter(Boolean).join(''),
-    pluginKey,
-  })
-  const queryOptionsName = pluginManager.resolveName({
-    name: [factory.name, infinite ? 'Infinite' : undefined, suspense ? 'Suspense' : undefined, 'QueryOptions'].filter(Boolean).join(''),
-    pluginKey,
-  })
-
-  const generics = new FunctionParams()
-  const params = new FunctionParams()
-  const queryKeyParams = new FunctionParams()
-
-  const clientGenerics = [`${factory.name}['data']`, `${factory.name}['error']`]
-  // suspense is having 4 generics instead of 5, TQueryData is not needed because data will always be defined
-  const resultGenerics = suspense
-    ? [`${factory.name}['response']`, `${factory.name}["error"]`, 'TData']
-    : [`${factory.name}['response']`, `${factory.name}["error"]`, 'TData', 'TQueryData']
-
-  const client = {
-    withQueryParams: !!schemas.queryParams?.name,
-    withData: !!schemas.request?.name,
-    withPathParams: !!schemas.pathParams?.name,
-    withHeaders: !!schemas.headerParams?.name,
-    method: operation.method,
-    path: new URLPath(operation.path),
-    generics: clientGenerics.toString(),
-    contentType,
-  }
-
-  generics.add([
-    { type: 'TData', default: `${factory.name}["response"]` },
-    suspense ? undefined : { type: 'TQueryData', default: `${factory.name}["response"]` },
-  ])
-
-  params.add([
-    ...(pathParamsType === 'object' ? [getASTParams(schemas.pathParams, { typed: true })] : getASTParams(schemas.pathParams, { typed: true })),
-    {
-      name: 'params',
-      type: `${factory.name}['queryParams']`,
-      enabled: client.withQueryParams,
-      required: isRequired(schemas.queryParams?.schema),
-    },
-    {
-      name: 'headers',
-      type: `${factory.name}['headerParams']`,
-      enabled: client.withHeaders,
-      required: isRequired(schemas.headerParams?.schema),
-    },
-    {
-      name: 'data',
-      type: `${factory.name}['request']`,
-      enabled: client.withData,
-      required: isRequired(schemas.request?.schema),
-    },
-    {
-      name: 'options',
-      type: `${factory.name}['client']['parameters']`,
-      default: '{}',
-    },
-  ])
-
-  queryKeyParams.add([
-    ...(pathParamsType === 'object' ? [getASTParams(schemas.pathParams)] : getASTParams(schemas.pathParams)),
-    {
-      name: 'params',
-      enabled: client.withQueryParams,
-      required: isRequired(schemas.queryParams?.schema),
-    },
-    {
-      name: 'data',
-      enabled: client.withData,
-      required: isRequired(schemas.request?.schema),
-    },
-  ])
-
-  const hook = {
-    queryKey: `${queryKey}(${queryKeyParams.toString()})`,
-  }
-
-  if (!queryOptions) {
-    return null
-  }
-
-  return (
-    <Template
-      name={queryOptionsName}
-      params={params.toString()}
-      client={client}
-      hook={hook}
-      infinite={infinite}
-      dataReturnType={dataReturnType}
-      parser={parser === 'zod' ? `${zodSchemas.response.name}.parse` : undefined}
-      context={{
-        factory,
-        queryKey,
-      }}
-    />
-  )
-}
-
-QueryOptions.templates = defaultTemplates
+QueryOptions.getParams = getParams

package/src/components/SuspenseQuery.tsx

@@ -0,0 +1,129 @@
+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
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+}
+
+type GetParamsProps = {
+  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+  dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+  typeSchemas: OperationSchemas
+}
+
+function getParams({ pathParamsType, dataReturnType, typeSchemas }: GetParamsProps) {
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
+
+  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,
+    options: {
+      type: `
+{
+  query?: Partial<UseSuspenseQueryOptions<${[TData, typeSchemas.errors?.map((item) => item.name).join(' | ') || 'unknown', 'TData', 'TQueryKey'].join(', ')}>>,
+  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>>` : 'Partial<RequestConfig>'}
+}
+`,
+      default: '{}',
+    },
+  })
+}
+
+export function SuspenseQuery({
+  name,
+  queryKeyTypeName,
+  queryOptionsName,
+  queryKeyName,
+  pathParamsType,
+  dataReturnType,
+  typeSchemas,
+  operation,
+}: Props): ReactNode {
+  const TData = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
+  const returnType = `UseSuspenseQueryResult<${['TData', typeSchemas.errors?.map((item) => item.name).join(' | ') || 'unknown'].join(', ')}> & { queryKey: TQueryKey }`
+  const generics = [`TData = ${TData}`, `TQueryData = ${TData}`, `TQueryKey extends QueryKey = ${queryKeyTypeName}`]
+
+  const queryKeyParams = QueryKey.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
+  const queryOptionsParams = QueryOptions.getParams({
+    pathParamsType,
+    typeSchemas,
+  })
+  const params = getParams({
+    pathParamsType,
+    dataReturnType,
+    typeSchemas,
+  })
+
+  const queryOptions = `${queryOptionsName}(${queryOptionsParams.toCall()}) as unknown as UseSuspenseQueryOptions`
+
+  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 = useSuspenseQuery({
+        ...${queryOptions},
+        queryKey,
+        ...queryOptions as unknown as Omit<UseSuspenseQueryOptions, "queryKey">
+       }) as ${returnType}
+
+       query.queryKey = queryKey as TQueryKey
+
+       return query
+       `}
+      </Function>
+    </File.Source>
+  )
+}
+
+SuspenseQuery.getParams = getParams

package/src/components/index.ts

@@ -2,3 +2,6 @@ export { Mutation } from './Mutation.tsx'
 export { Query } from './Query.tsx'
 export { QueryKey } from './QueryKey.tsx'
 export { QueryOptions } from './QueryOptions.tsx'
+export { InfiniteQueryOptions } from './InfiniteQueryOptions.tsx'
+export { InfiniteQuery } from './InfiniteQuery.tsx'
+export { SuspenseQuery } from './SuspenseQuery.tsx'