@kubb/plugin-react-query
Version:
React Query hooks generator plugin for Kubb, creating type-safe API client hooks from OpenAPI specifications for React applications.
588 lines (586 loc) • 25.2 kB
JavaScript
import { QueryKey, QueryOptions, Query, MutationKey, Mutation, InfiniteQueryOptions, InfiniteQuery, SuspenseQuery } from './chunk-LT467H44.js';
import { pluginClientName } from '@kubb/plugin-client';
import { Client } from '@kubb/plugin-client/components';
import { createReactGenerator } from '@kubb/plugin-oas';
import { useOas, useOperationManager } from '@kubb/plugin-oas/hooks';
import { getFooter, getBanner } from '@kubb/plugin-oas/utils';
import { pluginTsName } from '@kubb/plugin-ts';
import { pluginZodName } from '@kubb/plugin-zod';
import { useApp, File } from '@kubb/react';
import { difference } from 'remeda';
import { jsxs, jsx, Fragment } from '@kubb/react/jsx-runtime';
var queryGenerator = createReactGenerator({
name: "react-query",
Operation({ options, operation }) {
const {
plugin: {
options: { output }
},
pluginManager
} = useApp();
const oas = useOas();
const { getSchemas, getName, getFile } = useOperationManager();
const isQuery = typeof options.query === "boolean" ? true : options.query?.methods.some((method) => operation.method === method);
const isMutation = difference(options.mutation ? options.mutation.methods : [], options.query ? options.query.methods : []).some(
(method) => operation.method === method
);
const importPath = options.query ? options.query.importPath : "@tanstack/react-query";
const query = {
name: getName(operation, { type: "function", prefix: "use" }),
typeName: getName(operation, { type: "type" }),
file: getFile(operation, { prefix: "use" })
};
const hasClientPlugin = !!pluginManager.getPluginByKey([pluginClientName]);
const client = {
name: hasClientPlugin ? getName(operation, {
type: "function",
pluginKey: [pluginClientName]
}) : getName(operation, {
type: "function"
}),
file: getFile(operation, { pluginKey: [pluginClientName] })
};
const queryOptions = {
name: getName(operation, { type: "function", suffix: "QueryOptions" })
};
const queryKey = {
name: getName(operation, { type: "const", suffix: "QueryKey" }),
typeName: getName(operation, { type: "type", suffix: "QueryKey" })
};
const type = {
file: getFile(operation, { pluginKey: [pluginTsName] }),
//todo remove type?
schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: "type" })
};
const zod = {
// grouping is coming from react-query instead of zod option, we need to pass the options of zod instead
file: getFile(operation, { pluginKey: [pluginZodName] }),
schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: "function" })
};
if (!isQuery || isMutation) {
return null;
}
return /* @__PURE__ */ jsxs(
File,
{
baseName: query.file.baseName,
path: query.file.path,
meta: query.file.meta,
banner: getBanner({ oas, output, config: pluginManager.config }),
footer: getFooter({ oas, output }),
children: [
options.parser === "zod" && /* @__PURE__ */ jsx(File.Import, { name: [zod.schemas.response.name, zod.schemas.request?.name].filter(Boolean), root: query.file.path, path: zod.file.path }),
/* @__PURE__ */ jsx(File.Import, { name: "fetch", path: options.client.importPath }),
hasClientPlugin && /* @__PURE__ */ jsx(File.Import, { name: [client.name], root: query.file.path, path: client.file.path }),
/* @__PURE__ */ jsx(File.Import, { name: ["RequestConfig", "ResponseErrorConfig"], path: options.client.importPath, isTypeOnly: true }),
options.client.dataReturnType === "full" && /* @__PURE__ */ jsx(File.Import, { name: ["ResponseConfig"], path: options.client.importPath, isTypeOnly: true }),
/* @__PURE__ */ jsx(
File.Import,
{
name: [
type.schemas.request?.name,
type.schemas.response.name,
type.schemas.pathParams?.name,
type.schemas.queryParams?.name,
type.schemas.headerParams?.name,
...type.schemas.statusCodes?.map((item) => item.name) || []
].filter(Boolean),
root: query.file.path,
path: type.file.path,
isTypeOnly: true
}
),
/* @__PURE__ */ jsx(
QueryKey,
{
name: queryKey.name,
typeName: queryKey.typeName,
operation,
pathParamsType: options.pathParamsType,
typeSchemas: type.schemas,
paramsCasing: options.paramsCasing,
transformer: options.queryKey
}
),
!hasClientPlugin && /* @__PURE__ */ jsx(
Client,
{
name: client.name,
baseURL: options.client.baseURL,
operation,
typeSchemas: type.schemas,
zodSchemas: zod.schemas,
dataReturnType: options.client.dataReturnType,
paramsType: options.paramsType,
paramsCasing: options.paramsCasing,
pathParamsType: options.pathParamsType,
parser: options.parser
}
),
/* @__PURE__ */ jsx(File.Import, { name: ["queryOptions"], path: importPath }),
/* @__PURE__ */ jsx(
QueryOptions,
{
name: queryOptions.name,
clientName: client.name,
queryKeyName: queryKey.name,
typeSchemas: type.schemas,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
dataReturnType: options.client.dataReturnType
}
),
options.query && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(File.Import, { name: ["useQuery"], path: importPath }),
/* @__PURE__ */ jsx(File.Import, { name: ["QueryKey", "QueryClient", "QueryObserverOptions", "UseQueryResult", "QueryClient"], path: importPath, isTypeOnly: true }),
/* @__PURE__ */ jsx(
Query,
{
name: query.name,
queryOptionsName: queryOptions.name,
typeSchemas: type.schemas,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
operation,
dataReturnType: options.client.dataReturnType,
queryKeyName: queryKey.name,
queryKeyTypeName: queryKey.typeName
}
)
] })
]
}
);
}
});
var mutationGenerator = createReactGenerator({
name: "react-query",
Operation({ options, operation }) {
const {
plugin: {
options: { output }
},
pluginManager
} = useApp();
const oas = useOas();
const { getSchemas, getName, getFile } = useOperationManager();
const isQuery = !!options.query && options.query?.methods.some((method) => operation.method === method);
const isMutation = !isQuery && difference(options.mutation ? options.mutation.methods : [], options.query ? options.query.methods : []).some((method) => operation.method === method);
const importPath = options.mutation ? options.mutation.importPath : "@tanstack/react-query";
const mutation = {
name: getName(operation, { type: "function", prefix: "use" }),
typeName: getName(operation, { type: "type" }),
file: getFile(operation, { prefix: "use" })
};
const type = {
file: getFile(operation, { pluginKey: [pluginTsName] }),
//todo remove type?
schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: "type" })
};
const zod = {
file: getFile(operation, { pluginKey: [pluginZodName] }),
schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: "function" })
};
const hasClientPlugin = !!pluginManager.getPluginByKey([pluginClientName]);
const client = {
name: hasClientPlugin ? getName(operation, {
type: "function",
pluginKey: [pluginClientName]
}) : getName(operation, {
type: "function"
}),
file: getFile(operation, { pluginKey: [pluginClientName] })
};
const mutationKey = {
name: getName(operation, { type: "const", suffix: "MutationKey" }),
typeName: getName(operation, { type: "type", suffix: "MutationKey" })
};
if (!isMutation) {
return null;
}
return /* @__PURE__ */ jsxs(
File,
{
baseName: mutation.file.baseName,
path: mutation.file.path,
meta: mutation.file.meta,
banner: getBanner({ oas, output, config: pluginManager.config }),
footer: getFooter({ oas, output }),
children: [
options.parser === "zod" && /* @__PURE__ */ jsx(File.Import, { name: [zod.schemas.response.name, zod.schemas.request?.name].filter(Boolean), root: mutation.file.path, path: zod.file.path }),
/* @__PURE__ */ jsx(File.Import, { name: "fetch", path: options.client.importPath }),
!!hasClientPlugin && /* @__PURE__ */ jsx(File.Import, { name: [client.name], root: mutation.file.path, path: client.file.path }),
/* @__PURE__ */ jsx(File.Import, { name: ["RequestConfig", "ResponseConfig", "ResponseErrorConfig"], path: options.client.importPath, isTypeOnly: true }),
/* @__PURE__ */ jsx(
File.Import,
{
name: [
type.schemas.request?.name,
type.schemas.response.name,
type.schemas.pathParams?.name,
type.schemas.queryParams?.name,
type.schemas.headerParams?.name,
...type.schemas.statusCodes?.map((item) => item.name) || []
].filter(Boolean),
root: mutation.file.path,
path: type.file.path,
isTypeOnly: true
}
),
/* @__PURE__ */ jsx(
MutationKey,
{
name: mutationKey.name,
typeName: mutationKey.typeName,
operation,
pathParamsType: options.pathParamsType,
typeSchemas: type.schemas,
paramsCasing: options.paramsCasing,
transformer: options.mutationKey
}
),
!hasClientPlugin && /* @__PURE__ */ jsx(
Client,
{
name: client.name,
baseURL: options.client.baseURL,
operation,
typeSchemas: type.schemas,
zodSchemas: zod.schemas,
dataReturnType: options.client.dataReturnType,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
parser: options.parser
}
),
options.mutation && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(File.Import, { name: ["useMutation"], path: importPath }),
/* @__PURE__ */ jsx(File.Import, { name: ["UseMutationOptions", "QueryClient"], path: importPath, isTypeOnly: true }),
/* @__PURE__ */ jsx(
Mutation,
{
name: mutation.name,
clientName: client.name,
typeName: mutation.typeName,
typeSchemas: type.schemas,
operation,
dataReturnType: options.client.dataReturnType,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
mutationKeyName: mutationKey.name
}
)
] })
]
}
);
}
});
var infiniteQueryGenerator = createReactGenerator({
name: "react-infinite-query",
Operation({ options, operation }) {
const {
plugin: {
options: { output }
},
pluginManager
} = useApp();
const oas = useOas();
const { getSchemas, getName, getFile } = useOperationManager();
const isQuery = typeof options.query === "boolean" ? true : options.query?.methods.some((method) => operation.method === method);
const isMutation = difference(options.mutation ? options.mutation.methods : [], options.query ? options.query.methods : []).some(
(method) => operation.method === method
);
const isInfinite = !!options.infinite;
const importPath = options.query ? options.query.importPath : "@tanstack/react-query";
const query = {
name: getName(operation, { type: "function", prefix: "use", suffix: "infinite" }),
typeName: getName(operation, { type: "type" }),
file: getFile(operation, { prefix: "use", suffix: "infinite" })
};
const hasClientPlugin = !!pluginManager.getPluginByKey([pluginClientName]);
const client = {
name: hasClientPlugin ? getName(operation, {
type: "function",
pluginKey: [pluginClientName]
}) : getName(operation, {
type: "function",
suffix: "infinite"
}),
file: getFile(operation, { pluginKey: [pluginClientName] })
};
const queryOptions = {
name: getName(operation, { type: "function", suffix: "InfiniteQueryOptions" })
};
const queryKey = {
name: getName(operation, { type: "const", suffix: "InfiniteQueryKey" }),
typeName: getName(operation, { type: "type", suffix: "InfiniteQueryKey" })
};
const type = {
file: getFile(operation, { pluginKey: [pluginTsName] }),
//todo remove type?
schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: "type" })
};
const zod = {
file: getFile(operation, { pluginKey: [pluginZodName] }),
schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: "function" })
};
if (!isQuery || isMutation || !isInfinite) {
return null;
}
return /* @__PURE__ */ jsxs(
File,
{
baseName: query.file.baseName,
path: query.file.path,
meta: query.file.meta,
banner: getBanner({ oas, output, config: pluginManager.config }),
footer: getFooter({ oas, output }),
children: [
options.parser === "zod" && /* @__PURE__ */ jsx(File.Import, { name: [zod.schemas.response.name, zod.schemas.request?.name].filter(Boolean), root: query.file.path, path: zod.file.path }),
/* @__PURE__ */ jsx(File.Import, { name: "fetch", path: options.client.importPath }),
hasClientPlugin && /* @__PURE__ */ jsx(File.Import, { name: [client.name], root: query.file.path, path: client.file.path }),
/* @__PURE__ */ jsx(File.Import, { name: ["RequestConfig", "ResponseErrorConfig"], path: options.client.importPath, isTypeOnly: true }),
options.client.dataReturnType === "full" && /* @__PURE__ */ jsx(File.Import, { name: ["ResponseConfig"], path: options.client.importPath, isTypeOnly: true }),
/* @__PURE__ */ jsx(
File.Import,
{
name: [
type.schemas.request?.name,
type.schemas.response.name,
type.schemas.pathParams?.name,
type.schemas.queryParams?.name,
type.schemas.headerParams?.name,
...type.schemas.statusCodes?.map((item) => item.name) || []
].filter(Boolean),
root: query.file.path,
path: type.file.path,
isTypeOnly: true
}
),
/* @__PURE__ */ jsx(
QueryKey,
{
name: queryKey.name,
typeName: queryKey.typeName,
operation,
paramsCasing: options.paramsCasing,
pathParamsType: options.pathParamsType,
typeSchemas: type.schemas,
transformer: options.queryKey
}
),
!hasClientPlugin && /* @__PURE__ */ jsx(
Client,
{
name: client.name,
baseURL: options.client.baseURL,
operation,
typeSchemas: type.schemas,
zodSchemas: zod.schemas,
dataReturnType: options.client.dataReturnType,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
parser: options.parser
}
),
options.infinite && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(File.Import, { name: ["InfiniteData"], isTypeOnly: true, path: importPath }),
/* @__PURE__ */ jsx(File.Import, { name: ["infiniteQueryOptions"], path: importPath }),
/* @__PURE__ */ jsx(
InfiniteQueryOptions,
{
name: queryOptions.name,
clientName: client.name,
queryKeyName: queryKey.name,
typeSchemas: type.schemas,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
dataReturnType: options.client.dataReturnType,
cursorParam: options.infinite.cursorParam,
initialPageParam: options.infinite.initialPageParam,
queryParam: options.infinite.queryParam
}
)
] }),
options.infinite && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(File.Import, { name: ["useInfiniteQuery"], path: importPath }),
/* @__PURE__ */ jsx(File.Import, { name: ["QueryKey", "QueryClient", "InfiniteQueryObserverOptions", "UseInfiniteQueryResult"], path: importPath, isTypeOnly: true }),
/* @__PURE__ */ jsx(
InfiniteQuery,
{
name: query.name,
queryOptionsName: queryOptions.name,
typeSchemas: type.schemas,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
operation,
dataReturnType: options.client.dataReturnType,
queryKeyName: queryKey.name,
queryKeyTypeName: queryKey.typeName
}
)
] })
]
}
);
}
});
var suspenseQueryGenerator = createReactGenerator({
name: "react-suspense-query",
Operation({ options, operation }) {
const {
plugin: {
options: { output }
},
pluginManager
} = useApp();
const oas = useOas();
const { getSchemas, getName, getFile } = useOperationManager();
const isQuery = typeof options.query === "boolean" ? true : options.query?.methods.some((method) => operation.method === method);
const isMutation = difference(options.mutation ? options.mutation.methods : [], options.query ? options.query.methods : []).some(
(method) => operation.method === method
);
const isSuspense = !!options.suspense;
const importPath = options.query ? options.query.importPath : "@tanstack/react-query";
const query = {
name: getName(operation, { type: "function", prefix: "use", suffix: "suspense" }),
typeName: getName(operation, { type: "type" }),
file: getFile(operation, { prefix: "use", suffix: "suspense" })
};
const hasClientPlugin = !!pluginManager.getPluginByKey([pluginClientName]);
const client = {
name: hasClientPlugin ? getName(operation, {
type: "function",
pluginKey: [pluginClientName]
}) : getName(operation, {
type: "function",
suffix: "suspense"
}),
file: getFile(operation, { pluginKey: [pluginClientName] })
};
const queryOptions = {
name: getName(operation, { type: "function", suffix: "SuspenseQueryOptions" })
};
const queryKey = {
name: getName(operation, { type: "const", suffix: "SuspenseQueryKey" }),
typeName: getName(operation, { type: "type", suffix: "SuspenseQueryKey" })
};
const type = {
file: getFile(operation, { pluginKey: [pluginTsName] }),
//todo remove type?
schemas: getSchemas(operation, { pluginKey: [pluginTsName], type: "type" })
};
const zod = {
file: getFile(operation, { pluginKey: [pluginZodName] }),
schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: "function" })
};
if (!isQuery || isMutation || !isSuspense) {
return null;
}
return /* @__PURE__ */ jsxs(
File,
{
baseName: query.file.baseName,
path: query.file.path,
meta: query.file.meta,
banner: getBanner({ oas, output, config: pluginManager.config }),
footer: getFooter({ oas, output }),
children: [
options.parser === "zod" && /* @__PURE__ */ jsx(File.Import, { name: [zod.schemas.response.name, zod.schemas.request?.name].filter(Boolean), root: query.file.path, path: zod.file.path }),
/* @__PURE__ */ jsx(File.Import, { name: "fetch", path: options.client.importPath }),
hasClientPlugin && /* @__PURE__ */ jsx(File.Import, { name: [client.name], root: query.file.path, path: client.file.path }),
/* @__PURE__ */ jsx(File.Import, { name: ["RequestConfig", "ResponseErrorConfig"], path: options.client.importPath, isTypeOnly: true }),
options.client.dataReturnType === "full" && /* @__PURE__ */ jsx(File.Import, { name: ["ResponseConfig"], path: options.client.importPath, isTypeOnly: true }),
/* @__PURE__ */ jsx(
File.Import,
{
name: [
type.schemas.request?.name,
type.schemas.response.name,
type.schemas.pathParams?.name,
type.schemas.queryParams?.name,
type.schemas.headerParams?.name,
...type.schemas.statusCodes?.map((item) => item.name) || []
].filter(Boolean),
root: query.file.path,
path: type.file.path,
isTypeOnly: true
}
),
/* @__PURE__ */ jsx(
QueryKey,
{
name: queryKey.name,
typeName: queryKey.typeName,
operation,
paramsCasing: options.paramsCasing,
pathParamsType: options.pathParamsType,
typeSchemas: type.schemas,
transformer: options.queryKey
}
),
!hasClientPlugin && /* @__PURE__ */ jsx(
Client,
{
name: client.name,
baseURL: options.client.baseURL,
operation,
typeSchemas: type.schemas,
zodSchemas: zod.schemas,
dataReturnType: options.client.dataReturnType,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
parser: options.parser
}
),
/* @__PURE__ */ jsx(File.Import, { name: ["queryOptions"], path: importPath }),
/* @__PURE__ */ jsx(
QueryOptions,
{
name: queryOptions.name,
clientName: client.name,
queryKeyName: queryKey.name,
typeSchemas: type.schemas,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
dataReturnType: options.client.dataReturnType
}
),
options.suspense && /* @__PURE__ */ jsxs(Fragment, { children: [
/* @__PURE__ */ jsx(File.Import, { name: ["useSuspenseQuery"], path: importPath }),
/* @__PURE__ */ jsx(File.Import, { name: ["QueryKey", "QueryClient", "UseSuspenseQueryOptions", "UseSuspenseQueryResult"], path: importPath, isTypeOnly: true }),
options.client.dataReturnType === "full" && /* @__PURE__ */ jsx(File.Import, { name: ["ResponseConfig"], path: options.client.importPath, isTypeOnly: true }),
/* @__PURE__ */ jsx(
SuspenseQuery,
{
name: query.name,
queryOptionsName: queryOptions.name,
typeSchemas: type.schemas,
paramsType: options.paramsType,
paramsCasing: options.paramsCasing,
pathParamsType: options.pathParamsType,
operation,
dataReturnType: options.client.dataReturnType,
queryKeyName: queryKey.name,
queryKeyTypeName: queryKey.typeName
}
)
] })
]
}
);
}
});
export { infiniteQueryGenerator, mutationGenerator, queryGenerator, suspenseQueryGenerator };
//# sourceMappingURL=chunk-2LUZUNTA.js.map
//# sourceMappingURL=chunk-2LUZUNTA.js.map