feat(tanstack-query): add name and case options

.changeset/polite-pots-watch.md

@@ -0,0 +1,15 @@
+---
+'@hey-api/openapi-ts': minor
+---
+
+feat(tanstack-query): add name and case options
+
+### Updated TanStack Query options
+
+The TanStack Query plugin options have been expanded to support more naming and casing patterns. As a result, the following options have been renamed.
+
+- `queryOptionsNameBuilder` renamed to `queryOptions`
+- `infiniteQueryOptionsNameBuilder` renamed to `infiniteQueryOptions`
+- `mutationOptionsNameBuilder` renamed to `mutationOptions`
+- `queryKeyNameBuilder` renamed to `queryKeys`
+- `infiniteQueryKeyNameBuilder` renamed to `infiniteQueryKeys`

docs/openapi-ts/migrating.md

@@ -29,6 +29,16 @@ This config option is deprecated and will be removed.
 
 ## v0.75.0
 
+### Updated TanStack Query options
+
+The TanStack Query plugin options have been expanded to support more naming and casing patterns. As a result, the following options have been renamed.
+
+- `queryOptionsNameBuilder` renamed to `queryOptions`
+- `infiniteQueryOptionsNameBuilder` renamed to `infiniteQueryOptions`
+- `mutationOptionsNameBuilder` renamed to `mutationOptions`
+- `queryKeyNameBuilder` renamed to `queryKeys`
+- `infiniteQueryKeyNameBuilder` renamed to `infiniteQueryKeys`
+
 ### Added `plugin.forEach()` method
 
 This method replaces the `.subscribe()` method. Additionally, `.forEach()` is executed immediately, which means we don't need the `before` and `after` events – simply move your code before and after the `.forEach()` block.

docs/openapi-ts/plugins/tanstack-query.md

@@ -37,65 +37,55 @@ In your [configuration](/openapi-ts/get-started), add TanStack Query to your plu
 ::: code-group
 
 ```js [react]
-import { defaultPlugins } from '@hey-api/openapi-ts';
-
 export default {
   input: 'https://get.heyapi.dev/hey-api/backend',
   output: 'src/client',
   plugins: [
-    ...defaultPlugins,
+    // ...other plugins
     '@tanstack/react-query', // [!code ++]
   ],
 };
 ```
 
 ```js [vue]
-import { defaultPlugins } from '@hey-api/openapi-ts';
-
 export default {
   input: 'https://get.heyapi.dev/hey-api/backend',
   output: 'src/client',
   plugins: [
-    ...defaultPlugins,
+    // ...other plugins
     '@tanstack/vue-query', // [!code ++]
   ],
 };
 ```
 
 ```js [angular]
-import { defaultPlugins } from '@hey-api/openapi-ts';
-
 export default {
   input: 'https://get.heyapi.dev/hey-api/backend',
   output: 'src/client',
   plugins: [
-    ...defaultPlugins,
+    // ...other plugins
     '@tanstack/angular-query-experimental', // [!code ++]
   ],
 };
 ```
 
 ```js [svelte]
-import { defaultPlugins } from '@hey-api/openapi-ts';
-
 export default {
   input: 'https://get.heyapi.dev/hey-api/backend',
   output: 'src/client',
   plugins: [
-    ...defaultPlugins,
+    // ...other plugins
     '@tanstack/svelte-query', // [!code ++]
   ],
 };
 ```
 
 ```js [solid]
-import { defaultPlugins } from '@hey-api/openapi-ts';
-
 export default {
   input: 'https://get.heyapi.dev/hey-api/backend',
   output: 'src/client',
   plugins: [
-    ...defaultPlugins,
+    // ...other plugins
     '@tanstack/solid-query', // [!code ++]
   ],
 };
@@ -121,7 +111,31 @@ const { data, error } = useQuery({
 });
 ```
 
-You can customize query function names using `queryOptionsNameBuilder`.
+You can customize the naming and casing pattern for query options functions using the `queryOptions.name` and `queryOptions.case` options.
+
+## Query Keys
+
+If you have access to the result of query options function, you can get the query key from the `queryKey` field.
+
+```ts
+const { queryKey } = getPetByIdOptions({
+  path: {
+    petId: 1,
+  },
+});
+```
+
+Alternatively, you can access the same query key by calling query key functions. The generated query key functions follow the naming convention of SDK functions and by default append `QueryKey`, e.g. `getPetByIdQueryKey()`.
+
+```ts
+const queryKey = getPetByIdQueryKey({
+  path: {
+    petId: 1,
+  },
+});
+```
+
+You can customize the naming and casing pattern for query key functions using the `queryKeys.name` and `queryKeys.case` options.
 
 ## Infinite Queries
 
@@ -139,52 +153,52 @@ const { data, error } = useInfiniteQuery({
 });
 ```
 
-You can customize infinite query function names using `infiniteQueryOptionsNameBuilder`.
+You can customize the naming and casing pattern for infinite query options functions using the `infiniteQueryOptions.name` and `infiniteQueryOptions.case` options.
 
-## Mutations
+## Infinite Query Keys
 
-Mutations are generated from DELETE, PATCH, POST, and PUT endpoints. The generated mutation functions follow the naming convention of SDK functions and by default append `Mutation`, e.g. `addPetMutation()`.
+If you have access to the result of infinite query options function, you can get the query key from the `queryKey` field.
 
 ```ts
-const addPet = useMutation({
-  ...addPetMutation(),
-  onError: (error) => {
-    console.log(error);
-  },
-});
-
-addPet.mutate({
-  body: {
-    name: 'Kitty',
+const { queryKey } = getPetByIdInfiniteOptions({
+  path: {
+    petId: 1,
   },
 });
 ```
 
-You can customize mutation function names using `mutationOptionsNameBuilder`.
-
-## Query Keys
-
-Query keys are generated for both queries and infinite queries. If you have access to the result of query or infinite query options function, you can get the query key from the `queryKey` field.
+Alternatively, you can access the same query key by calling query key functions. The generated query key functions follow the naming convention of SDK functions and by default append `InfiniteQueryKey`, e.g. `getPetByIdInfiniteQueryKey()`.
 
 ```ts
-const { queryKey } = getPetByIdOptions({
+const queryKey = getPetByIdInfiniteQueryKey({
   path: {
     petId: 1,
   },
 });
 ```
 
-Alternatively, you can access the same query key by calling query key functions. The generated query key functions follow the naming convention of SDK functions and by default append `QueryKey` or `InfiniteQueryKey`, e.g. `getPetByIdQueryKey()` or `getPetByIdInfiniteQueryKey()`.
+You can customize the naming and casing pattern for infinite query key functions using the `infiniteQueryKeys.name` and `infiniteQueryKeys.case` options.
+
+## Mutations
+
+Mutations are generated from DELETE, PATCH, POST, and PUT endpoints. The generated mutation functions follow the naming convention of SDK functions and by default append `Mutation`, e.g. `addPetMutation()`.
 
 ```ts
-const queryKey = getPetByIdQueryKey({
-  path: {
-    petId: 1,
+const addPet = useMutation({
+  ...addPetMutation(),
+  onError: (error) => {
+    console.log(error);
+  },
+});
+
+addPet.mutate({
+  body: {
+    name: 'Kitty',
   },
 });
 ```
 
-You can customize query key function names using `queryKeyNameBuilder` and `infiniteQueryKeyNameBuilder`.
+You can customize the naming and casing pattern for mutation options functions using the `mutationOptions.name` and `mutationOptions.case` options.
 
 <!--@include: ../../examples.md-->
 <!--@include: ../../sponsors.md-->

packages/openapi-ts-tests/test/openapi-ts.config.ts

@@ -60,8 +60,8 @@ export default defineConfig(() => {
       //   'invalid',
       //   'servers-entry.yaml',
       // ),
-      // path: path.resolve(__dirname, 'spec', '3.1.x', 'validators.yaml'),
-      path: path.resolve(__dirname, 'spec', 'v3-transforms.json'),
+      path: path.resolve(__dirname, 'spec', '3.1.x', 'full.yaml'),
+      // path: path.resolve(__dirname, 'spec', 'v3-transforms.json'),
       // path: 'http://localhost:4000/',
       // path: 'https://get.heyapi.dev/',
       // path: 'https://get.heyapi.dev/hey-api/backend?branch=main&version=1.0.0',
@@ -150,13 +150,25 @@ export default defineConfig(() => {
         // name: 'fastify',
       },
       {
+        // case: 'SCREAMING_SNAKE_CASE',
+        // comments: false,
         exportFromIndex: true,
-        infiniteQueryKeyNameBuilder: '{{name}}IQK',
-        infiniteQueryOptionsNameBuilder: '{{name}}InfiniteQuery',
-        mutationOptionsNameBuilder: '{{name}}MutationOptions',
-        // name: '@tanstack/react-query',
-        queryKeyNameBuilder: '{{name}}QK',
-        queryOptionsNameBuilder: '{{name}}Query',
+        // infiniteQueryKeys: {
+        //   name: '{{name}}IQK',
+        // },
+        // infiniteQueryOptions: {
+        //   name: '{{name}}IQO',
+        // },
+        // mutationOptions: {
+        //   name: '{{name}}MO',
+        // },
+        name: '@tanstack/react-query',
+        // queryKeys: {
+        //   name: '{{name}}QK',
+        // },
+        // queryOptions: {
+        //   name: '{{name}}QO',
+        // },
       },
       {
         // comments: false,

packages/openapi-ts-tests/test/plugins.test.ts

@@ -220,12 +220,22 @@ for (const version of versions) {
           output: 'name-builder',
           plugins: [
             {
-              infiniteQueryKeyNameBuilder: '{{name}}A',
-              infiniteQueryOptionsNameBuilder: '{{name}}B',
-              mutationOptionsNameBuilder: '{{name}}C',
+              infiniteQueryKeys: {
+                name: '{{name}}A',
+              },
+              infiniteQueryOptions: {
+                name: '{{name}}B',
+              },
+              mutationOptions: {
+                name: '{{name}}C',
+              },
               name: '@tanstack/angular-query-experimental',
-              queryKeyNameBuilder: '{{name}}D',
-              queryOptionsNameBuilder: '{{name}}E',
+              queryKeys: {
+                name: '{{name}}D',
+              },
+              queryOptions: {
+                name: '{{name}}E',
+              },
             },
             '@hey-api/client-fetch',
             '@hey-api/sdk',
@@ -240,12 +250,22 @@ for (const version of versions) {
           output: 'name-builder',
           plugins: [
             {
-              infiniteQueryKeyNameBuilder: '{{name}}A',
-              infiniteQueryOptionsNameBuilder: '{{name}}B',
-              mutationOptionsNameBuilder: '{{name}}C',
+              infiniteQueryKeys: {
+                name: '{{name}}A',
+              },
+              infiniteQueryOptions: {
+                name: '{{name}}B',
+              },
+              mutationOptions: {
+                name: '{{name}}C',
+              },
               name: '@tanstack/react-query',
-              queryKeyNameBuilder: '{{name}}D',
-              queryOptionsNameBuilder: '{{name}}E',
+              queryKeys: {
+                name: '{{name}}D',
+              },
+              queryOptions: {
+                name: '{{name}}E',
+              },
             },
             '@hey-api/client-fetch',
             '@hey-api/sdk',
@@ -260,12 +280,22 @@ for (const version of versions) {
           output: 'name-builder',
           plugins: [
             {
-              infiniteQueryKeyNameBuilder: '{{name}}A',
-              infiniteQueryOptionsNameBuilder: '{{name}}B',
-              mutationOptionsNameBuilder: '{{name}}C',
+              infiniteQueryKeys: {
+                name: '{{name}}A',
+              },
+              infiniteQueryOptions: {
+                name: '{{name}}B',
+              },
+              mutationOptions: {
+                name: '{{name}}C',
+              },
               name: '@tanstack/solid-query',
-              queryKeyNameBuilder: '{{name}}D',
-              queryOptionsNameBuilder: '{{name}}E',
+              queryKeys: {
+                name: '{{name}}D',
+              },
+              queryOptions: {
+                name: '{{name}}E',
+              },
             },
             '@hey-api/client-fetch',
             '@hey-api/sdk',
@@ -280,12 +310,22 @@ for (const version of versions) {
           output: 'name-builder',
           plugins: [
             {
-              infiniteQueryKeyNameBuilder: '{{name}}A',
-              infiniteQueryOptionsNameBuilder: '{{name}}B',
-              mutationOptionsNameBuilder: '{{name}}C',
+              infiniteQueryKeys: {
+                name: '{{name}}A',
+              },
+              infiniteQueryOptions: {
+                name: '{{name}}B',
+              },
+              mutationOptions: {
+                name: '{{name}}C',
+              },
               name: '@tanstack/svelte-query',
-              queryKeyNameBuilder: '{{name}}D',
-              queryOptionsNameBuilder: '{{name}}E',
+              queryKeys: {
+                name: '{{name}}D',
+              },
+              queryOptions: {
+                name: '{{name}}E',
+              },
             },
             '@hey-api/client-fetch',
             '@hey-api/sdk',
@@ -300,12 +340,22 @@ for (const version of versions) {
           output: 'name-builder',
           plugins: [
             {
-              infiniteQueryKeyNameBuilder: '{{name}}A',
-              infiniteQueryOptionsNameBuilder: '{{name}}B',
-              mutationOptionsNameBuilder: '{{name}}C',
+              infiniteQueryKeys: {
+                name: '{{name}}A',
+              },
+              infiniteQueryOptions: {
+                name: '{{name}}B',
+              },
+              mutationOptions: {
+                name: '{{name}}C',
+              },
               name: '@tanstack/vue-query',
-              queryKeyNameBuilder: '{{name}}D',
-              queryOptionsNameBuilder: '{{name}}E',
+              queryKeys: {
+                name: '{{name}}D',
+              },
+              queryOptions: {
+                name: '{{name}}E',
+              },
             },
             '@hey-api/client-fetch',
             '@hey-api/sdk',