Merge pull request #2167 from hey-api/fix/tanstack-query-name-builder

fix(tanstack-query): add name builder options for all generated artifacts

Author: mrlubos

.changeset/hip-chefs-drop.md

@@ -0,0 +1,5 @@
+---
+'@hey-api/openapi-ts': patch
+---
+
+fix(tanstack-query): add name builder options for all generated artifacts

.changeset/unlucky-kiwis-smile.md

@@ -0,0 +1,5 @@
+---
+'@hey-api/openapi-ts': patch
+---
+
+fix(parser): set correct subscription context for plugins

docs/openapi-ts/configuration.md

@@ -493,6 +493,23 @@ export default {
 };
 ```
 
+## Pagination
+
+Paginated operations are detected by having a pagination keyword in its parameters or request body. By default, we consider the following to be pagination keywords: `after`, `before`, `cursor`, `offset`, `page`, and `start`. You can override these keywords by providing your own keywords array using `input.pagination.keywords`.
+
+```js
+export default {
+  input: {
+    pagination: {
+      keywords: ['custom', 'pagination', 'keywords'], // [!code ++]
+    },
+    path: 'https://get.heyapi.dev/hey-api/backend',
+  },
+  output: 'src/client',
+  plugins: ['@hey-api/client-fetch'],
+};
+```
+
 ## Patch
 
 There are times when you need to modify your input before it's processed further. A common use case is fixing an invalid specification or adding a missing field. You can apply custom patches with `input.patch`.

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

@@ -114,7 +114,7 @@ The TanStack Query plugin will generate the following artifacts, depending on th
 
 ## Queries
 
-Queries are generated from GET and POST endpoints. The generated functions follow the naming convention of SDK functions and append `Options`, e.g. `getPetByIdOptions()`.
+Queries are generated from GET and POST endpoints. The generated query functions follow the naming convention of SDK functions and by default append `Options`, e.g. `getPetByIdOptions()`.
 
 ```ts
 const { data, error } = useQuery({
@@ -126,9 +126,11 @@ const { data, error } = useQuery({
 });
 ```
 
+You can customize query function names using `queryOptionsNameBuilder`.
+
 ## Infinite Queries
 
-Infinite queries are generated from GET and POST endpoints if we detect a pagination parameter. The generated functions follow the naming convention of SDK functions and append `InfiniteOptions`, e.g. `getFooInfiniteOptions()`.
+Infinite queries are generated from GET and POST endpoints if we detect a [pagination](/openapi-ts/configuration#pagination) parameter. The generated infinite query functions follow the naming convention of SDK functions and by default append `InfiniteOptions`, e.g. `getFooInfiniteOptions()`.
 
 ```ts
 const { data, error } = useInfiniteQuery({
@@ -142,18 +144,11 @@ const { data, error } = useInfiniteQuery({
 });
 ```
 
-Infinite queries are recognized by having one of these keywords in the endpoint's parameters:
-
-- after
-- before
-- cursor
-- offset
-- page
-- start
+You can customize infinite query function names using `infiniteQueryOptionsNameBuilder`.
 
 ## Mutations
 
-Mutations are generated from DELETE, PATCH, POST, and PUT endpoints. The generated functions follow the naming convention of SDK functions and append `Mutation`, e.g. `addPetMutation()`.
+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 addPet = useMutation({
@@ -170,6 +165,8 @@ addPet.mutate({
 });
 ```
 
+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.
@@ -182,7 +179,7 @@ const { queryKey } = getPetByIdOptions({
 });
 ```
 
-Alternatively, you can access the same query key by calling `QueryKey` or `InfiniteQueryKey` function.
+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()`.
 
 ```ts
 const queryKey = getPetByIdQueryKey({
@@ -192,5 +189,7 @@ const queryKey = getPetByIdQueryKey({
 });
 ```
 
+You can customize query key function names using `queryKeyNameBuilder` and `infiniteQueryKeyNameBuilder`.
+
 <!--@include: ../../examples.md-->
 <!--@include: ../../sponsors.md-->

packages/openapi-ts-tests/test/__snapshots__/2.0.x/plugins/@tanstack/angular-query-experimental/name-builder/@tanstack/angular-query-experimental.gen.ts

@@ -0,0 +1,161 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import { type Options, getFoo, fooPost, fooPut, getFooBar, fooBarPost, fooBarPut } from '../sdk.gen';
+import { queryOptions, type MutationOptions, type DefaultError } from '@tanstack/angular-query-experimental';
+import type { GetFooData, FooPostData, FooPostResponse, FooPutData, FooPutResponse, GetFooBarData, FooBarPostData, FooBarPostResponse, FooBarPutData, FooBarPutResponse } from '../types.gen';
+import { client as _heyApiClient } from '../client.gen';
+
+export type QueryKey<TOptions extends Options> = [
+    Pick<TOptions, 'baseUrl' | 'body' | 'headers' | 'path' | 'query'> & {
+        _id: string;
+        _infinite?: boolean;
+    }
+];
+
+const createQueryKey = <TOptions extends Options>(id: string, options?: TOptions, infinite?: boolean): [
+    QueryKey<TOptions>[0]
+] => {
+    const params: QueryKey<TOptions>[0] = { _id: id, baseUrl: (options?.client ?? _heyApiClient).getConfig().baseUrl } as QueryKey<TOptions>[0];
+    if (infinite) {
+        params._infinite = infinite;
+    }
+    if (options?.body) {
+        params.body = options.body;
+    }
+    if (options?.headers) {
+        params.headers = options.headers;
+    }
+    if (options?.path) {
+        params.path = options.path;
+    }
+    if (options?.query) {
+        params.query = options.query;
+    }
+    return [
+        params
+    ];
+};
+
+export const getFooD = (options?: Options<GetFooData>) => createQueryKey('getFoo', options);
+
+export const getFooE = (options?: Options<GetFooData>) => {
+    return queryOptions({
+        queryFn: async ({ queryKey, signal }) => {
+            const { data } = await getFoo({
+                ...options,
+                ...queryKey[0],
+                signal,
+                throwOnError: true
+            });
+            return data;
+        },
+        queryKey: getFooD(options)
+    });
+};
+
+export const fooPostD = (options?: Options<FooPostData>) => createQueryKey('fooPost', options);
+
+export const fooPostE = (options?: Options<FooPostData>) => {
+    return queryOptions({
+        queryFn: async ({ queryKey, signal }) => {
+            const { data } = await fooPost({
+                ...options,
+                ...queryKey[0],
+                signal,
+                throwOnError: true
+            });
+            return data;
+        },
+        queryKey: fooPostD(options)
+    });
+};
+
+export const fooPostC = (options?: Partial<Options<FooPostData>>): MutationOptions<FooPostResponse, DefaultError, Options<FooPostData>> => {
+    const mutationOptions: MutationOptions<FooPostResponse, DefaultError, Options<FooPostData>> = {
+        mutationFn: async (localOptions) => {
+            const { data } = await fooPost({
+                ...options,
+                ...localOptions,
+                throwOnError: true
+            });
+            return data;
+        }
+    };
+    return mutationOptions;
+};
+
+export const fooPutC = (options?: Partial<Options<FooPutData>>): MutationOptions<FooPutResponse, DefaultError, Options<FooPutData>> => {
+    const mutationOptions: MutationOptions<FooPutResponse, DefaultError, Options<FooPutData>> = {
+        mutationFn: async (localOptions) => {
+            const { data } = await fooPut({
+                ...options,
+                ...localOptions,
+                throwOnError: true
+            });
+            return data;
+        }
+    };
+    return mutationOptions;
+};
+
+export const getFooBarD = (options?: Options<GetFooBarData>) => createQueryKey('getFooBar', options);
+
+export const getFooBarE = (options?: Options<GetFooBarData>) => {
+    return queryOptions({
+        queryFn: async ({ queryKey, signal }) => {
+            const { data } = await getFooBar({
+                ...options,
+                ...queryKey[0],
+                signal,
+                throwOnError: true
+            });
+            return data;
+        },
+        queryKey: getFooBarD(options)
+    });
+};
+
+export const fooBarPostD = (options?: Options<FooBarPostData>) => createQueryKey('fooBarPost', options);
+
+export const fooBarPostE = (options?: Options<FooBarPostData>) => {
+    return queryOptions({
+        queryFn: async ({ queryKey, signal }) => {
+            const { data } = await fooBarPost({
+                ...options,
+                ...queryKey[0],
+                signal,
+                throwOnError: true
+            });
+            return data;
+        },
+        queryKey: fooBarPostD(options)
+    });
+};
+
+export const fooBarPostC = (options?: Partial<Options<FooBarPostData>>): MutationOptions<FooBarPostResponse, DefaultError, Options<FooBarPostData>> => {
+    const mutationOptions: MutationOptions<FooBarPostResponse, DefaultError, Options<FooBarPostData>> = {
+        mutationFn: async (localOptions) => {
+            const { data } = await fooBarPost({
+                ...options,
+                ...localOptions,
+                throwOnError: true
+            });
+            return data;
+        }
+    };
+    return mutationOptions;
+};
+
+export const fooBarPutC = (options?: Partial<Options<FooBarPutData>>): MutationOptions<FooBarPutResponse, DefaultError, Options<FooBarPutData>> => {
+    const mutationOptions: MutationOptions<FooBarPutResponse, DefaultError, Options<FooBarPutData>> = {
+        mutationFn: async (localOptions) => {
+            const { data } = await fooBarPut({
+                ...options,
+                ...localOptions,
+                throwOnError: true
+            });
+            return data;
+        }
+    };
+    return mutationOptions;
+};

packages/openapi-ts-tests/test/__snapshots__/3.1.x/pagination-ref-any-of/client.gen.ts renamed to packages/openapi-ts-tests/test/__snapshots__/2.0.x/plugins/@tanstack/angular-query-experimental/name-builder/client.gen.ts

@@ -0,0 +1,61 @@
+// This file is auto-generated by @hey-api/openapi-ts
+
+import type { Options as ClientOptions, TDataShape, Client } from '@hey-api/client-fetch';
+import type { GetFooData, GetFooResponses, FooPostData, FooPostResponses, FooPutData, FooPutResponses, GetFooBarData, GetFooBarResponses, FooBarPostData, FooBarPostResponses, FooBarPutData, FooBarPutResponses } from './types.gen';
+import { client as _heyApiClient } from './client.gen';
+
+export type Options<TData extends TDataShape = TDataShape, ThrowOnError extends boolean = boolean> = ClientOptions<TData, ThrowOnError> & {
+    /**
+     * You can provide a client instance returned by `createClient()` instead of
+     * individual options. This might be also useful if you want to implement a
+     * custom client.
+     */
+    client?: Client;
+    /**
+     * You can pass arbitrary values through the `meta` object. This can be
+     * used to access values that aren't defined as part of the SDK function.
+     */
+    meta?: Record<string, unknown>;
+};
+
+export const getFoo = <ThrowOnError extends boolean = false>(options?: Options<GetFooData, ThrowOnError>) => {
+    return (options?.client ?? _heyApiClient).get<GetFooResponses, unknown, ThrowOnError>({
+        url: '/foo',
+        ...options
+    });
+};
+
+export const fooPost = <ThrowOnError extends boolean = false>(options?: Options<FooPostData, ThrowOnError>) => {
+    return (options?.client ?? _heyApiClient).post<FooPostResponses, unknown, ThrowOnError>({
+        url: '/foo',
+        ...options
+    });
+};
+
+export const fooPut = <ThrowOnError extends boolean = false>(options?: Options<FooPutData, ThrowOnError>) => {
+    return (options?.client ?? _heyApiClient).put<FooPutResponses, unknown, ThrowOnError>({
+        url: '/foo',
+        ...options
+    });
+};
+
+export const getFooBar = <ThrowOnError extends boolean = false>(options?: Options<GetFooBarData, ThrowOnError>) => {
+    return (options?.client ?? _heyApiClient).get<GetFooBarResponses, unknown, ThrowOnError>({
+        url: '/foo/bar',
+        ...options
+    });
+};
+
+export const fooBarPost = <ThrowOnError extends boolean = false>(options?: Options<FooBarPostData, ThrowOnError>) => {
+    return (options?.client ?? _heyApiClient).post<FooBarPostResponses, unknown, ThrowOnError>({
+        url: '/foo/bar',
+        ...options
+    });
+};
+
+export const fooBarPut = <ThrowOnError extends boolean = false>(options?: Options<FooBarPutData, ThrowOnError>) => {
+    return (options?.client ?? _heyApiClient).put<FooBarPutResponses, unknown, ThrowOnError>({
+        url: '/foo/bar',
+        ...options
+    });
+};