@kubb/plugin-react-query
Version:
React Query hooks generator plugin for Kubb, creating type-safe API client hooks from OpenAPI specifications for React applications.
739 lines (734 loc) • 23.2 kB
JavaScript
import { InfiniteQuery, InfiniteQueryOptions, Mutation, MutationKey, MutationOptions, Query, QueryKey, QueryOptions, SuspenseQuery } from "./components-Dz_s6t75.js";
import { createReactGenerator } from "@kubb/plugin-oas";
import { pluginTsName } from "@kubb/plugin-ts";
import { pluginZodName } from "@kubb/plugin-zod";
import { getBanner, getFooter } from "@kubb/plugin-oas/utils";
import { File, useApp } from "@kubb/react";
import { Fragment, jsx, jsxs } from "@kubb/react/jsx-runtime";
import { Client } from "@kubb/plugin-client/components";
import { pluginClientName } from "@kubb/plugin-client";
import { useOas, useOperationManager } from "@kubb/plugin-oas/hooks";
import { difference } from "remeda";
//#region src/generators/queryGenerator.tsx
const 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] }),
schemas: getSchemas(operation, {
pluginKey: [pluginTsName],
type: "type"
})
};
const zod = {
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
})
] })
]
});
}
});
//#endregion
//#region src/generators/mutationGenerator.tsx
const mutationGenerator = createReactGenerator({
name: "react-query",
Operation({ options, operation }) {
const { plugin: { options: { output } }, pluginManager } = useApp();
const oas = useOas();
const { getSchemas, getName, getFile } = useOperationManager();
const isMutation = !(!!options.query && options.query?.methods.some((method) => operation.method === method)) && 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] }),
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 mutationOptions = { name: getName(operation, {
type: "function",
suffix: "MutationOptions"
}) };
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
}),
/* @__PURE__ */ jsx(File.Import, {
name: ["mutationOptions"],
path: importPath
}),
/* @__PURE__ */ jsx(MutationOptions, {
name: mutationOptions.name,
clientName: client.name,
mutationKeyName: mutationKey.name,
typeSchemas: type.schemas,
paramsCasing: options.paramsCasing,
paramsType: options.paramsType,
pathParamsType: options.pathParamsType,
dataReturnType: options.client.dataReturnType
}),
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,
mutationOptionsName: mutationOptions.name,
typeName: mutation.typeName,
typeSchemas: type.schemas,
operation,
dataReturnType: options.client.dataReturnType,
paramsCasing: options.paramsCasing,
pathParamsType: options.pathParamsType,
mutationKeyName: mutationKey.name
})
] })
]
});
}
});
//#endregion
//#region src/generators/infiniteQueryGenerator.tsx
const 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] }),
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,
queryParam: options.infinite.queryParam
})
] })
]
});
}
});
//#endregion
//#region src/generators/suspenseQueryGenerator.tsx
const 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] }),
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
})
] })
]
});
}
});
//#endregion
export { infiniteQueryGenerator, mutationGenerator, queryGenerator, suspenseQueryGenerator };
//# sourceMappingURL=generators-ByqomtgH.js.map