@kubb/plugin-react-query 3.0.0-beta.8 → 3.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (54) hide show
  1. package/dist/{chunk-C2H3KPHM.cjs → chunk-EOG7AHFO.cjs} +276 -44
  2. package/dist/chunk-EOG7AHFO.cjs.map +1 -0
  3. package/dist/{chunk-Y3DM2P6L.js → chunk-EY5KE7R7.js} +276 -44
  4. package/dist/chunk-EY5KE7R7.js.map +1 -0
  5. package/dist/{chunk-3U5EOLDD.cjs → chunk-NBC6BPMV.cjs} +141 -110
  6. package/dist/chunk-NBC6BPMV.cjs.map +1 -0
  7. package/dist/{chunk-ES4YRHDI.js → chunk-NZKAIPYC.js} +130 -99
  8. package/dist/chunk-NZKAIPYC.js.map +1 -0
  9. package/dist/components.cjs +9 -9
  10. package/dist/components.d.cts +29 -16
  11. package/dist/components.d.ts +29 -16
  12. package/dist/components.js +1 -1
  13. package/dist/generators.cjs +6 -6
  14. package/dist/generators.d.cts +1 -1
  15. package/dist/generators.d.ts +1 -1
  16. package/dist/generators.js +2 -2
  17. package/dist/index.cjs +24 -24
  18. package/dist/index.cjs.map +1 -1
  19. package/dist/index.d.cts +1 -1
  20. package/dist/index.d.ts +1 -1
  21. package/dist/index.js +23 -23
  22. package/dist/index.js.map +1 -1
  23. package/dist/{types-LhwfnVo7.d.cts → types-IuxCCG1K.d.cts} +46 -16
  24. package/dist/{types-LhwfnVo7.d.ts → types-IuxCCG1K.d.ts} +46 -16
  25. package/package.json +13 -13
  26. package/src/components/InfiniteQuery.tsx +52 -5
  27. package/src/components/InfiniteQueryOptions.tsx +62 -7
  28. package/src/components/Mutation.tsx +9 -3
  29. package/src/components/MutationKey.tsx +11 -5
  30. package/src/components/Query.tsx +62 -6
  31. package/src/components/QueryKey.tsx +17 -7
  32. package/src/components/QueryOptions.tsx +47 -7
  33. package/src/components/SuspenseQuery.tsx +52 -5
  34. package/src/generators/__snapshots__/clientDataReturnTypeFull.ts +1 -1
  35. package/src/generators/__snapshots__/clientGetImportPath.ts +1 -1
  36. package/src/generators/__snapshots__/findByTags.ts +1 -1
  37. package/src/generators/__snapshots__/findByTagsObject.ts +60 -0
  38. package/src/generators/__snapshots__/findByTagsPathParamsObject.ts +1 -1
  39. package/src/generators/__snapshots__/findByTagsWithCustomQueryKey.ts +2 -2
  40. package/src/generators/__snapshots__/findByTagsWithZod.ts +1 -1
  41. package/src/generators/__snapshots__/findInfiniteByTags.ts +1 -1
  42. package/src/generators/__snapshots__/findInfiniteByTagsCursor.ts +1 -1
  43. package/src/generators/__snapshots__/postAsQuery.ts +1 -1
  44. package/src/generators/__snapshots__/updatePetByIdPathParamsObject.ts +1 -3
  45. package/src/generators/infiniteQueryGenerator.tsx +40 -28
  46. package/src/generators/mutationGenerator.tsx +25 -16
  47. package/src/generators/queryGenerator.tsx +24 -17
  48. package/src/generators/suspenseQueryGenerator.tsx +26 -16
  49. package/src/plugin.ts +23 -20
  50. package/src/types.ts +35 -15
  51. package/dist/chunk-3U5EOLDD.cjs.map +0 -1
  52. package/dist/chunk-C2H3KPHM.cjs.map +0 -1
  53. package/dist/chunk-ES4YRHDI.js.map +0 -1
  54. package/dist/chunk-Y3DM2P6L.js.map +0 -1
@@ -0,0 +1,60 @@
1
+ import client from "@kubb/plugin-client/client";
2
+ import type { RequestConfig } from "@kubb/plugin-client/client";
3
+ import type { QueryKey, QueryObserverOptions, UseQueryResult } from "@tanstack/react-query";
4
+ import { queryOptions, useQuery } from "@tanstack/react-query";
5
+
6
+ export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
7
+
8
+ export type FindPetsByTagsQueryKey = ReturnType<typeof findPetsByTagsQueryKey>;
9
+
10
+ /**
11
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
12
+ * @summary Finds Pets by tags
13
+ * @link /pet/findByTags
14
+ */
15
+ async function findPetsByTags({ headers, params }: {
16
+ headers: FindPetsByTagsHeaderParams;
17
+ params?: FindPetsByTagsQueryParams;
18
+ }, config: Partial<RequestConfig> = {}) {
19
+ const res = await client<FindPetsByTagsQueryResponse, FindPetsByTags400, unknown>({ method: "GET", url: `/pet/findByTags`, params, headers: { ...headers, ...config.headers }, ...config });
20
+ return findPetsByTagsQueryResponse.parse(res.data);
21
+ }
22
+
23
+ export function findPetsByTagsQueryOptions({ headers, params }: {
24
+ headers: FindPetsByTagsHeaderParams;
25
+ params?: FindPetsByTagsQueryParams;
26
+ }, config: Partial<RequestConfig> = {}) {
27
+ const queryKey = findPetsByTagsQueryKey(params);
28
+ return queryOptions({
29
+ queryKey,
30
+ queryFn: async ({ signal }) => {
31
+ config.signal = signal;
32
+ return findPetsByTags({ headers, params }, config);
33
+ },
34
+ });
35
+ }
36
+
37
+ /**
38
+ * @description Multiple tags can be provided with comma separated strings. Use tag1, tag2, tag3 for testing.
39
+ * @summary Finds Pets by tags
40
+ * @link /pet/findByTags
41
+ */
42
+ export function useFindPetsByTags<TData = FindPetsByTagsQueryResponse, TQueryData = FindPetsByTagsQueryResponse, TQueryKey extends QueryKey = FindPetsByTagsQueryKey>({ headers, params }: {
43
+ headers: FindPetsByTagsHeaderParams;
44
+ params?: FindPetsByTagsQueryParams;
45
+ }, options: {
46
+ query?: Partial<QueryObserverOptions<FindPetsByTagsQueryResponse, FindPetsByTags400, TData, TQueryData, TQueryKey>>;
47
+ client?: Partial<RequestConfig>;
48
+ } = {}) {
49
+ const { query: queryOptions, client: config = {} } = options ?? {};
50
+ const queryKey = queryOptions?.queryKey ?? findPetsByTagsQueryKey(params);
51
+ const query = useQuery({
52
+ ...findPetsByTagsQueryOptions({ headers, params }, config) as unknown as QueryObserverOptions,
53
+ queryKey,
54
+ ...queryOptions as unknown as Omit<QueryObserverOptions, "queryKey">
55
+ }) as UseQueryResult<TData, FindPetsByTags400> & {
56
+ queryKey: TQueryKey;
57
+ };
58
+ query.queryKey = queryKey as TQueryKey;
59
+ return query;
60
+ }
@@ -1,7 +1,7 @@
1
1
  import client from "@kubb/plugin-client/client";
2
2
  import type { RequestConfig } from "@kubb/plugin-client/client";
3
3
  import type { QueryKey, QueryObserverOptions, UseQueryResult } from "@tanstack/react-query";
4
- import { useQuery, queryOptions } from "@tanstack/react-query";
4
+ import { queryOptions, useQuery } from "@tanstack/react-query";
5
5
 
6
6
  export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
7
7
 
@@ -1,9 +1,9 @@
1
1
  import client from "@kubb/plugin-client/client";
2
2
  import type { RequestConfig } from "@kubb/plugin-client/client";
3
3
  import type { QueryKey, QueryObserverOptions, UseQueryResult } from "@tanstack/react-query";
4
- import { useQuery, queryOptions } from "@tanstack/react-query";
4
+ import { queryOptions, useQuery } from "@tanstack/react-query";
5
5
 
6
- export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [test, { url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
6
+ export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => ["test", { url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
7
7
 
8
8
  export type FindPetsByTagsQueryKey = ReturnType<typeof findPetsByTagsQueryKey>;
9
9
 
@@ -1,7 +1,7 @@
1
1
  import client from "@kubb/plugin-client/client";
2
2
  import type { RequestConfig } from "@kubb/plugin-client/client";
3
3
  import type { QueryKey, QueryObserverOptions, UseQueryResult } from "@tanstack/react-query";
4
- import { useQuery, queryOptions } from "@tanstack/react-query";
4
+ import { queryOptions, useQuery } from "@tanstack/react-query";
5
5
 
6
6
  export const findPetsByTagsQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
7
7
 
@@ -1,7 +1,7 @@
1
1
  import client from "@kubb/plugin-client/client";
2
2
  import type { RequestConfig } from "@kubb/plugin-client/client";
3
3
  import type { QueryKey, InfiniteQueryObserverOptions, UseInfiniteQueryResult } from "@tanstack/react-query";
4
- import { useInfiniteQuery, infiniteQueryOptions } from "@tanstack/react-query";
4
+ import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
5
5
 
6
6
  export const findPetsByTagsInfiniteQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
7
7
 
@@ -1,7 +1,7 @@
1
1
  import client from "@kubb/plugin-client/client";
2
2
  import type { RequestConfig } from "@kubb/plugin-client/client";
3
3
  import type { QueryKey, InfiniteQueryObserverOptions, UseInfiniteQueryResult } from "@tanstack/react-query";
4
- import { useInfiniteQuery, infiniteQueryOptions } from "@tanstack/react-query";
4
+ import { infiniteQueryOptions, useInfiniteQuery } from "@tanstack/react-query";
5
5
 
6
6
  export const findPetsByTagsInfiniteQueryKey = (params?: FindPetsByTagsQueryParams) => [{ url: "/pet/findByTags" }, ...(params ? [params] : [])] as const;
7
7
 
@@ -1,7 +1,7 @@
1
1
  import client from "@kubb/plugin-client/client";
2
2
  import type { RequestConfig } from "@kubb/plugin-client/client";
3
3
  import type { QueryKey, QueryObserverOptions, UseQueryResult } from "custom-query";
4
- import { useQuery, queryOptions } from "custom-query";
4
+ import { queryOptions, useQuery } from "custom-query";
5
5
 
6
6
  export const updatePetWithFormQueryKey = (petId: UpdatePetWithFormPathParams["petId"], data?: UpdatePetWithFormMutationRequest, params?: UpdatePetWithFormQueryParams) => [{ url: "/pet/:petId", params: { petId: petId } }, ...(params ? [params] : []), ...(data ? [data] : [])] as const;
7
7
 
@@ -11,9 +11,7 @@ import { useMutation } from "@tanstack/react-query";
11
11
  * @summary Updates a pet in the store with form data
12
12
  * @link /pet/:petId
13
13
  */
14
- async function updatePetWithForm({ petId }: {
15
- petId: UpdatePetWithFormPathParams["petId"];
16
- }, data?: UpdatePetWithFormMutationRequest, params?: UpdatePetWithFormQueryParams, config: Partial<RequestConfig<UpdatePetWithFormMutationRequest>> = {}) {
14
+ async function updatePetWithForm({ petId }: UpdatePetWithFormPathParams, data?: UpdatePetWithFormMutationRequest, params?: UpdatePetWithFormQueryParams, config: Partial<RequestConfig<UpdatePetWithFormMutationRequest>> = {}) {
17
15
  const res = await client<UpdatePetWithFormMutationResponse, UpdatePetWithForm405, UpdatePetWithFormMutationRequest>({ method: "POST", url: `/pet/${petId}`, params, data, ...config });
18
16
  return updatePetWithFormMutationResponse.parse(res.data);
19
17
  }
@@ -1,4 +1,3 @@
1
- import transformers from '@kubb/core/transformers'
2
1
  import { pluginClientName } from '@kubb/plugin-client'
3
2
  import { Client } from '@kubb/plugin-client/components'
4
3
  import { createReactGenerator } from '@kubb/plugin-oas'
@@ -21,6 +20,8 @@ export const infiniteQueryGenerator = createReactGenerator<PluginReactQuery>({
21
20
  const isQuery = typeof options.query === 'boolean' ? options.query : !!options.query.methods?.some((method) => operation.method === method)
22
21
  const isInfinite = isQuery && !!options.infinite
23
22
 
23
+ const importPath = options.query ? options.query.importPath : '@tanstack/react-query'
24
+
24
25
  const query = {
25
26
  name: getName(operation, { type: 'function', prefix: 'use', suffix: 'infinite' }),
26
27
  typeName: getName(operation, { type: 'type' }),
@@ -51,15 +52,13 @@ export const infiniteQueryGenerator = createReactGenerator<PluginReactQuery>({
51
52
  schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
52
53
  }
53
54
 
54
- if (!isQuery || !isInfinite || typeof options.query === 'boolean' || typeof options.infinite === 'boolean') {
55
+ if (!isQuery || !isInfinite) {
55
56
  return null
56
57
  }
57
58
 
58
59
  return (
59
60
  <File baseName={query.file.baseName} path={query.file.path} meta={query.file.meta} banner={output?.banner} footer={output?.footer}>
60
61
  {options.parser === 'zod' && <File.Import name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
61
- <File.Import name={['useInfiniteQuery', 'infiniteQueryOptions']} path={options.query.importPath} />
62
- <File.Import name={['QueryKey', 'WithRequired', 'InfiniteQueryObserverOptions', 'UseInfiniteQueryResult']} path={options.query.importPath} isTypeOnly />
63
62
  <File.Import name={'client'} path={options.client.importPath} />
64
63
  <File.Import name={['RequestConfig']} path={options.client.importPath} isTypeOnly />
65
64
  {options.client.dataReturnType === 'full' && <File.Import name={['ResponseConfig']} path={options.client.importPath} isTypeOnly />}
@@ -76,48 +75,61 @@ export const infiniteQueryGenerator = createReactGenerator<PluginReactQuery>({
76
75
  path={type.file.path}
77
76
  isTypeOnly
78
77
  />
79
-
80
78
  <QueryKey
81
79
  name={queryKey.name}
82
80
  typeName={queryKey.typeName}
83
81
  operation={operation}
84
82
  pathParamsType={options.pathParamsType}
85
83
  typeSchemas={type.schemas}
86
- keysFn={options.query.key}
84
+ transformer={options.queryKey}
87
85
  />
88
86
  <Client
89
87
  name={client.name}
90
88
  isExportable={false}
91
89
  isIndexable={false}
92
- baseURL={options.baseURL}
90
+ baseURL={options.client.baseURL}
93
91
  operation={operation}
94
92
  typeSchemas={type.schemas}
95
93
  zodSchemas={zod.schemas}
96
94
  dataReturnType={options.client.dataReturnType}
95
+ paramsType={options.paramsType}
97
96
  pathParamsType={options.pathParamsType}
98
97
  parser={options.parser}
99
98
  />
100
- <InfiniteQueryOptions
101
- name={queryOptions.name}
102
- clientName={client.name}
103
- queryKeyName={queryKey.name}
104
- typeSchemas={type.schemas}
105
- pathParamsType={options.pathParamsType}
106
- dataReturnType={options.client.dataReturnType}
107
- cursorParam={options.infinite.cursorParam}
108
- initialPageParam={options.infinite.initialPageParam}
109
- queryParam={options.infinite.queryParam}
110
- />
111
- <InfiniteQuery
112
- name={query.name}
113
- queryOptionsName={queryOptions.name}
114
- typeSchemas={type.schemas}
115
- pathParamsType={options.pathParamsType}
116
- operation={operation}
117
- dataReturnType={options.client.dataReturnType}
118
- queryKeyName={queryKey.name}
119
- queryKeyTypeName={queryKey.typeName}
120
- />
99
+ {options.infinite && (
100
+ <>
101
+ <File.Import name={['infiniteQueryOptions']} path={importPath} />
102
+ <InfiniteQueryOptions
103
+ name={queryOptions.name}
104
+ clientName={client.name}
105
+ queryKeyName={queryKey.name}
106
+ typeSchemas={type.schemas}
107
+ paramsType={options.paramsType}
108
+ pathParamsType={options.pathParamsType}
109
+ dataReturnType={options.client.dataReturnType}
110
+ cursorParam={options.infinite.cursorParam}
111
+ initialPageParam={options.infinite.initialPageParam}
112
+ queryParam={options.infinite.queryParam}
113
+ />
114
+ </>
115
+ )}
116
+ {options.infinite && (
117
+ <>
118
+ <File.Import name={['useInfiniteQuery']} path={importPath} />
119
+ <File.Import name={['QueryKey', 'InfiniteQueryObserverOptions', 'UseInfiniteQueryResult']} path={importPath} isTypeOnly />
120
+ <InfiniteQuery
121
+ name={query.name}
122
+ queryOptionsName={queryOptions.name}
123
+ typeSchemas={type.schemas}
124
+ paramsType={options.paramsType}
125
+ pathParamsType={options.pathParamsType}
126
+ operation={operation}
127
+ dataReturnType={options.client.dataReturnType}
128
+ queryKeyName={queryKey.name}
129
+ queryKeyTypeName={queryKey.typeName}
130
+ />
131
+ </>
132
+ )}
121
133
  </File>
122
134
  )
123
135
  },
@@ -1,4 +1,3 @@
1
- import transformers from '@kubb/core/transformers'
2
1
  import { pluginClientName } from '@kubb/plugin-client'
3
2
  import { Client } from '@kubb/plugin-client/components'
4
3
  import { createReactGenerator } from '@kubb/plugin-oas'
@@ -22,6 +21,8 @@ export const mutationGenerator = createReactGenerator<PluginReactQuery>({
22
21
  const isQuery = typeof options.query === 'boolean' ? true : options.query?.methods.some((method) => operation.method === method)
23
22
  const isMutation = !isQuery && options.mutation && options.mutation.methods.some((method) => operation.method === method)
24
23
 
24
+ const importPath = options.mutation ? options.mutation.importPath : '@tanstack/react-query'
25
+
25
26
  const mutation = {
26
27
  name: getName(operation, { type: 'function', prefix: 'use' }),
27
28
  typeName: getName(operation, { type: 'type' }),
@@ -48,15 +49,13 @@ export const mutationGenerator = createReactGenerator<PluginReactQuery>({
48
49
  typeName: getName(operation, { type: 'type', suffix: 'MutationKey' }),
49
50
  }
50
51
 
51
- if (!isMutation || typeof options.mutation === 'boolean') {
52
+ if (!isMutation) {
52
53
  return null
53
54
  }
54
55
 
55
56
  return (
56
57
  <File baseName={mutation.file.baseName} path={mutation.file.path} meta={mutation.file.meta} banner={output?.banner} footer={output?.footer}>
57
58
  {options.parser === 'zod' && <File.Import name={[zod.schemas.response.name]} root={mutation.file.path} path={zod.file.path} />}
58
- <File.Import name={['useMutation']} path={options.mutation.importPath} />
59
- <File.Import name={['UseMutationOptions']} path={options.mutation.importPath} isTypeOnly />
60
59
  <File.Import name={'client'} path={options.client.importPath} />
61
60
  <File.Import name={['RequestConfig', 'ResponseConfig']} path={options.client.importPath} isTypeOnly />
62
61
  <File.Import
@@ -72,36 +71,46 @@ export const mutationGenerator = createReactGenerator<PluginReactQuery>({
72
71
  path={type.file.path}
73
72
  isTypeOnly
74
73
  />
74
+
75
75
  <MutationKey
76
76
  name={mutationKey.name}
77
77
  typeName={mutationKey.typeName}
78
78
  operation={operation}
79
79
  pathParamsType={options.pathParamsType}
80
80
  typeSchemas={type.schemas}
81
- keysFn={options.mutation.key}
81
+ transformer={options.mutationKey}
82
82
  />
83
+
83
84
  <Client
84
85
  name={client.name}
85
86
  isExportable={false}
86
87
  isIndexable={false}
87
- baseURL={options.baseURL}
88
+ baseURL={options.client.baseURL}
88
89
  operation={operation}
89
90
  typeSchemas={type.schemas}
90
91
  zodSchemas={zod.schemas}
91
92
  dataReturnType={options.client.dataReturnType}
93
+ paramsType={options.paramsType}
92
94
  pathParamsType={options.pathParamsType}
93
95
  parser={options.parser}
94
96
  />
95
- <Mutation
96
- name={mutation.name}
97
- clientName={client.name}
98
- typeName={mutation.typeName}
99
- typeSchemas={type.schemas}
100
- operation={operation}
101
- dataReturnType={options.client.dataReturnType}
102
- pathParamsType={options.pathParamsType}
103
- mutationKeyName={mutationKey.name}
104
- />
97
+ {options.mutation && (
98
+ <>
99
+ <File.Import name={['useMutation']} path={importPath} />
100
+ <File.Import name={['UseMutationOptions']} path={importPath} isTypeOnly />
101
+ <Mutation
102
+ name={mutation.name}
103
+ clientName={client.name}
104
+ typeName={mutation.typeName}
105
+ typeSchemas={type.schemas}
106
+ operation={operation}
107
+ dataReturnType={options.client.dataReturnType}
108
+ paramsType={options.paramsType}
109
+ pathParamsType={options.pathParamsType}
110
+ mutationKeyName={mutationKey.name}
111
+ />
112
+ </>
113
+ )}
105
114
  </File>
106
115
  )
107
116
  },
@@ -19,7 +19,7 @@ export const queryGenerator = createReactGenerator<PluginReactQuery>({
19
19
  const { getSchemas, getName, getFile } = useOperationManager()
20
20
 
21
21
  const isQuery = typeof options.query === 'boolean' ? true : options.query?.methods.some((method) => operation.method === method)
22
- const isMutation = !isQuery && options.mutation && options.mutation.methods.some((method) => operation.method === method)
22
+ const importPath = options.query ? options.query.importPath : '@tanstack/react-query'
23
23
 
24
24
  const query = {
25
25
  name: getName(operation, { type: 'function', prefix: 'use' }),
@@ -51,15 +51,13 @@ export const queryGenerator = createReactGenerator<PluginReactQuery>({
51
51
  schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
52
52
  }
53
53
 
54
- if (!isQuery || typeof options.query === 'boolean') {
54
+ if (!isQuery) {
55
55
  return null
56
56
  }
57
57
 
58
58
  return (
59
59
  <File baseName={query.file.baseName} path={query.file.path} meta={query.file.meta} banner={output?.banner} footer={output?.footer}>
60
60
  {options.parser === 'zod' && <File.Import name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
61
- <File.Import name={['useQuery', 'queryOptions']} path={options.query.importPath} />
62
- <File.Import name={['QueryKey', 'WithRequired', 'QueryObserverOptions', 'UseQueryResult']} path={options.query.importPath} isTypeOnly />
63
61
  <File.Import name={'client'} path={options.client.importPath} />
64
62
  <File.Import name={['RequestConfig']} path={options.client.importPath} isTypeOnly />
65
63
  {options.client.dataReturnType === 'full' && <File.Import name={['ResponseConfig']} path={options.client.importPath} isTypeOnly />}
@@ -76,44 +74,53 @@ export const queryGenerator = createReactGenerator<PluginReactQuery>({
76
74
  path={type.file.path}
77
75
  isTypeOnly
78
76
  />
79
-
80
77
  <QueryKey
81
78
  name={queryKey.name}
82
79
  typeName={queryKey.typeName}
83
80
  operation={operation}
84
81
  pathParamsType={options.pathParamsType}
85
82
  typeSchemas={type.schemas}
86
- keysFn={options.query.key}
83
+ transformer={options.queryKey}
87
84
  />
88
85
  <Client
89
86
  name={client.name}
90
87
  isExportable={false}
91
88
  isIndexable={false}
92
- baseURL={options.baseURL}
89
+ baseURL={options.client.baseURL}
93
90
  operation={operation}
94
91
  typeSchemas={type.schemas}
95
92
  zodSchemas={zod.schemas}
96
93
  dataReturnType={options.client.dataReturnType}
94
+ paramsType={options.paramsType}
97
95
  pathParamsType={options.pathParamsType}
98
96
  parser={options.parser}
99
97
  />
98
+ <File.Import name={['queryOptions']} path={importPath} />
100
99
  <QueryOptions
101
100
  name={queryOptions.name}
102
101
  clientName={client.name}
103
102
  queryKeyName={queryKey.name}
104
103
  typeSchemas={type.schemas}
104
+ paramsType={options.paramsType}
105
105
  pathParamsType={options.pathParamsType}
106
106
  />
107
- <Query
108
- name={query.name}
109
- queryOptionsName={queryOptions.name}
110
- typeSchemas={type.schemas}
111
- pathParamsType={options.pathParamsType}
112
- operation={operation}
113
- dataReturnType={options.client.dataReturnType}
114
- queryKeyName={queryKey.name}
115
- queryKeyTypeName={queryKey.typeName}
116
- />
107
+ {options.query && (
108
+ <>
109
+ <File.Import name={['useQuery']} path={importPath} />
110
+ <File.Import name={['QueryKey', 'QueryObserverOptions', 'UseQueryResult']} path={importPath} isTypeOnly />
111
+ <Query
112
+ name={query.name}
113
+ queryOptionsName={queryOptions.name}
114
+ typeSchemas={type.schemas}
115
+ paramsType={options.paramsType}
116
+ pathParamsType={options.pathParamsType}
117
+ operation={operation}
118
+ dataReturnType={options.client.dataReturnType}
119
+ queryKeyName={queryKey.name}
120
+ queryKeyTypeName={queryKey.typeName}
121
+ />
122
+ </>
123
+ )}
117
124
  </File>
118
125
  )
119
126
  },
@@ -21,6 +21,8 @@ export const suspenseQueryGenerator = createReactGenerator<PluginReactQuery>({
21
21
  const isQuery = typeof options.query === 'boolean' ? options.query : !!options.query.methods?.some((method) => operation.method === method)
22
22
  const isSuspense = isQuery && !!options.suspense
23
23
 
24
+ const importPath = options.query ? options.query.importPath : '@tanstack/react-query'
25
+
24
26
  const query = {
25
27
  name: getName(operation, { type: 'function', prefix: 'use', suffix: 'suspense' }),
26
28
  typeName: getName(operation, { type: 'type' }),
@@ -51,15 +53,13 @@ export const suspenseQueryGenerator = createReactGenerator<PluginReactQuery>({
51
53
  schemas: getSchemas(operation, { pluginKey: [pluginZodName], type: 'function' }),
52
54
  }
53
55
 
54
- if (!isQuery || !isSuspense || typeof options.query === 'boolean') {
56
+ if (!isQuery || !isSuspense) {
55
57
  return null
56
58
  }
57
59
 
58
60
  return (
59
61
  <File baseName={query.file.baseName} path={query.file.path} meta={query.file.meta} banner={output?.banner} footer={output?.footer}>
60
62
  {options.parser === 'zod' && <File.Import name={[zod.schemas.response.name]} root={query.file.path} path={zod.file.path} />}
61
- <File.Import name={['useSuspenseQuery', 'queryOptions']} path={options.query.importPath} />
62
- <File.Import name={['QueryKey', 'WithRequired', 'UseSuspenseQueryOptions', 'UseSuspenseQueryResult']} path={options.query.importPath} isTypeOnly />
63
63
  <File.Import name={'client'} path={options.client.importPath} />
64
64
  <File.Import name={['RequestConfig']} path={options.client.importPath} isTypeOnly />
65
65
  {options.client.dataReturnType === 'full' && <File.Import name={['ResponseConfig']} path={options.client.importPath} isTypeOnly />}
@@ -76,44 +76,54 @@ export const suspenseQueryGenerator = createReactGenerator<PluginReactQuery>({
76
76
  path={type.file.path}
77
77
  isTypeOnly
78
78
  />
79
-
80
79
  <QueryKey
81
80
  name={queryKey.name}
82
81
  typeName={queryKey.typeName}
83
82
  operation={operation}
84
83
  pathParamsType={options.pathParamsType}
85
84
  typeSchemas={type.schemas}
86
- keysFn={options.query.key}
85
+ transformer={options.queryKey}
87
86
  />
87
+
88
88
  <Client
89
89
  name={client.name}
90
90
  isExportable={false}
91
91
  isIndexable={false}
92
- baseURL={options.baseURL}
92
+ baseURL={options.client.baseURL}
93
93
  operation={operation}
94
94
  typeSchemas={type.schemas}
95
95
  zodSchemas={zod.schemas}
96
96
  dataReturnType={options.client.dataReturnType}
97
+ paramsType={options.paramsType}
97
98
  pathParamsType={options.pathParamsType}
98
99
  parser={options.parser}
99
100
  />
101
+ <File.Import name={['queryOptions']} path={importPath} />
100
102
  <QueryOptions
101
103
  name={queryOptions.name}
102
104
  clientName={client.name}
103
105
  queryKeyName={queryKey.name}
104
106
  typeSchemas={type.schemas}
107
+ paramsType={options.paramsType}
105
108
  pathParamsType={options.pathParamsType}
106
109
  />
107
- <SuspenseQuery
108
- name={query.name}
109
- queryOptionsName={queryOptions.name}
110
- typeSchemas={type.schemas}
111
- pathParamsType={options.pathParamsType}
112
- operation={operation}
113
- dataReturnType={options.client.dataReturnType}
114
- queryKeyName={queryKey.name}
115
- queryKeyTypeName={queryKey.typeName}
116
- />
110
+ {options.suspense && (
111
+ <>
112
+ <File.Import name={['useSuspenseQuery']} path={importPath} />
113
+ <File.Import name={['QueryKey', 'UseSuspenseQueryOptions', 'UseSuspenseQueryResult']} path={importPath} isTypeOnly />
114
+ <SuspenseQuery
115
+ name={query.name}
116
+ queryOptionsName={queryOptions.name}
117
+ typeSchemas={type.schemas}
118
+ paramsType={options.paramsType}
119
+ pathParamsType={options.pathParamsType}
120
+ operation={operation}
121
+ dataReturnType={options.client.dataReturnType}
122
+ queryKeyName={queryKey.name}
123
+ queryKeyTypeName={queryKey.typeName}
124
+ />
125
+ </>
126
+ )}
117
127
  </File>
118
128
  )
119
129
  },
package/src/plugin.ts CHANGED
@@ -9,6 +9,8 @@ import { pluginZodName } from '@kubb/plugin-zod'
9
9
 
10
10
  import type { Plugin } from '@kubb/core'
11
11
  import type { PluginOas } from '@kubb/plugin-oas'
12
+ import { MutationKey } from './components'
13
+ import { QueryKey } from './components/QueryKey.tsx'
12
14
  import { infiniteQueryGenerator, mutationGenerator, queryGenerator, suspenseQueryGenerator } from './generators'
13
15
  import type { PluginReactQuery } from './types.ts'
14
16
 
@@ -25,17 +27,19 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
25
27
  suspense = {},
26
28
  infinite = false,
27
29
  transformers = {},
30
+ paramsType = 'inline',
28
31
  pathParamsType = 'inline',
29
32
  generators = [queryGenerator, suspenseQueryGenerator, infiniteQueryGenerator, mutationGenerator].filter(Boolean),
30
33
  mutation = {},
31
34
  query = {},
35
+ mutationKey = MutationKey.getTransformer,
36
+ queryKey = QueryKey.getTransformer,
32
37
  } = options
33
38
 
34
39
  return {
35
40
  name: pluginReactQueryName,
36
41
  options: {
37
42
  output,
38
- baseURL: undefined,
39
43
  client: {
40
44
  importPath: '@kubb/plugin-client/client',
41
45
  dataReturnType: 'data',
@@ -50,19 +54,20 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
50
54
  }
51
55
  : false,
52
56
  suspense,
57
+ queryKey,
53
58
  query: {
54
- key: (key: unknown[]) => key,
55
59
  methods: ['get'],
56
60
  importPath: '@tanstack/react-query',
57
61
  ...query,
58
62
  },
63
+ mutationKey,
59
64
  mutation: {
60
- key: (key: unknown[]) => key,
61
65
  methods: ['post', 'put', 'patch', 'delete'],
62
66
  importPath: '@tanstack/react-query',
63
67
  ...mutation,
64
68
  },
65
- pathParamsType,
69
+ paramsType,
70
+ pathParamsType: paramsType === 'object' ? 'object' : pathParamsType,
66
71
  parser,
67
72
  },
68
73
  pre: [pluginOasName, pluginTsName, parser === 'zod' ? pluginZodName : undefined].filter(Boolean),
@@ -112,22 +117,20 @@ export const pluginReactQuery = createPlugin<PluginReactQuery>((options) => {
112
117
  const mode = FileManager.getMode(path.resolve(root, output.path))
113
118
  const baseURL = await swaggerPlugin.context.getBaseURL()
114
119
 
115
- const operationGenerator = new OperationGenerator(
116
- {
117
- ...this.plugin.options,
118
- baseURL,
119
- },
120
- {
121
- oas,
122
- pluginManager: this.pluginManager,
123
- plugin: this.plugin,
124
- contentType: swaggerPlugin.context.contentType,
125
- exclude,
126
- include,
127
- override,
128
- mode,
129
- },
130
- )
120
+ if (baseURL) {
121
+ this.plugin.options.client.baseURL = baseURL
122
+ }
123
+
124
+ const operationGenerator = new OperationGenerator(this.plugin.options, {
125
+ oas,
126
+ pluginManager: this.pluginManager,
127
+ plugin: this.plugin,
128
+ contentType: swaggerPlugin.context.contentType,
129
+ exclude,
130
+ include,
131
+ override,
132
+ mode,
133
+ })
131
134
 
132
135
  const files = await operationGenerator.build(...generators)
133
136
  await this.addFile(...files)