@kubb/plugin-react-query 5.0.0-alpha.9 → 5.0.0-beta.10

package/package.json

@@ -1,35 +1,53 @@
 {
   "name": "@kubb/plugin-react-query",
-  "version": "5.0.0-alpha.9",
-  "description": "React Query hooks generator plugin for Kubb, creating type-safe API client hooks from OpenAPI specifications for React applications.",
+  "version": "5.0.0-beta.10",
+  "description": "Generate type-safe TanStack Query (React Query) hooks from your OpenAPI specification. Covers useQuery, useMutation, useInfiniteQuery, and queryOptions with full TypeScript support.",
   "keywords": [
-    "react-query",
-    "tanstack-query",
-    "react",
-    "react-hooks",
-    "hooks",
+    "code-generation",
+    "codegen",
     "data-fetching",
-    "api-client",
-    "sdk-generator",
-    "typescript",
-    "type-safe",
+    "hooks",
+    "kubb",
     "openapi",
+    "react",
+    "react-query",
     "swagger",
-    "oas",
-    "code-generator",
-    "codegen",
-    "plugins",
-    "kubb"
+    "tanstack",
+    "tanstack-query",
+    "typescript",
+    "use-mutation",
+    "use-query"
   ],
+  "license": "MIT",
+  "author": "stijnvanhulle",
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/kubb-labs/kubb.git",
+    "url": "git+https://github.com/kubb-labs/plugins.git",
     "directory": "packages/plugin-react-query"
   },
-  "license": "MIT",
-  "author": "stijnvanhulle",
-  "sideEffects": false,
+  "files": [
+    "src",
+    "dist",
+    "extension.yaml",
+    "!/**/**.test.**",
+    "!/**/__tests__/**",
+    "!/**/__snapshots__/**"
+  ],
   "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "typesVersions": {
+    "*": {
+      "components": [
+        "./dist/components.d.ts"
+      ],
+      "generators": [
+        "./dist/generators.d.ts"
+      ]
+    }
+  },
   "exports": {
     ".": {
       "import": "./dist/index.js",
@@ -45,24 +63,26 @@
     },
     "./package.json": "./package.json"
   },
-  "types": "./dist/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "components": [
-        "./dist/components.d.ts"
-      ],
-      "generators": [
-        "./dist/generators.d.ts"
-      ]
-    }
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "dependencies": {
+    "@kubb/core": "5.0.0-beta.10",
+    "@kubb/renderer-jsx": "5.0.0-beta.10",
+    "remeda": "^2.34.0",
+    "@kubb/plugin-client": "5.0.0-beta.10",
+    "@kubb/plugin-ts": "5.0.0-beta.10",
+    "@kubb/plugin-zod": "5.0.0-beta.10"
+  },
+  "devDependencies": {
+    "@internals/shared": "0.0.0",
+    "@internals/tanstack-query": "0.0.0",
+    "@internals/utils": "0.0.0"
+  },
+  "peerDependencies": {
+    "@kubb/renderer-jsx": "5.0.0-beta.10"
   },
-  "files": [
-    "src",
-    "dist",
-    "!/**/**.test.**",
-    "!/**/__tests__/**",
-    "!/**/__snapshots__/**"
-  ],
   "size-limit": [
     {
       "path": "./dist/*.js",
@@ -70,39 +90,14 @@
       "gzip": true
     }
   ],
-  "dependencies": {
-    "@kubb/fabric-core": "0.14.0",
-    "@kubb/react-fabric": "0.14.0",
-    "remeda": "^2.33.6",
-    "@kubb/core": "5.0.0-alpha.9",
-    "@kubb/oas": "5.0.0-alpha.9",
-    "@kubb/plugin-client": "5.0.0-alpha.9",
-    "@kubb/plugin-oas": "5.0.0-alpha.9",
-    "@kubb/plugin-ts": "5.0.0-alpha.9",
-    "@kubb/plugin-zod": "5.0.0-alpha.9"
-  },
-  "peerDependencies": {
-    "@kubb/fabric-core": "0.14.0",
-    "@kubb/react-fabric": "0.14.0"
-  },
   "engines": {
     "node": ">=22"
   },
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  },
-  "main": "./dist/index.cjs",
-  "module": "./dist/index.js",
-  "devDependencies": {
-    "@internals/tanstack-query": "0.0.0",
-    "@internals/utils": "0.0.0"
-  },
   "scripts": {
     "build": "tsdown && size-limit",
     "clean": "npx rimraf ./dist",
-    "lint": "bun biome lint .",
-    "lint:fix": "bun biome lint --fix --unsafe .",
+    "lint": "oxlint .",
+    "lint:fix": "oxlint --fix .",
     "release": "pnpm publish --no-git-check",
     "release:canary": "bash ../../.github/canary.sh && node ../../scripts/build.js canary && pnpm publish --no-git-check",
     "start": "tsdown --watch",

package/src/components/InfiniteQuery.tsx

@@ -1,22 +1,20 @@
-import { isAllOptional, isOptional, type Operation } from '@kubb/oas'
-import type { OperationSchemas } from '@kubb/plugin-oas'
-import { getComments, getPathParams } from '@kubb/plugin-oas/utils'
-import { File, Function, FunctionParams } from '@kubb/react-fabric'
-import type { FabricReactNode } from '@kubb/react-fabric/types'
+import { getOperationParameters } from '@internals/shared'
+import { ast } from '@kubb/core'
+import type { ResolverTs } from '@kubb/plugin-ts'
+import { functionPrinter } from '@kubb/plugin-ts'
+import { File, Function } from '@kubb/renderer-jsx'
+import type { KubbReactNode } from '@kubb/renderer-jsx/types'
 import type { Infinite, PluginReactQuery } from '../types.ts'
-import { QueryKey } from './QueryKey.tsx'
-import { QueryOptions } from './QueryOptions.tsx'
+import { buildQueryKeyParams, getComments, resolveErrorNames } from '../utils.ts'
+import { getQueryOptionsParams } from './QueryOptions.tsx'
 
 type Props = {
-  /**
-   * Name of the function
-   */
   name: string
   queryOptionsName: string
   queryKeyName: string
   queryKeyTypeName: string
-  typeSchemas: OperationSchemas
-  operation: Operation
+  node: ast.OperationNode
+  tsResolver: ResolverTs
   paramsCasing: PluginReactQuery['resolvedOptions']['paramsCasing']
   paramsType: PluginReactQuery['resolvedOptions']['paramsType']
   pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
@@ -26,99 +24,41 @@ type Props = {
   customOptions: PluginReactQuery['resolvedOptions']['customOptions']
 }
 
-type GetParamsProps = {
-  paramsType: PluginReactQuery['resolvedOptions']['paramsType']
-  paramsCasing: PluginReactQuery['resolvedOptions']['paramsCasing']
-  pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
-  typeSchemas: OperationSchemas
-  pageParamGeneric: string
-}
+const declarationPrinter = functionPrinter({ mode: 'declaration' })
+const callPrinter = functionPrinter({ mode: 'call' })
 
-function getParams({ paramsType, paramsCasing, pathParamsType, typeSchemas, pageParamGeneric }: GetParamsProps) {
-  if (paramsType === 'object') {
-    const pathParams = getPathParams(typeSchemas.pathParams, {
-      typed: true,
-      casing: paramsCasing,
-    })
-
-    const children = {
-      ...pathParams,
-      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,
-    }
-
-    // Check if all children are optional or undefined
-    const allChildrenAreOptional = Object.values(children).every((child) => !child || child.optional)
-
-    return FunctionParams.factory({
-      data: {
-        mode: 'object',
-        children,
-        default: allChildrenAreOptional ? '{}' : undefined,
-      },
-      options: {
-        type: `
-{
-  query?: Partial<InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, ${pageParamGeneric}>> & { client?: QueryClient },
-  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>> & { client?: Client }` : 'Partial<RequestConfig> & { client?: Client }'}
-}
-`,
-        default: '{}',
-      },
-    })
-  }
-
-  return FunctionParams.factory({
-    pathParams: typeSchemas.pathParams?.name
-      ? {
-          mode: pathParamsType === 'object' ? 'object' : 'inlineSpread',
-          children: getPathParams(typeSchemas.pathParams, { typed: true, casing: paramsCasing }),
-          default: isAllOptional(typeSchemas.pathParams?.schema) ? '{}' : undefined,
-        }
-      : 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: `
-{
+function buildInfiniteQueryParamsNode(
+  node: ast.OperationNode,
+  options: {
+    paramsType: PluginReactQuery['resolvedOptions']['paramsType']
+    paramsCasing: PluginReactQuery['resolvedOptions']['paramsCasing']
+    pathParamsType: PluginReactQuery['resolvedOptions']['pathParamsType']
+    dataReturnType: PluginReactQuery['resolvedOptions']['client']['dataReturnType']
+    resolver: ResolverTs
+    pageParamGeneric: string
+  },
+): ast.FunctionParametersNode {
+  const { paramsType, paramsCasing, pathParamsType, resolver, pageParamGeneric } = options
+  const requestName = node.requestBody?.content?.[0]?.schema ? resolver.resolveDataName(node) : undefined
+
+  const optionsParam = ast.createFunctionParameter({
+    name: 'options',
+    type: ast.createParamsType({
+      variant: 'reference',
+      name: `{
   query?: Partial<InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, ${pageParamGeneric}>> & { client?: QueryClient },
-  client?: ${typeSchemas.request?.name ? `Partial<RequestConfig<${typeSchemas.request?.name}>> & { client?: Client }` : 'Partial<RequestConfig> & { client?: Client }'}
-}
-`,
-      default: '{}',
-    },
+  client?: ${requestName ? `Partial<RequestConfig<${requestName}>> & { client?: Client }` : 'Partial<RequestConfig> & { client?: Client }'}
+}`,
+    }),
+    default: '{}',
+  })
+
+  return ast.createOperationParams(node, {
+    paramsType,
+    pathParamsType: paramsType === 'object' ? 'object' : pathParamsType === 'object' ? 'object' : 'inline',
+    paramsCasing,
+    resolver,
+    extraParams: [optionsParam],
   })
 }
 
@@ -131,14 +71,18 @@ export function InfiniteQuery({
   paramsCasing,
   pathParamsType,
   dataReturnType,
-  typeSchemas,
-  operation,
+  node,
+  tsResolver,
   initialPageParam,
   queryParam,
   customOptions,
-}: Props): FabricReactNode {
-  const responseType = dataReturnType === 'data' ? typeSchemas.response.name : `ResponseConfig<${typeSchemas.response.name}>`
-  const errorType = `ResponseErrorConfig<${typeSchemas.errors?.map((item) => item.name).join(' | ') || 'Error'}>`
+}: Props): KubbReactNode {
+  const responseName = tsResolver.resolveResponseName(node)
+  const errorNames = resolveErrorNames(node, tsResolver)
+
+  const responseType = dataReturnType === 'data' ? responseName : `ResponseConfig<${responseName}>`
+  const errorType = `ResponseErrorConfig<${errorNames.length > 0 ? errorNames.join(' | ') : 'Error'}>`
+
   const isInitialPageParamDefined = initialPageParam !== undefined && initialPageParam !== null
   const fallbackPageParamType =
     typeof initialPageParam === 'number'
@@ -153,8 +97,20 @@ export function InfiniteQuery({
         : typeof initialPageParam === 'boolean'
           ? 'boolean'
           : 'unknown'
-  const queryParamType = queryParam && typeSchemas.queryParams?.name ? `${typeSchemas.queryParams?.name}['${queryParam}']` : undefined
+
+  const rawQueryParams = getOperationParameters(node).query
+  const queryParamsTypeName =
+    rawQueryParams.length > 0
+      ? (() => {
+          const groupName = tsResolver.resolveQueryParamsName(node, rawQueryParams[0]!)
+          const individualName = tsResolver.resolveParamName(node, rawQueryParams[0]!)
+          return groupName !== individualName ? groupName : undefined
+        })()
+      : undefined
+
+  const queryParamType = queryParam && queryParamsTypeName ? `${queryParamsTypeName}['${queryParam}']` : undefined
   const pageParamType = queryParamType ? (isInitialPageParamDefined ? `NonNullable<${queryParamType}>` : queryParamType) : fallbackPageParamType
+
   const returnType = 'UseInfiniteQueryResult<TData, TError> & { queryKey: TQueryKey }'
   const generics = [
     `TQueryFnData = ${responseType}`,
@@ -164,46 +120,33 @@ export function InfiniteQuery({
     `TPageParam = ${pageParamType}`,
   ]
 
-  const queryKeyParams = QueryKey.getParams({
-    pathParamsType,
-    typeSchemas,
-    paramsCasing,
-  })
-  const queryOptionsParams = QueryOptions.getParams({
+  const queryKeyParamsNode = buildQueryKeyParams(node, { pathParamsType, paramsCasing, resolver: tsResolver })
+  const queryKeyParamsCall = callPrinter.print(queryKeyParamsNode) ?? ''
+
+  const queryOptionsParamsNode = getQueryOptionsParams(node, { paramsType, paramsCasing, pathParamsType, resolver: tsResolver })
+  const queryOptionsParamsCall = callPrinter.print(queryOptionsParamsNode) ?? ''
+
+  const paramsNode = buildInfiniteQueryParamsNode(node, {
     paramsType,
-    pathParamsType,
-    typeSchemas,
-    paramsCasing,
-  })
-  const params = getParams({
     paramsCasing,
-    paramsType,
     pathParamsType,
-    typeSchemas,
+    dataReturnType,
+    resolver: tsResolver,
     pageParamGeneric: 'TPageParam',
   })
-
-  const queryOptions = `${queryOptionsName}(${queryOptionsParams.toCall()})`
+  const paramsSignature = declarationPrinter.print(paramsNode) ?? ''
 
   return (
     <File.Source name={name} isExportable isIndexable>
-      <Function
-        name={name}
-        export
-        generics={generics.join(', ')}
-        params={params.toConstructor()}
-        JSDoc={{
-          comments: getComments(operation),
-        }}
-      >
+      <Function name={name} export generics={generics.join(', ')} params={paramsSignature} returnType={undefined} JSDoc={{ comments: getComments(node) }}>
         {`
        const { query: queryConfig = {}, client: config = {} } = options ?? {}
        const { client: queryClient, ...resolvedOptions } = queryConfig
-       const queryKey = resolvedOptions?.queryKey ?? ${queryKeyName}(${queryKeyParams.toCall()})
-       ${customOptions ? `const customOptions = ${customOptions.name}({ hookName: '${name}', operationId: '${operation.getOperationId()}' })` : ''}
+       const queryKey = resolvedOptions?.queryKey ?? ${queryKeyName}(${queryKeyParamsCall})
+       ${customOptions ? `const customOptions = ${customOptions.name}({ hookName: '${name}', operationId: '${node.operationId}' })` : ''}
 
        const query = useInfiniteQuery({
-        ...${queryOptions},${customOptions ? '\n...customOptions,' : ''}
+        ...${queryOptionsName}(${queryOptionsParamsCall}),${customOptions ? '\n...customOptions,' : ''}
         ...resolvedOptions,
         queryKey,
        } as unknown as InfiniteQueryObserverOptions<TQueryFnData, TError, TData, TQueryKey, TPageParam>, queryClient) as ${returnType}
@@ -216,5 +159,3 @@ export function InfiniteQuery({
     </File.Source>
   )
 }
-
-InfiniteQuery.getParams = getParams