@kubb/plugin-react-query 3.0.0-alpha.1 → 3.0.0-alpha.11

package/src/OperationGenerator.tsx

@@ -3,7 +3,6 @@ import { Oas } from '@kubb/plugin-oas/components'
 import { App, createRoot } from '@kubb/react'
 
 import { Mutation } from './components/Mutation.tsx'
-import { Operations } from './components/Operations.tsx'
 import { Query } from './components/Query.tsx'
 import { QueryKey } from './components/QueryKey.tsx'
 import { QueryOptions } from './components/QueryOptions.tsx'
@@ -14,34 +13,6 @@ import { QueryImports } from './components/QueryImports.tsx'
 import type { FileMeta, PluginReactQuery } from './types.ts'
 
 export class OperationGenerator extends Generator<PluginReactQuery['resolvedOptions'], PluginReactQuery, FileMeta> {
-  async all(operations: Operation[]): OperationMethodResult<FileMeta> {
-    const { pluginManager, oas, plugin, mode } = this.context
-
-    const root = createRoot({
-      logger: pluginManager.logger,
-    })
-
-    const templates = {
-      mutation: Mutation.templates,
-      query: Query.templates,
-      queryOptions: QueryOptions.templates,
-      queryKey: QueryKey.templates,
-      queryImports: QueryImports.templates,
-      operations: Operations.templates,
-      ...this.options.templates,
-    }
-
-    root.render(
-      <App pluginManager={pluginManager} plugin={plugin} mode={mode}>
-        <Oas oas={oas} operations={operations} generator={this}>
-          {templates.operations && <Operations.File templates={templates.operations} />}
-        </Oas>
-      </App>,
-    )
-
-    return root.files
-  }
-
   async operation(operation: Operation, options: PluginReactQuery['resolvedOptions']): OperationMethodResult<FileMeta> {
     const { oas, pluginManager, plugin, mode } = this.context
 

package/src/__snapshots__/mutateAsQuery/updatePetWithForm.ts

@@ -1,9 +1,10 @@
 import client from "@kubb/plugin-client/client";
-import { useQuery } from "@tanstack/react-query";
 import type { UseBaseQueryOptions, UseQueryResult, QueryKey, WithRequired } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
  type UpdatePetWithFormClient = typeof client<UpdatePetWithFormMutationResponse, UpdatePetWithForm405, UpdatePetWithFormMutationRequest>;
-type UpdatePetWithForm = {
+
+ type UpdatePetWithForm = {
     data: UpdatePetWithFormMutationResponse;
     error: UpdatePetWithForm405;
     request: UpdatePetWithFormMutationRequest;
@@ -16,14 +17,17 @@ type UpdatePetWithForm = {
         return: Awaited<ReturnType<UpdatePetWithFormClient>>;
     };
 };
-export const UpdatePetWithFormQueryKey = ({ petId }: {
+
+ export const updatePetWithFormQueryKey = ({ petId }: {
     petId: UpdatePetWithFormPathParams["petId"];
 }, params?: UpdatePetWithForm["queryParams"], data?: UpdatePetWithForm["request"]) => [{ url: "/pet/:petId", params: { petId: petId } }, ...(params ? [params] : []), ...(data ? [data] : [])] as const;
-export type UpdatePetWithFormQueryKey = ReturnType<typeof UpdatePetWithFormQueryKey>;
-export function UpdatePetWithFormQueryOptions<TData = UpdatePetWithForm["response"], TQueryData = UpdatePetWithForm["response"]>({ petId }: {
+
+ export type UpdatePetWithFormQueryKey = ReturnType<typeof updatePetWithFormQueryKey>;
+
+ export function updatePetWithFormQueryOptions<TData = UpdatePetWithForm["response"], TQueryData = UpdatePetWithForm["response"]>({ petId }: {
     petId: UpdatePetWithFormPathParams["petId"];
 }, params?: UpdatePetWithForm["queryParams"], data?: UpdatePetWithForm["request"], options: UpdatePetWithForm["client"]["parameters"] = {}): WithRequired<UseBaseQueryOptions<UpdatePetWithForm["response"], UpdatePetWithForm["error"], TData, TQueryData>, "queryKey"> {
-    const queryKey = UpdatePetWithFormQueryKey({ petId }, params, data);
+    const queryKey = updatePetWithFormQueryKey({ petId }, params, data);
     return {
         queryKey,
         queryFn: async () => {
@@ -38,7 +42,8 @@ export function UpdatePetWithFormQueryOptions<TData = UpdatePetWithForm["respons
         },
     };
 }
-/**
+
+ /**
  * @summary Updates a pet in the store with form data
  * @link /pet/:petId
  */
@@ -51,9 +56,9 @@ export function updatePetWithForm<TData = UpdatePetWithForm["response"], TQueryD
     queryKey: TQueryKey;
 } {
     const { query: queryOptions, client: clientOptions = {} } = options ?? {};
-    const queryKey = queryOptions?.queryKey ?? UpdatePetWithFormQueryKey({ petId }, params, data);
+    const queryKey = queryOptions?.queryKey ?? updatePetWithFormQueryKey({ petId }, params, data);
     const query = useQuery<UpdatePetWithForm["data"], UpdatePetWithForm["error"], TData, any>({
-        ...UpdatePetWithFormQueryOptions<TData, TQueryData>({ petId }, params, data, clientOptions),
+        ...updatePetWithFormQueryOptions<TData, TQueryData>({ petId }, params, data, clientOptions),
         queryKey,
         ...queryOptions
     }) as UseQueryResult<TData, UpdatePetWithForm["error"]> & {

package/src/__snapshots__/pathParamsTypeInline/getPetById.ts

@@ -1,9 +1,10 @@
 import client from "@kubb/plugin-client/client";
-import { useQuery } from "@tanstack/react-query";
 import type { UseBaseQueryOptions, UseQueryResult, QueryKey, WithRequired } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
  type GetPetByIdClient = typeof client<GetPetByIdQueryResponse, GetPetById400 | GetPetById404, never>;
-type GetPetById = {
+
+ type GetPetById = {
     data: GetPetByIdQueryResponse;
     error: GetPetById400 | GetPetById404;
     request: never;
@@ -16,10 +17,13 @@ type GetPetById = {
         return: Awaited<ReturnType<GetPetByIdClient>>;
     };
 };
-export const GetPetByIdQueryKey = (petId: GetPetByIdPathParams["petId"]) => [{ url: "/pet/:petId", params: { petId: petId } }] as const;
-export type GetPetByIdQueryKey = ReturnType<typeof GetPetByIdQueryKey>;
-export function GetPetByIdQueryOptions<TData = GetPetById["response"], TQueryData = GetPetById["response"]>(petId: GetPetByIdPathParams["petId"], options: GetPetById["client"]["parameters"] = {}): WithRequired<UseBaseQueryOptions<GetPetById["response"], GetPetById["error"], TData, TQueryData>, "queryKey"> {
-    const queryKey = GetPetByIdQueryKey(petId);
+
+ export const getPetByIdQueryKey = (petId: GetPetByIdPathParams["petId"]) => [{ url: "/pet/:petId", params: { petId: petId } }] as const;
+
+ export type GetPetByIdQueryKey = ReturnType<typeof getPetByIdQueryKey>;
+
+ export function getPetByIdQueryOptions<TData = GetPetById["response"], TQueryData = GetPetById["response"]>(petId: GetPetByIdPathParams["petId"], options: GetPetById["client"]["parameters"] = {}): WithRequired<UseBaseQueryOptions<GetPetById["response"], GetPetById["error"], TData, TQueryData>, "queryKey"> {
+    const queryKey = getPetByIdQueryKey(petId);
     return {
         queryKey,
         queryFn: async () => {
@@ -32,7 +36,8 @@ export function GetPetByIdQueryOptions<TData = GetPetById["response"], TQueryDat
         },
     };
 }
-/**
+
+ /**
  * @description Returns a single pet
  * @summary Find pet by ID
  * @link /pet/:petId
@@ -44,9 +49,9 @@ export function getPetById<TData = GetPetById["response"], TQueryData = GetPetBy
     queryKey: TQueryKey;
 } {
     const { query: queryOptions, client: clientOptions = {} } = options ?? {};
-    const queryKey = queryOptions?.queryKey ?? GetPetByIdQueryKey(petId);
+    const queryKey = queryOptions?.queryKey ?? getPetByIdQueryKey(petId);
     const query = useQuery<GetPetById["data"], GetPetById["error"], TData, any>({
-        ...GetPetByIdQueryOptions<TData, TQueryData>(petId, clientOptions),
+        ...getPetByIdQueryOptions<TData, TQueryData>(petId, clientOptions),
         queryKey,
         ...queryOptions
     }) as UseQueryResult<TData, GetPetById["error"]> & {

package/src/__snapshots__/pathParamsTypeObject/getPetById.ts

@@ -1,9 +1,10 @@
 import client from "@kubb/plugin-client/client";
-import { useQuery } from "@tanstack/react-query";
 import type { UseBaseQueryOptions, UseQueryResult, QueryKey, WithRequired } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
  type GetPetByIdClient = typeof client<GetPetByIdQueryResponse, GetPetById400 | GetPetById404, never>;
-type GetPetById = {
+
+ type GetPetById = {
     data: GetPetByIdQueryResponse;
     error: GetPetById400 | GetPetById404;
     request: never;
@@ -16,14 +17,17 @@ type GetPetById = {
         return: Awaited<ReturnType<GetPetByIdClient>>;
     };
 };
-export const GetPetByIdQueryKey = ({ petId }: {
+
+ export const getPetByIdQueryKey = ({ petId }: {
     petId: GetPetByIdPathParams["petId"];
 }) => [{ url: "/pet/:petId", params: { petId: petId } }] as const;
-export type GetPetByIdQueryKey = ReturnType<typeof GetPetByIdQueryKey>;
-export function GetPetByIdQueryOptions<TData = GetPetById["response"], TQueryData = GetPetById["response"]>({ petId }: {
+
+ export type GetPetByIdQueryKey = ReturnType<typeof getPetByIdQueryKey>;
+
+ export function getPetByIdQueryOptions<TData = GetPetById["response"], TQueryData = GetPetById["response"]>({ petId }: {
     petId: GetPetByIdPathParams["petId"];
 }, options: GetPetById["client"]["parameters"] = {}): WithRequired<UseBaseQueryOptions<GetPetById["response"], GetPetById["error"], TData, TQueryData>, "queryKey"> {
-    const queryKey = GetPetByIdQueryKey({ petId });
+    const queryKey = getPetByIdQueryKey({ petId });
     return {
         queryKey,
         queryFn: async () => {
@@ -36,7 +40,8 @@ export function GetPetByIdQueryOptions<TData = GetPetById["response"], TQueryDat
         },
     };
 }
-/**
+
+ /**
  * @description Returns a single pet
  * @summary Find pet by ID
  * @link /pet/:petId
@@ -50,9 +55,9 @@ export function getPetById<TData = GetPetById["response"], TQueryData = GetPetBy
     queryKey: TQueryKey;
 } {
     const { query: queryOptions, client: clientOptions = {} } = options ?? {};
-    const queryKey = queryOptions?.queryKey ?? GetPetByIdQueryKey({ petId });
+    const queryKey = queryOptions?.queryKey ?? getPetByIdQueryKey({ petId });
     const query = useQuery<GetPetById["data"], GetPetById["error"], TData, any>({
-        ...GetPetByIdQueryOptions<TData, TQueryData>({ petId }, clientOptions),
+        ...getPetByIdQueryOptions<TData, TQueryData>({ petId }, clientOptions),
         queryKey,
         ...queryOptions
     }) as UseQueryResult<TData, GetPetById["error"]> & {

package/src/__snapshots__/queryOptions/getPetById.ts

@@ -2,7 +2,8 @@ import client from "@kubb/plugin-client/client";
 import type { UseBaseQueryOptions, QueryKey, WithRequired } from "@tanstack/react-query";
 
  type GetPetByIdClient = typeof client<GetPetByIdQueryResponse, GetPetById400 | GetPetById404, never>;
-type GetPetById = {
+
+ type GetPetById = {
     data: GetPetByIdQueryResponse;
     error: GetPetById400 | GetPetById404;
     request: never;
@@ -15,14 +16,17 @@ type GetPetById = {
         return: Awaited<ReturnType<GetPetByIdClient>>;
     };
 };
-export const GetPetByIdQueryKey = ({ petId }: {
+
+ export const getPetByIdQueryKey = ({ petId }: {
     petId: GetPetByIdPathParams["petId"];
 }) => [{ url: "/pet/:petId", params: { petId: petId } }] as const;
-export type GetPetByIdQueryKey = ReturnType<typeof GetPetByIdQueryKey>;
-export function GetPetByIdQueryOptions<TData = GetPetById["response"], TQueryData = GetPetById["response"]>({ petId }: {
+
+ export type GetPetByIdQueryKey = ReturnType<typeof getPetByIdQueryKey>;
+
+ export function getPetByIdQueryOptions<TData = GetPetById["response"], TQueryData = GetPetById["response"]>({ petId }: {
     petId: GetPetByIdPathParams["petId"];
 }, options: GetPetById["client"]["parameters"] = {}): WithRequired<UseBaseQueryOptions<GetPetById["response"], GetPetById["error"], TData, TQueryData>, "queryKey"> {
-    const queryKey = GetPetByIdQueryKey({ petId });
+    const queryKey = getPetByIdQueryKey({ petId });
     return {
         queryKey,
         queryFn: async () => {

package/src/__snapshots__/queryWithoutQueryOptions/getPetById.ts

@@ -1,9 +1,10 @@
 import client from "@kubb/plugin-client/client";
-import { useQuery } from "@tanstack/react-query";
 import type { UseBaseQueryOptions, UseQueryResult, QueryKey } from "@tanstack/react-query";
+import { useQuery } from "@tanstack/react-query";
 
  type GetPetByIdClient = typeof client<GetPetByIdQueryResponse, GetPetById400 | GetPetById404, never>;
-type GetPetById = {
+
+ type GetPetById = {
     data: GetPetByIdQueryResponse;
     error: GetPetById400 | GetPetById404;
     request: never;
@@ -16,11 +17,14 @@ type GetPetById = {
         return: Awaited<ReturnType<GetPetByIdClient>>;
     };
 };
-export const GetPetByIdQueryKey = ({ petId }: {
+
+ export const getPetByIdQueryKey = ({ petId }: {
     petId: GetPetByIdPathParams["petId"];
 }) => [{ url: "/pet/:petId", params: { petId: petId } }] as const;
-export type GetPetByIdQueryKey = ReturnType<typeof GetPetByIdQueryKey>;
-/**
+
+ export type GetPetByIdQueryKey = ReturnType<typeof getPetByIdQueryKey>;
+
+ /**
  * @description Returns a single pet
  * @summary Find pet by ID
  * @link /pet/:petId
@@ -34,9 +38,9 @@ export function getPetById<TData = GetPetById["response"], TQueryData = GetPetBy
     queryKey: TQueryKey;
 } {
     const { query: queryOptions, client: clientOptions = {} } = options ?? {};
-    const queryKey = queryOptions?.queryKey ?? GetPetByIdQueryKey({ petId });
+    const queryKey = queryOptions?.queryKey ?? getPetByIdQueryKey({ petId });
     const query = useQuery<GetPetById["data"], GetPetById["error"], TData, any>({
-        ...GetPetByIdQueryOptions<TData, TQueryData>({ petId }, clientOptions),
+        ...getPetByIdQueryOptions<TData, TQueryData>({ petId }, clientOptions),
         queryKey,
         ...queryOptions
     }) as UseQueryResult<TData, GetPetById["error"]> & {

package/src/__snapshots__/variablesTypeMutate/deletePet.ts

@@ -2,7 +2,8 @@ import client from "@kubb/plugin-client/client";
 import type { QueryKey } from "@tanstack/react-query";
 
  type DeletePetClient = typeof client<DeletePetMutationResponse, DeletePet400, never>;
-type DeletePet = {
+
+ type DeletePet = {
     data: DeletePetMutationResponse;
     error: DeletePet400;
     request: never;
@@ -15,7 +16,9 @@ type DeletePet = {
         return: Awaited<ReturnType<DeletePetClient>>;
     };
 };
-export const DeletePetQueryKey = ({ petId }: {
+
+ export const deletePetQueryKey = ({ petId }: {
     petId: DeletePetPathParams["petId"];
 }) => [{ url: "/pet/:petId", params: { petId: petId } }] as const;
-export type DeletePetQueryKey = ReturnType<typeof DeletePetQueryKey>;
+
+ export type DeletePetQueryKey = ReturnType<typeof deletePetQueryKey>;

package/src/components/Mutation.tsx

@@ -2,7 +2,7 @@ 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 { File, Function, useApp } from '@kubb/react'
 import { pluginTsName } from '@kubb/plugin-ts'
 
 import { SchemaType } from './SchemaType.tsx'
@@ -82,8 +82,9 @@ function Template({ name, params, mutateParams, JSDoc, client, hook, dataReturnT
     : undefined
 
   return (
-    <Function export name={name} params={params} JSDoc={JSDoc}>
-      {`
+    <File.Source name={name} isExportable isIndexable>
+      <Function export name={name} params={params} JSDoc={JSDoc}>
+        {`
          const { mutation: mutationOptions, client: clientOptions = {} } = options ?? {}
 
          return ${hook.name}({
@@ -98,7 +99,8 @@ function Template({ name, params, mutateParams, JSDoc, client, hook, dataReturnT
            },
            ...mutationOptions
          })`}
-    </Function>
+      </Function>
+    </File.Source>
   )
 }
 
@@ -124,32 +126,30 @@ function RootTemplate({ children }: RootTemplateProps) {
   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>
+    <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'} />
+      {children}
+    </File>
   )
 }
 

package/src/components/Query.tsx

@@ -1,7 +1,7 @@
 import { PackageManager } from '@kubb/core'
 import transformers from '@kubb/core/transformers'
 import { FunctionParams, URLPath } from '@kubb/core/utils'
-import { Parser, File, Function, useApp } from '@kubb/react'
+import { File, Function, useApp } from '@kubb/react'
 import { pluginTsName } from '@kubb/plugin-ts'
 import { pluginZodName } from '@kubb/plugin-zod'
 import { useOperation, useOperationManager } from '@kubb/plugin-oas/hooks'
@@ -56,7 +56,7 @@ function Template({ name, generics, returnType, params, JSDoc, hook, infinite }:
 
   if (isV5) {
     return (
-      <>
+      <File.Source name={name} isExportable isIndexable>
         <Function name={name} export generics={generics} returnType={resolvedReturnType} params={params} JSDoc={JSDoc}>
           {`
          const { query: queryOptions, client: clientOptions = {} } = options ?? {}
@@ -74,12 +74,12 @@ function Template({ name, generics, returnType, params, JSDoc, hook, infinite }:
 
          `}
         </Function>
-      </>
+      </File.Source>
     )
   }
 
   return (
-    <>
+    <File.Source name={name} isExportable isIndexable>
       <Function name={name} export generics={generics} returnType={resolvedReturnType} params={params} JSDoc={JSDoc}>
         {`
        const { query: queryOptions, client: clientOptions = {} } = options ?? {}
@@ -97,7 +97,7 @@ function Template({ name, generics, returnType, params, JSDoc, hook, infinite }:
 
        `}
       </Function>
-    </>
+    </File.Source>
   )
 }
 
@@ -547,80 +547,76 @@ Query.File = function ({ templates }: FileProps): ReactNode {
   }
 
   return (
-    <Parser language="typescript">
-      <File<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
-        {parser === 'zod' && <File.Import name={[zodSchemas.response?.name]} root={file.path} path={fileZodSchemas.path} />}
-        <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<FileMeta> baseName={file.baseName} path={file.path} meta={file.meta}>
+      {parser === 'zod' && <File.Import name={[zodSchemas.response?.name]} root={file.path} path={fileZodSchemas.path} />}
+      <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
+      />
 
-        <QueryImports hookPath={typeof query !== 'boolean' ? query.importPath : undefined} Template={Import} isInfinite={false} isSuspense={false} />
-        {!!infinite && (
-          <QueryImports hookPath={typeof query !== 'boolean' ? query.importPath : undefined} Template={Import} isInfinite={true} isSuspense={false} />
-        )}
-        {!!suspense && isV5 && (
-          <QueryImports hookPath={typeof query !== 'boolean' ? query.importPath : undefined} Template={Import} isInfinite={false} isSuspense={true} />
-        )}
-        <File.Source>
-          <SchemaType />
-          <Query
-            factory={factory}
-            Template={Template}
-            QueryKeyTemplate={QueryKeyTemplate}
-            QueryOptionsTemplate={QueryOptionsTemplate}
-            infinite={false}
-            suspense={false}
-            query={query}
-            queryOptions={queryOptions}
-            hookName={importNames.query['react'].hookName}
-            resultType={importNames.query['react'].resultType}
-            optionsType={importNames.query['react'].optionsType}
-          />
-          {!!infinite && (
-            <Query
-              factory={factory}
-              Template={Template}
-              QueryKeyTemplate={QueryKeyTemplate}
-              QueryOptionsTemplate={QueryOptionsTemplate}
-              infinite={infinite}
-              suspense={false}
-              query={query}
-              queryOptions={queryOptions}
-              hookName={importNames.queryInfinite['react'].hookName}
-              resultType={importNames.queryInfinite['react'].resultType}
-              optionsType={importNames.queryInfinite['react'].optionsType}
-            />
-          )}
-          {!!suspense && isV5 && (
-            <Query
-              factory={factory}
-              Template={Template}
-              QueryKeyTemplate={QueryKeyTemplate}
-              QueryOptionsTemplate={QueryOptionsTemplate}
-              infinite={false}
-              suspense={suspense}
-              query={query}
-              queryOptions={queryOptions}
-              hookName={importNames.querySuspense['react'].hookName}
-              resultType={importNames.querySuspense['react'].resultType}
-              optionsType={importNames.querySuspense['react'].optionsType}
-            />
-          )}
-        </File.Source>
-      </File>
-    </Parser>
+      <QueryImports hookPath={typeof query !== 'boolean' ? query.importPath : undefined} Template={Import} isInfinite={false} isSuspense={false} />
+      {!!infinite && (
+        <QueryImports hookPath={typeof query !== 'boolean' ? query.importPath : undefined} Template={Import} isInfinite={true} isSuspense={false} />
+      )}
+      {!!suspense && isV5 && (
+        <QueryImports hookPath={typeof query !== 'boolean' ? query.importPath : undefined} Template={Import} isInfinite={false} isSuspense={true} />
+      )}
+      <SchemaType />
+      <Query
+        factory={factory}
+        Template={Template}
+        QueryKeyTemplate={QueryKeyTemplate}
+        QueryOptionsTemplate={QueryOptionsTemplate}
+        infinite={false}
+        suspense={false}
+        query={query}
+        queryOptions={queryOptions}
+        hookName={importNames.query['react'].hookName}
+        resultType={importNames.query['react'].resultType}
+        optionsType={importNames.query['react'].optionsType}
+      />
+      {!!infinite && (
+        <Query
+          factory={factory}
+          Template={Template}
+          QueryKeyTemplate={QueryKeyTemplate}
+          QueryOptionsTemplate={QueryOptionsTemplate}
+          infinite={infinite}
+          suspense={false}
+          query={query}
+          queryOptions={queryOptions}
+          hookName={importNames.queryInfinite['react'].hookName}
+          resultType={importNames.queryInfinite['react'].resultType}
+          optionsType={importNames.queryInfinite['react'].optionsType}
+        />
+      )}
+      {!!suspense && isV5 && (
+        <Query
+          factory={factory}
+          Template={Template}
+          QueryKeyTemplate={QueryKeyTemplate}
+          QueryOptionsTemplate={QueryOptionsTemplate}
+          infinite={false}
+          suspense={suspense}
+          query={query}
+          queryOptions={queryOptions}
+          hookName={importNames.querySuspense['react'].hookName}
+          resultType={importNames.querySuspense['react'].resultType}
+          optionsType={importNames.querySuspense['react'].optionsType}
+        />
+      )}
+    </File>
   )
 }
 

package/src/components/QueryKey.tsx

@@ -1,12 +1,12 @@
 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 { File, Function, Type, useApp } from '@kubb/react'
 
 import { isRequired } from '@kubb/oas'
+import { pluginTsName } from '@kubb/plugin-ts'
 import type { ReactNode } from 'react'
 import type { PluginReactQuery } from '../types'
-import { pluginTsName } from '@kubb/plugin-ts'
 
 type TemplateProps = {
   /**
@@ -41,13 +41,17 @@ type TemplateProps = {
 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>
+      <File.Source name={name} isExportable isIndexable>
+        <Function.Arrow name={name} export generics={generics} params={params} returnType={returnType} singleLine JSDoc={JSDoc}>
+          {`[${keys}] as const`}
+        </Function.Arrow>
+      </File.Source>
+
+      <File.Source name={typeName} isExportable isIndexable isTypeOnly>
+        <Type name={typeName} export>
+          {`ReturnType<typeof ${name}>`}
+        </Type>
+      </File.Source>
     </>
   )
 }