@kubb/plugin-react-query 3.0.0-alpha.0

package/src/components/QueryImports.tsx

@@ -0,0 +1,167 @@
+import { PackageManager } from '@kubb/core'
+import { File } from '@kubb/react'
+
+import { getImportNames, reactQueryDepRegex } from '../utils.ts'
+
+import type { ReactNode } from 'react'
+
+type TemplateProps = {
+  /**
+   * Path to @tanstack-query
+   */
+  path: string
+  /**
+   * Override the path of 'useQuery'
+   * @default 'path'
+   */
+  hookPath: string | undefined
+  optionsType: string
+  queryOptions: string | undefined
+  resultType: string
+  hookName: string
+  isInfinite: boolean
+}
+
+function Template({ path, hookPath = path, isInfinite, hookName, queryOptions, optionsType, resultType }: TemplateProps): ReactNode {
+  return (
+    <>
+      <File.Import name={[optionsType, resultType]} path={path} isTypeOnly />
+      <File.Import name={[hookName]} path={hookPath} />
+
+      {queryOptions && <File.Import name={[queryOptions].filter(Boolean)} path={path} />}
+      <File.Import name={['QueryKey', 'WithRequired', isInfinite ? 'InfiniteData' : undefined].filter(Boolean)} path={path} isTypeOnly />
+    </>
+  )
+}
+
+type FrameworkProps = Partial<TemplateProps> & {
+  context: {
+    isInfinite: boolean
+    isSuspense: boolean
+  }
+}
+
+const defaultTemplates = {
+  get react() {
+    return function ({ context, hookPath, ...rest }: FrameworkProps): ReactNode {
+      const importNames = getImportNames()
+      const isV5 = new PackageManager().isValidSync(reactQueryDepRegex, '>=5')
+      const { isInfinite, isSuspense } = context
+
+      return (
+        <Template
+          isInfinite={isInfinite}
+          {...(isSuspense ? importNames.querySuspense.react : isInfinite ? importNames.queryInfinite.react : importNames.query.react)}
+          queryOptions={isV5 ? (isInfinite ? 'infiniteQueryOptions' : 'queryOptions') : undefined}
+          hookPath={hookPath}
+          {...rest}
+        />
+      )
+    }
+  },
+  get solid() {
+    return function ({ context, hookPath, ...rest }: FrameworkProps): ReactNode {
+      const importNames = getImportNames()
+      const isV5 = new PackageManager().isValidSync(reactQueryDepRegex, '>=5')
+      const { isInfinite } = context
+
+      return (
+        <Template
+          isInfinite={isInfinite}
+          {...(isInfinite ? importNames.queryInfinite.solid : importNames.query.solid)}
+          queryOptions={isV5 ? (isInfinite ? 'infiniteQueryOptions' : 'queryOptions') : undefined}
+          hookPath={hookPath}
+          {...rest}
+        />
+      )
+    }
+  },
+  get svelte() {
+    return function ({ context, hookPath, ...rest }: FrameworkProps): ReactNode {
+      const importNames = getImportNames()
+      const isV5 = new PackageManager().isValidSync(reactQueryDepRegex, '>=5')
+      const { isInfinite } = context
+
+      return (
+        <Template
+          isInfinite={isInfinite}
+          {...(isInfinite ? importNames.queryInfinite.svelte : importNames.query.svelte)}
+          queryOptions={isV5 ? (isInfinite ? 'infiniteQueryOptions' : 'queryOptions') : undefined}
+          hookPath={hookPath}
+          {...rest}
+        />
+      )
+    }
+  },
+  get vue() {
+    return function ({ context, hookPath, ...rest }: FrameworkProps): ReactNode {
+      const importNames = getImportNames()
+      const isV5 = new PackageManager().isValidSync(reactQueryDepRegex, '>=5')
+      const { isInfinite } = context
+      const path = '@tanstack/vue-query'
+
+      return (
+        <>
+          {isV5 && (
+            <>
+              <Template
+                isInfinite={isInfinite}
+                {...(isInfinite ? importNames.queryInfinite.vue : importNames.query.vue)}
+                queryOptions={isInfinite ? 'infiniteQueryOptions' : 'queryOptions'}
+                hookPath={hookPath}
+                {...rest}
+              />
+              <File.Import name={['QueryObserverOptions']} path={path} isTypeOnly />
+            </>
+          )}
+
+          {!isV5 && isInfinite && (
+            <>
+              <File.Import name={[importNames.queryInfinite.vue.resultType]} path={path} isTypeOnly />
+              <File.Import name={[importNames.queryInfinite.vue.optionsType]} path={'@tanstack/vue-query/build/lib/types'} isTypeOnly />
+              <File.Import name={[importNames.queryInfinite.vue.hookName]} path={path} />
+            </>
+          )}
+
+          {!isV5 && !isInfinite && (
+            <>
+              <File.Import name={[importNames.query.vue.resultType]} path={path} isTypeOnly />
+              <File.Import name={[importNames.query.vue.optionsType]} path={'@tanstack/vue-query/build/lib/types'} isTypeOnly />
+              <File.Import name={[importNames.query.vue.hookName]} path={path} />
+            </>
+          )}
+          <File.Import name={['unref']} path={'vue'} />
+          <File.Import name={['MaybeRef']} path={'vue'} isTypeOnly />
+          <File.Import name={['QueryKey', 'WithRequired']} path={path} isTypeOnly />
+        </>
+      )
+    }
+  },
+} as const
+
+type Props = {
+  hookPath: string | undefined
+  isInfinite: boolean
+  /**
+   * Only for React and v5
+   */
+  isSuspense: boolean
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  Template?: React.ComponentType<FrameworkProps>
+}
+
+export function QueryImports({ hookPath, isInfinite, isSuspense, Template = defaultTemplates.react }: Props): ReactNode {
+  return (
+    <Template
+      hookPath={hookPath}
+      context={{
+        isInfinite,
+        isSuspense,
+      }}
+    />
+  )
+}
+
+QueryImports.templates = defaultTemplates

package/src/components/QueryKey.tsx

@@ -0,0 +1,200 @@
+import { FunctionParams, URLPath } from '@kubb/core/utils'
+import { Function, Type, useApp } from '@kubb/react'
+import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
+import { getASTParams } from '@kubb/plugin-oas/utils'
+
+import { isRequired } from '@kubb/oas'
+import type { ReactNode } from 'react'
+import type { PluginReactQuery } from '../types'
+import { pluginTsName } from '@kubb/plugin-ts'
+
+type TemplateProps = {
+  /**
+   * Name of the function
+   */
+  name: string
+  /**
+   * TypeName of the function in PascalCase
+   */
+  typeName: string
+  /**
+   * Parameters/options/props that need to be used
+   */
+  params: string
+  /**
+   * Generics that needs to be added for TypeScript
+   */
+  generics?: string
+  /**
+   * ReturnType(see async for adding Promise type)
+   */
+  returnType?: string
+  /**
+   * Options for JSdocs
+   */
+  JSDoc?: {
+    comments: string[]
+  }
+  keys?: string
+}
+
+function Template({ name, typeName, params, generics, returnType, JSDoc, keys }: TemplateProps): ReactNode {
+  return (
+    <>
+      <Function.Arrow name={name} export generics={generics} params={params} returnType={returnType} singleLine JSDoc={JSDoc}>
+        {`[${keys}] as const`}
+      </Function.Arrow>
+
+      <Type name={typeName} export>
+        {`ReturnType<typeof ${name}>`}
+      </Type>
+    </>
+  )
+}
+
+type FrameworkProps = TemplateProps & {
+  context: {
+    factory: {
+      name: 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 ({ context, ...rest }: FrameworkProps): ReactNode {
+      const { factory } = context
+
+      const {
+        plugin: {
+          options: { pathParamsType, query },
+        },
+      } = useApp<PluginReactQuery>()
+      const { getSchemas } = useOperationManager()
+      const operation = useOperation()
+
+      const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
+      const path = new URLPath(operation.path)
+      const params = new FunctionParams()
+      const withQueryParams = !!schemas.queryParams?.name
+      const withRequest = !!schemas.request?.name
+
+      params.add([
+        ...(pathParamsType === 'object'
+          ? [
+              getASTParams(schemas.pathParams, {
+                typed: true,
+                override: (item) => ({
+                  ...item,
+                  type: `MaybeRef<${item.type}>`,
+                }),
+              }),
+            ]
+          : getASTParams(schemas.pathParams, {
+              typed: true,
+              override: (item) => ({
+                ...item,
+                type: `MaybeRef<${item.type}>`,
+              }),
+            })),
+        {
+          name: 'params',
+          type: `MaybeRef<${`${factory.name}["queryParams"]`}>`,
+          enabled: withQueryParams,
+          required: isRequired(schemas.queryParams?.schema),
+        },
+        {
+          name: 'request',
+          type: `MaybeRef<${`${factory.name}["request"]`}>`,
+          enabled: withRequest,
+          required: isRequired(schemas.request?.schema),
+        },
+      ])
+
+      const keys = [
+        path.toObject({
+          type: 'path',
+          stringify: true,
+          replacer: (pathParam) => `unref(${pathParam})`,
+        }),
+        withQueryParams ? '...(params ? [params] : [])' : undefined,
+        withRequest ? '...(request ? [request] : [])' : undefined,
+      ].filter(Boolean)
+
+      return <Template {...rest} params={params.toString()} keys={keys.join(', ')} />
+    }
+  },
+} as const
+
+type Props = {
+  name: string
+  typeName: string
+  keysFn: (keys: unknown[]) => unknown[]
+  factory: {
+    name: string
+  }
+  /**
+   * This will make it possible to override the default behaviour.
+   */
+  Template?: React.ComponentType<FrameworkProps>
+}
+
+export function QueryKey({ name, typeName, factory, keysFn, Template = defaultTemplates.react }: Props): ReactNode {
+  const {
+    plugin: {
+      options: { pathParamsType },
+    },
+  } = useApp<PluginReactQuery>()
+  const { getSchemas } = useOperationManager()
+  const operation = useOperation()
+
+  const schemas = getSchemas(operation, { pluginKey: [pluginTsName], type: 'type' })
+  const path = new URLPath(operation.path)
+  const params = new FunctionParams()
+  const withQueryParams = !!schemas.queryParams?.name
+  const withRequest = !!schemas.request?.name
+
+  params.add([
+    ...(pathParamsType === 'object' ? [getASTParams(schemas.pathParams, { typed: true })] : getASTParams(schemas.pathParams, { typed: true })),
+    {
+      name: 'params',
+      type: `${factory.name}["queryParams"]`,
+      enabled: withQueryParams,
+      required: isRequired(schemas.queryParams?.schema),
+    },
+    {
+      name: 'data',
+      type: `${factory.name}["request"]`,
+      enabled: withRequest,
+      required: isRequired(schemas.request?.schema),
+    },
+  ])
+
+  const keys = [
+    path.toObject({
+      type: 'path',
+      stringify: true,
+    }),
+    withQueryParams ? '...(params ? [params] : [])' : undefined,
+    withRequest ? '...(data ? [data] : [])' : undefined,
+  ].filter(Boolean)
+
+  return <Template typeName={typeName} name={name} params={params.toString()} keys={keysFn(keys).join(', ')} context={{ factory }} />
+}
+
+QueryKey.templates = defaultTemplates