···11111212We all send HTTP requests in a slightly different way. Hey API doesn't force you to use any specific technology. What we do, however, is support your choice with great clients. All seamlessly integrated with our other features.
13131414-[Next.js](https://nextjs.org/) coming soon.
1515-1614## Features
17151816- seamless integration with `@hey-api/openapi-ts`
···2220- minimal learning curve thanks to extending the underlying technology
2321- support bundling inside the generated output
24222525-## Fetch API
2626-2727-::: warning
2828-Fetch API client is currently in beta. The interface might change before it becomes stable. We encourage you to leave feedback on [GitHub](https://github.com/hey-api/openapi-ts/issues).
2929-:::
3030-3131-Start by adding `@hey-api/client-fetch` to your dependencies.
3232-3333-::: code-group
3434-3535-```sh [npm]
3636-npm install @hey-api/client-fetch
3737-```
3838-3939-```sh [pnpm]
4040-pnpm add @hey-api/client-fetch
4141-```
4242-4343-```sh [yarn]
4444-yarn add @hey-api/client-fetch
4545-```
4646-4747-```sh [bun]
4848-bun add @hey-api/client-fetch
4949-```
5050-5151-:::
5252-5353-Ensure you have already [configured](/openapi-ts/get-started) `@hey-api/openapi-ts`. Update your configuration to use the Fetch API client package.
5454-5555-```js{2}
5656-export default {
5757- client: '@hey-api/client-fetch',
5858- input: 'path/to/openapi.json',
5959- output: 'src/client',
6060-}
6161-```
6262-6363-You can now run `openapi-ts` to use the new Fetch API client. 🎉
6464-6565-### Configuration
6666-6767-If you're using services, you will want to configure the internal client instance. You can do that with the `createClient()` method. Call it at the beginning of your application.
6868-6969-```js
7070-import { createClient } from '@hey-api/client-fetch';
7171-7272-createClient({
7373- baseUrl: 'https://example.com',
7474-});
7575-```
7676-7777-### Interceptors
7878-7979-Another common requirement is request authorization. Interceptors are ideal for adding headers to your requests.
8080-8181-```js
8282-import { client } from '@hey-api/client-fetch';
8383-8484-client.interceptors.request.use((request, options) => {
8585- request.headers.set('Authorization', 'Bearer <my_token>');
8686- return request;
8787-});
8888-```
8989-9090-### Customization
9191-9292-Our Fetch client is built as a thin wrapper on top of Fetch API, extending its functionality to work with Hey API. If you're already familiar with Fetch, customizing your client will feel like working directly with Fetch API. You can customize requests in three ways – globally, per client, or per request.
9393-9494-#### Global
9595-9696-This is the most common requirement. Our generated services consume an internal Fetch instance, so you will want to configure that.
9797-9898-```js
9999-import { createClient } from '@hey-api/client-fetch';
100100-101101-createClient({
102102- baseUrl: 'https://example.com',
103103-});
104104-```
105105-106106-You can pass any Fetch API configuration option to `createClient()`, and even your own Fetch implementation.
107107-108108-#### Client
109109-110110-If you need to create a client instance pointing to a different domain, you can create a non-global client. This client will not be used by default by the generated services.
111111-112112-```js
113113-import { createClient } from '@hey-api/client-fetch';
114114-115115-const myClient = createClient({
116116- baseUrl: 'https://example.com',
117117- global: false, // <-- create a non-global client
118118-});
119119-```
120120-121121-You can then pass this client to any generated service through the `client` option. This will override the default global instance.
122122-123123-```js
124124-const response = await getFoo({
125125- client: myClient,
126126-});
127127-```
2323+## Available Clients
12824129129-#### Request
130130-131131-Alternatively, you can pass the Fetch API configuration options to each service call directly. This is useful if you don't want to create a separate client for one-off use cases.
132132-133133-```js
134134-const response = await getFoo({
135135- baseUrl: 'https://example.com', // <-- override global configuration
136136-});
137137-```
138138-139139-### Example
140140-141141-You can view a more complete example on this page.
142142-143143-<button class="buttonLink" @click="(event) => embedProject('hey-api-client-fetch-example')(event)">
144144-Live demo
145145-</button>
146146-147147-## Axios
148148-149149-::: warning
150150-Axios client is currently in beta. The interface might change before it becomes stable. We encourage you to leave feedback on [GitHub](https://github.com/hey-api/openapi-ts/issues).
151151-:::
152152-153153-Start by adding `@hey-api/client-axios` to your dependencies.
154154-155155-::: code-group
156156-157157-```sh [npm]
158158-npm install @hey-api/client-axios
159159-```
160160-161161-```sh [pnpm]
162162-pnpm add @hey-api/client-axios
163163-```
164164-165165-```sh [yarn]
166166-yarn add @hey-api/client-axios
167167-```
168168-169169-```sh [bun]
170170-bun add @hey-api/client-axios
171171-```
172172-173173-:::
174174-175175-Ensure you have already [configured](/openapi-ts/get-started) `@hey-api/openapi-ts`. Update your configuration to use the Axios client package.
176176-177177-```js{2}
178178-export default {
179179- client: '@hey-api/client-axios',
180180- input: 'path/to/openapi.json',
181181- output: 'src/client',
182182-}
183183-```
184184-185185-You can now run `openapi-ts` to use the new Axios client. 🎉
186186-187187-### Configuration
188188-189189-If you're using services, you will want to configure the internal client instance. You can do that with the `createClient()` method. Call it at the beginning of your application.
190190-191191-```js
192192-import { createClient } from '@hey-api/client-axios';
193193-194194-createClient({
195195- baseURL: 'https://example.com',
196196-});
197197-```
198198-199199-### Interceptors
200200-201201-Another common requirement is request authorization. Interceptors are ideal for adding headers to your requests.
202202-203203-```js
204204-import { client } from '@hey-api/client-axios';
205205-206206-client.instance.interceptors.request.use((config) => {
207207- config.headers.set('Authorization', 'Bearer <my_token>');
208208- return config;
209209-});
210210-```
211211-212212-### Customization
213213-214214-Our Axios client is built as a thin wrapper on top of Axios, extending its functionality to work with Hey API. If you're already familiar with Axios, customizing your client will feel like working directly with Axios. You can customize requests in three ways – globally, per client, or per request.
215215-216216-#### Global
217217-218218-This is the most common requirement. Our generated services consume an internal Axios instance, so you will want to configure that.
219219-220220-```js
221221-import { createClient } from '@hey-api/client-axios';
222222-223223-createClient({
224224- baseURL: 'https://example.com',
225225-});
226226-```
227227-228228-You can pass any Axios configuration option to `createClient()`, and even your own Axios implementation.
229229-230230-#### Client
231231-232232-If you need to create a client instance pointing to a different domain, you can create a non-global client. This client will not be used by default by the generated services.
233233-234234-```js
235235-import { createClient } from '@hey-api/client-axios';
236236-237237-const myClient = createClient({
238238- baseURL: 'https://example.com',
239239- global: false, // <-- create a non-global client
240240-});
241241-```
242242-243243-You can then pass this client to any generated service through the `client` option. This will override the default global instance.
244244-245245-```js
246246-const response = await getFoo({
247247- client: myClient,
248248-});
249249-```
250250-251251-#### Request
252252-253253-Alternatively, you can pass the Axios configuration options to each service call directly. This is useful if you don't want to create a separate client for one-off use cases.
254254-255255-```js
256256-const response = await getFoo({
257257- baseURL: 'https://example.com', // <-- override global configuration
258258-});
259259-```
260260-261261-### Example
262262-263263-You can view a more complete example on this page.
264264-265265-<button class="buttonLink" @click="(event) => embedProject('hey-api-client-axios-example')(event)">
266266-Live demo
267267-</button>
268268-269269-## Bundling
270270-271271-Sometimes, you may not want to declare standalone clients as a dependency. This scenario is common if you're using Hey API to generate output that is repackaged and published for other consumers under your own brand. For such cases, our clients support bundling through the `client.bundle` configuration option.
272272-273273-```js
274274-export default {
275275- client: {
276276- bundle: true, // [!code ++]
277277- name: '@hey-api/client-fetch',
278278- },
279279- input: 'path/to/openapi.json',
280280- output: 'src/client',
281281-};
282282-```
283283-284284-## Legacy Clients
285285-286286-Before standalone client packages, clients were generated using `@hey-api/openapi-ts`. In fact, `@hey-api/openapi-ts` still supports generating legacy clients. You can generate them with the `client` config option.
287287-288288-::: code-group
289289-290290-```js{2} [fetch]
291291-export default {
292292- client: 'fetch',
293293- input: 'path/to/openapi.json',
294294- output: 'src/client',
295295-}
296296-```
297297-298298-```js{2} [axios]
299299-export default {
300300- client: 'axios',
301301- input: 'path/to/openapi.json',
302302- output: 'src/client',
303303-}
304304-```
305305-306306-```js{2} [angular]
307307-export default {
308308- client: 'angular',
309309- input: 'path/to/openapi.json',
310310- output: 'src/client',
311311-}
312312-```
313313-314314-```js{2} [node]
315315-export default {
316316- client: 'node',
317317- input: 'path/to/openapi.json',
318318- output: 'src/client',
319319-}
320320-```
321321-322322-```js{2} [xhr]
323323-export default {
324324- client: 'xhr',
325325- input: 'path/to/openapi.json',
326326- output: 'src/client',
327327-}
328328-```
329329-330330-:::
331331-332332-The following legacy clients are available:
333333-334334-- [angular](https://angular.io/) (using [RxJS](https://rxjs.dev/))
335335-- [axios](https://axios-http.com/)
336336-- [fetch](https://developer.mozilla.org/docs/Web/API/Fetch_API)
337337-- [node](https://nodejs.org/) (using [node-fetch](https://www.npmjs.com/package/node-fetch))
338338-- [xhr](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)
339339-340340-Please be aware that legacy clients are missing some key features:
341341-342342-- no typesafe errors 🚫
343343-- no access to the original request and response 🚫
344344-- hard to configure individual requests 👎
345345-- inconsistent interceptors and response APIs 👎
2525+- [Fetch API](/openapi-ts/clients/fetch)
2626+- [Axios](/openapi-ts/clients/axios)
2727+- [Legacy](/openapi-ts/clients/legacy)
2828+- [Next.js](https://nextjs.org/) <span class="soon">Soon</span>
3462934730If you'd like a standalone package for your client, let us know by [opening an issue](https://github.com/hey-api/openapi-ts/issues).
348348-349349-::: tip
350350-You might not need a `node` client. Fetch API is [experimental](https://nodejs.org/docs/latest-v18.x/api/globals.html#fetch) in Node.js v18 and [stable](https://nodejs.org/docs/latest-v21.x/api/globals.html#fetch) in Node.js v21. We recommend upgrading to the latest Node.js version.
351351-:::
3523135332<!--@include: ../examples.md-->
+158
docs/openapi-ts/clients/axios.md
···11+---
22+title: Axios client
33+description: Axios client for your stack. Compatible with all our features.
44+---
55+66+<script setup>
77+import { embedProject } from '../../embed'
88+</script>
99+1010+# Axios
1111+1212+::: warning
1313+Axios client is currently in beta. The interface might change before it becomes stable. We encourage you to leave feedback on [GitHub](https://github.com/hey-api/openapi-ts/issues).
1414+:::
1515+1616+Plug and play Axios wrapper for `@hey-api/openapi-ts` generator.
1717+1818+<button class="buttonLink" @click="(event) => embedProject('hey-api-client-axios-example')(event)">
1919+Live demo
2020+</button>
2121+2222+## Installation
2323+2424+Start by adding `@hey-api/client-axios` to your dependencies.
2525+2626+::: code-group
2727+2828+```sh [npm]
2929+npm install @hey-api/client-axios
3030+```
3131+3232+```sh [pnpm]
3333+pnpm add @hey-api/client-axios
3434+```
3535+3636+```sh [yarn]
3737+yarn add @hey-api/client-axios
3838+```
3939+4040+```sh [bun]
4141+bun add @hey-api/client-axios
4242+```
4343+4444+:::
4545+4646+Ensure you have already [configured](/openapi-ts/get-started) `@hey-api/openapi-ts`. Update your configuration to use the Axios client package.
4747+4848+```js{2}
4949+export default {
5050+ client: '@hey-api/client-axios',
5151+ input: 'path/to/openapi.json',
5252+ output: 'src/client',
5353+}
5454+```
5555+5656+You can now run `openapi-ts` to use the new Axios client. 🎉
5757+5858+## Configuration
5959+6060+If you're using services, you will want to configure the internal client instance. You can do that with the `setConfig()` method. Call it at the beginning of your application.
6161+6262+```js
6363+import { client } from 'client/services.gen';
6464+6565+client.setConfig({
6666+ baseURL: 'https://example.com',
6767+});
6868+```
6969+7070+If you aren't using services, you can create your own client instance.
7171+7272+```js
7373+import { createClient } from '@hey-api/client-axios';
7474+7575+const client = createClient({
7676+ baseURL: 'https://example.com',
7777+});
7878+```
7979+8080+## Interceptors
8181+8282+Interceptors (middleware) can be used to modify requests before they're sent or responses before they're returned to the rest of your application. Axios provides interceptors, please refer to their documentation on [interceptors](https://axios-http.com/docs/interceptors).
8383+8484+We expose the Axios instance through the `instance` field.
8585+8686+```js
8787+import { client } from 'client/services.gen';
8888+8989+client.instance.interceptors.request.use((config) => {
9090+ config.headers.set('Authorization', 'Bearer <my_token>');
9191+ return config;
9292+});
9393+```
9494+9595+## Customization
9696+9797+Our Axios client is built as a thin wrapper on top of Axios, extending its functionality to work with Hey API. If you're already familiar with Axios, customizing your client will feel like working directly with Axios. You can customize requests in three ways – through services, per client, or per request.
9898+9999+### Services
100100+101101+This is the most common requirement. Our generated services consume an internal Axios instance, so you will want to configure that.
102102+103103+```js
104104+import { client } from 'client/services.gen';
105105+106106+client.setConfig({
107107+ baseURL: 'https://example.com',
108108+});
109109+```
110110+111111+You can pass any Axios configuration option to `setConfig()`, and even your own Axios implementation.
112112+113113+### Client
114114+115115+If you need to create a client pointing to a different domain, you can create your own client instance.
116116+117117+```js
118118+import { createClient } from '@hey-api/client-axios';
119119+120120+const myClient = createClient({
121121+ baseURL: 'https://example.com',
122122+});
123123+```
124124+125125+You can then pass this instance to any generated service through the `client` option. This will override the internal instance.
126126+127127+```js
128128+const response = await getFoo({
129129+ client: myClient,
130130+});
131131+```
132132+133133+### Request
134134+135135+Alternatively, you can pass the Axios configuration options to each service call directly. This is useful if you don't want to create a separate client for one-off use cases.
136136+137137+```js
138138+const response = await getFoo({
139139+ baseURL: 'https://example.com', // <-- override internal configuration
140140+});
141141+```
142142+143143+## Bundling
144144+145145+Sometimes, you may not want to declare standalone clients as a dependency. This scenario is common if you're using Hey API to generate output that is repackaged and published for other consumers under your own brand. For such cases, our clients support bundling through the `client.bundle` configuration option.
146146+147147+```js
148148+export default {
149149+ client: {
150150+ bundle: true, // [!code ++]
151151+ name: '@hey-api/client-axios',
152152+ },
153153+ input: 'path/to/openapi.json',
154154+ output: 'src/client',
155155+};
156156+```
157157+158158+<!--@include: ../../examples.md-->
+197
docs/openapi-ts/clients/fetch.md
···11+---
22+title: Fetch API client
33+description: Fetch API client for your stack. Compatible with all our features.
44+---
55+66+<script setup>
77+import { embedProject } from '../../embed'
88+</script>
99+1010+# Fetch API
1111+1212+::: warning
1313+Fetch API client is currently in beta. The interface might change before it becomes stable. We encourage you to leave feedback on [GitHub](https://github.com/hey-api/openapi-ts/issues).
1414+:::
1515+1616+Plug and play Fetch API wrapper for `@hey-api/openapi-ts` generator.
1717+1818+<button class="buttonLink" @click="(event) => embedProject('hey-api-client-fetch-example')(event)">
1919+Live demo
2020+</button>
2121+2222+## Installation
2323+2424+Start by adding `@hey-api/client-fetch` to your dependencies.
2525+2626+::: code-group
2727+2828+```sh [npm]
2929+npm install @hey-api/client-fetch
3030+```
3131+3232+```sh [pnpm]
3333+pnpm add @hey-api/client-fetch
3434+```
3535+3636+```sh [yarn]
3737+yarn add @hey-api/client-fetch
3838+```
3939+4040+```sh [bun]
4141+bun add @hey-api/client-fetch
4242+```
4343+4444+:::
4545+4646+Ensure you have already [configured](/openapi-ts/get-started) `@hey-api/openapi-ts`. Update your configuration to use the Fetch API client package.
4747+4848+```js{2}
4949+export default {
5050+ client: '@hey-api/client-fetch',
5151+ input: 'path/to/openapi.json',
5252+ output: 'src/client',
5353+}
5454+```
5555+5656+You can now run `openapi-ts` to use the new Fetch API client. 🎉
5757+5858+## Configuration
5959+6060+If you're using services, you will want to configure the internal client instance. You can do that with the `setConfig()` method. Call it at the beginning of your application.
6161+6262+```js
6363+import { client } from 'client/services.gen';
6464+6565+client.setConfig({
6666+ baseUrl: 'https://example.com',
6767+});
6868+```
6969+7070+If you aren't using services, you can create your own client instance.
7171+7272+```js
7373+import { createClient } from '@hey-api/client-fetch';
7474+7575+const client = createClient({
7676+ baseUrl: 'https://example.com',
7777+});
7878+```
7979+8080+## Interceptors
8181+8282+Interceptors (middleware) can be used to modify requests before they're sent or responses before they're returned to the rest of your application. Fetch API does not have the interceptor functionality, so we implement our own. Below is an example request interceptor
8383+8484+::: code-group
8585+8686+```js [use]
8787+import { client } from 'client/services.gen';
8888+8989+client.interceptors.request.use((request, options) => {
9090+ request.headers.set('Authorization', 'Bearer <my_token>');
9191+ return request;
9292+});
9393+```
9494+9595+```js [eject]
9696+import { client } from 'client/services.gen';
9797+9898+client.interceptors.request.eject((request, options) => {
9999+ request.headers.set('Authorization', 'Bearer <my_token>');
100100+ return request;
101101+});
102102+```
103103+104104+:::
105105+106106+and an example response interceptor
107107+108108+::: code-group
109109+110110+```js [use]
111111+import { client } from 'client/services.gen';
112112+113113+client.interceptors.response.use((response, request, options) => {
114114+ trackAnalytics(response);
115115+ return response;
116116+});
117117+```
118118+119119+```js [eject]
120120+import { client } from 'client/services.gen';
121121+122122+client.interceptors.response.eject((response, request, options) => {
123123+ trackAnalytics(response);
124124+ return response;
125125+});
126126+```
127127+128128+:::
129129+130130+::: tip
131131+To eject, you must provide a reference to the function that was passed to `use()`.
132132+:::
133133+134134+## Customization
135135+136136+Our Fetch client is built as a thin wrapper on top of Fetch API, extending its functionality to work with Hey API. If you're already familiar with Fetch, customizing your client will feel like working directly with Fetch API. You can customize requests in three ways – through services, per client, or per request.
137137+138138+### Services
139139+140140+This is the most common requirement. Our generated services consume an internal Fetch instance, so you will want to configure that.
141141+142142+```js
143143+import { client } from 'client/services.gen';
144144+145145+client.setConfig({
146146+ baseUrl: 'https://example.com',
147147+});
148148+```
149149+150150+You can pass any Fetch API configuration option to `setConfig()`, and even your own Fetch implementation.
151151+152152+### Client
153153+154154+If you need to create a client pointing to a different domain, you can create your own client instance.
155155+156156+```js
157157+import { createClient } from '@hey-api/client-fetch';
158158+159159+const myClient = createClient({
160160+ baseUrl: 'https://example.com',
161161+});
162162+```
163163+164164+You can then pass this instance to any generated service through the `client` option. This will override the internal instance.
165165+166166+```js
167167+const response = await getFoo({
168168+ client: myClient,
169169+});
170170+```
171171+172172+### Request
173173+174174+Alternatively, you can pass the Fetch API configuration options to each service call directly. This is useful if you don't want to create a separate client for one-off use cases.
175175+176176+```js
177177+const response = await getFoo({
178178+ baseUrl: 'https://example.com', // <-- override internal configuration
179179+});
180180+```
181181+182182+## Bundling
183183+184184+Sometimes, you may not want to declare standalone clients as a dependency. This scenario is common if you're using Hey API to generate output that is repackaged and published for other consumers under your own brand. For such cases, our clients support bundling through the `client.bundle` configuration option.
185185+186186+```js
187187+export default {
188188+ client: {
189189+ bundle: true, // [!code ++]
190190+ name: '@hey-api/client-fetch',
191191+ },
192192+ input: 'path/to/openapi.json',
193193+ output: 'src/client',
194194+};
195195+```
196196+197197+<!--@include: ../../examples.md-->
+131
docs/openapi-ts/clients/legacy.md
···11+---
22+title: Legacy clients
33+description: Legacy client for your stack.
44+---
55+66+<script setup>
77+import { embedProject } from '../../embed'
88+</script>
99+1010+# Legacy Clients
1111+1212+Before standalone client packages, clients were generated using `@hey-api/openapi-ts`. In fact, `@hey-api/openapi-ts` still supports generating legacy clients. You can generate them with the `client` config option.
1313+1414+::: code-group
1515+1616+```js{2} [fetch]
1717+export default {
1818+ client: 'fetch',
1919+ input: 'path/to/openapi.json',
2020+ output: 'src/client',
2121+}
2222+```
2323+2424+```js{2} [axios]
2525+export default {
2626+ client: 'axios',
2727+ input: 'path/to/openapi.json',
2828+ output: 'src/client',
2929+}
3030+```
3131+3232+```js{2} [angular]
3333+export default {
3434+ client: 'angular',
3535+ input: 'path/to/openapi.json',
3636+ output: 'src/client',
3737+}
3838+```
3939+4040+```js{2} [node]
4141+export default {
4242+ client: 'node',
4343+ input: 'path/to/openapi.json',
4444+ output: 'src/client',
4545+}
4646+```
4747+4848+```js{2} [xhr]
4949+export default {
5050+ client: 'xhr',
5151+ input: 'path/to/openapi.json',
5252+ output: 'src/client',
5353+}
5454+```
5555+5656+:::
5757+5858+## Available Clients
5959+6060+- [angular](https://angular.io/) (using [RxJS](https://rxjs.dev/))
6161+- [axios](https://axios-http.com/)
6262+- [fetch](https://developer.mozilla.org/docs/Web/API/Fetch_API)
6363+- [node](https://nodejs.org/) (using [node-fetch](https://www.npmjs.com/package/node-fetch))
6464+- [xhr](https://developer.mozilla.org/docs/Web/API/XMLHttpRequest)
6565+6666+## Caveats
6767+6868+Please be aware that legacy clients are missing some key features:
6969+7070+- no typesafe errors 🚫
7171+- no access to the original request and response 🚫
7272+- hard to configure individual requests 👎
7373+- inconsistent interceptors and response APIs 👎
7474+7575+::: tip
7676+You might not need a `node` client. Fetch API is [experimental](https://nodejs.org/docs/latest-v18.x/api/globals.html#fetch) in Node.js v18 and [stable](https://nodejs.org/docs/latest-v21.x/api/globals.html#fetch) in Node.js v21. We recommend upgrading to the latest Node.js version.
7777+:::
7878+7979+## Interceptors
8080+8181+Interceptors (middleware) can be used to modify requests before they're sent or responses before they're returned to the rest of your application.
8282+8383+Below is an example request interceptor
8484+8585+::: code-group
8686+8787+```js [use]
8888+OpenAPI.interceptors.request.use((request) => {
8989+ doSomethingWithRequest(request);
9090+ return request; // <-- must return request
9191+});
9292+```
9393+9494+```js [eject]
9595+OpenAPI.interceptors.request.eject((request) => {
9696+ doSomethingWithRequest(request);
9797+ return request; // <-- must return request
9898+});
9999+```
100100+101101+:::
102102+103103+and an example response interceptor
104104+105105+::: code-group
106106+107107+```js [use]
108108+OpenAPI.interceptors.response.use(async (response) => {
109109+ await doSomethingWithResponse(response); // async
110110+ return response; // <-- must return response
111111+});
112112+```
113113+114114+```js [eject]
115115+OpenAPI.interceptors.response.eject(async (response) => {
116116+ await doSomethingWithResponse(response); // async
117117+ return response; // <-- must return response
118118+});
119119+```
120120+121121+:::
122122+123123+::: tip
124124+To eject, you must provide the same function that was passed to `use()`.
125125+:::
126126+127127+::: warning
128128+Angular client does not currently support request interceptors.
129129+:::
130130+131131+<!--@include: ../../examples.md-->
-127
docs/openapi-ts/interceptors.md
···11----
22-title: Interceptors
33-description: Understanding interceptors.
44----
55-66-# Interceptors
77-88-Interceptors (middleware) can be used to modify requests before they're sent or responses before they're returned to the rest of your application. If you're not using the standalone client packages, jump to the [legacy clients](#legacy-clients) section.
99-1010-## Fetch API
1111-1212-Fetch API does not have the interceptor functionality, so we implement our own. Below is an example request interceptor
1313-1414-::: code-group
1515-1616-```js [use]
1717-import { client } from '@hey-api/client-fetch';
1818-1919-client.interceptors.request.use((request, options) => {
2020- request.headers.set('Authorization', 'Bearer <my_token>');
2121- return request;
2222-});
2323-```
2424-2525-```js [eject]
2626-import { client } from '@hey-api/client-fetch';
2727-2828-client.interceptors.request.eject((request, options) => {
2929- request.headers.set('Authorization', 'Bearer <my_token>');
3030- return request;
3131-});
3232-```
3333-3434-:::
3535-3636-and an example response interceptor
3737-3838-::: code-group
3939-4040-```js [use]
4141-import { client } from '@hey-api/client-fetch';
4242-4343-client.interceptors.response.use((response, request, options) => {
4444- trackAnalytics(response);
4545- return response;
4646-});
4747-```
4848-4949-```js [eject]
5050-import { client } from '@hey-api/client-fetch';
5151-5252-client.interceptors.response.eject((response, request, options) => {
5353- trackAnalytics(response);
5454- return response;
5555-});
5656-```
5757-5858-:::
5959-6060-::: tip
6161-To eject, you must provide a reference to the function that was passed to `use()`.
6262-:::
6363-6464-## Axios
6565-6666-If you're using the standalone Axios client, refer to the Axios documentation on [interceptors](https://axios-http.com/docs/interceptors). We expose the Axios instance through the `instance` field.
6767-6868-```js
6969-import { client } from '@hey-api/client-axios';
7070-7171-client.instance.interceptors.request.use((config) => {
7272- trackAnalytics(config);
7373- return config;
7474-});
7575-```
7676-7777-## Legacy Clients
7878-7979-The following section applies to legacy clients generated by `@hey-api/openapi-ts`. Below is an example request interceptor
8080-8181-::: code-group
8282-8383-```js [use]
8484-OpenAPI.interceptors.request.use((request) => {
8585- doSomethingWithRequest(request);
8686- return request; // <-- must return request
8787-});
8888-```
8989-9090-```js [eject]
9191-OpenAPI.interceptors.request.eject((request) => {
9292- doSomethingWithRequest(request);
9393- return request; // <-- must return request
9494-});
9595-```
9696-9797-:::
9898-9999-and an example response interceptor
100100-101101-::: code-group
102102-103103-```js [use]
104104-OpenAPI.interceptors.response.use(async (response) => {
105105- await doSomethingWithResponse(response); // async
106106- return response; // <-- must return response
107107-});
108108-```
109109-110110-```js [eject]
111111-OpenAPI.interceptors.response.eject(async (response) => {
112112- await doSomethingWithResponse(response); // async
113113- return response; // <-- must return response
114114-});
115115-```
116116-117117-:::
118118-119119-::: tip
120120-To eject, you must provide the same function that was passed to `use()`.
121121-:::
122122-123123-::: warning
124124-Angular client does not currently support request interceptors.
125125-:::
126126-127127-<!--@include: ../examples.md-->
+30
docs/openapi-ts/migrating.md
···50505151This config option is deprecated and will be removed.
52525353+## v0.52.0
5454+5555+### Removed internal `client` export
5656+5757+Previously, standalone clients would create a default client which you'd then import and configure.
5858+5959+```js
6060+import { client, createClient } from '@hey-api/client-fetch';
6161+6262+createClient({
6363+ baseUrl: 'https://example.com',
6464+});
6565+6666+console.log(client.getConfig().baseUrl); // <-- 'https://example.com'
6767+```
6868+6969+This client instance was used internally by services unless overridden. Apart from running `createClient()` twice, people were confused about the meaning of `global` configuration option.
7070+7171+Starting with v0.52.0, standalone clients will not create a default client. Instead, services will define their own client. You can now achieve the same configuration by importing `client` from services and using the new `setConfig()` method.
7272+7373+```js
7474+import { client } from 'client/services.gen';
7575+7676+client.setConfig({
7777+ baseUrl: 'https://example.com',
7878+});
7979+8080+console.log(client.getConfig().baseUrl); // <-- 'https://example.com'
8181+```
8282+5383## v0.51.0
54845585### Required `client` option
···1818import { useState } from 'react';
19192020import { $Pet } from './client/schemas.gen';
2121-import { addPet, getPetById, updatePet } from './client/services.gen';
2121+import { addPet, client, getPetById, updatePet } from './client/services.gen';
2222import type { Pet } from './client/types.gen';
23232424-createClient({
2424+// configure internal service client
2525+client.setConfig({
2526 // set default base url for requests
2627 baseURL: 'https://petstore3.swagger.io/api/v3',
2728 // set default headers for requests
2829 headers: {
2929- Authorization: 'Bearer <token_from_global_client>',
3030+ Authorization: 'Bearer <token_from_service_client>',
3031 },
3132});
32333334const localClient = createClient({
3435 // set default base url for requests made by this client
3536 baseURL: 'https://petstore3.swagger.io/api/v3',
3636- global: false,
3737 /**
3838 * Set default headers only for requests made by this client. This is to
3939 * demonstrate local clients and their configuration taking precedence over
···8787 ],
8888 },
8989 });
9090-9190 if (error) {
9291 console.log(error);
9392 return;
9493 }
9595-9694 setPet(data!);
9795 setIsRequiredNameError(false);
9896 };
···11// This file is auto-generated by @hey-api/openapi-ts
2233-import { client, type Options } from '@hey-api/client-axios';
33+import {
44+ createClient,
55+ createConfig,
66+ type Options,
77+} from '@hey-api/client-axios';
4859import type {
610 AddPetData,
···5155 UploadFileError,
5256 UploadFileResponse,
5357} from './types.gen';
5858+5959+export const client = createClient(createConfig());
54605561/**
5662 * Add a new pet to the store
···1818import { useState } from 'react';
19192020import { $Pet } from './client/schemas.gen';
2121-import { addPet, getPetById, updatePet } from './client/services.gen';
2121+import { addPet, client, getPetById, updatePet } from './client/services.gen';
2222import type { Pet } from './client/types.gen';
23232424-createClient({
2424+// configure internal service client
2525+client.setConfig({
2526 // set default base url for requests
2627 baseUrl: 'https://petstore3.swagger.io/api/v3',
2728 // set default headers for requests
2829 headers: {
2929- Authorization: 'Bearer <token_from_global_client>',
3030+ Authorization: 'Bearer <token_from_service_client>',
3031 },
3132});
32333334const localClient = createClient({
3435 // set default base url for requests made by this client
3536 baseUrl: 'https://petstore3.swagger.io/api/v3',
3636- global: false,
3737 /**
3838 * Set default headers only for requests made by this client. This is to
3939 * demonstrate local clients and their configuration taking precedence over
4040- * global configuration.
4040+ * internal service client.
4141 */
4242 headers: {
4343 Authorization: 'Bearer <token_from_local_client>',
···11// This file is auto-generated by @hey-api/openapi-ts
2233-import { client, type Options } from '@hey-api/client-fetch';
33+import {
44+ createClient,
55+ createConfig,
66+ type Options,
77+} from '@hey-api/client-fetch';
4859import type {
610 AddPetData,
···5155 UploadFileError,
5256 UploadFileResponse,
5357} from './types.gen';
5858+5959+export const client = createClient(createConfig());
54605561/**
5662 * Add a new pet to the store
+1-1
examples/openapi-ts-fetch/src/client/types.gen.ts
···258258 body?: Array<User>;
259259};
260260261261-export type CreateUsersWithListInputResponse = User;
261261+export type CreateUsersWithListInputResponse = User | unknown;
262262263263export type CreateUsersWithListInputError = unknown;
264264
···11// This file is auto-generated by @hey-api/openapi-ts
2233-import { client, type Options } from './client';
33+import { createClient, createConfig, type Options } from './client';
44import { type ParentModelWithDatesError, type ParentModelWithDatesResponse, type ModelWithDatesError, type ModelWithDatesResponse, type ModelWithDatesArrayError, type ModelWithDatesArrayResponse, type ArrayOfDatesError, type ArrayOfDatesResponse, type DateError, type DateResponse, type MultipleResponsesError, type MultipleResponsesResponse, ParentModelWithDatesResponseTransformer, ModelWithDatesResponseTransformer, ModelWithDatesArrayResponseTransformer } from './types.gen';
55+66+export const client = createClient(createConfig());
5768export const parentModelWithDates = (options?: Options) => { return (options?.client ?? client).post<ParentModelWithDatesResponse, ParentModelWithDatesError>({
79 ...options,
···11// This file is auto-generated by @hey-api/openapi-ts
2233-import { client, type Options } from '@hey-api/client-axios';
33+import { createClient, createConfig, type Options } from '@hey-api/client-axios';
44import { type ParentModelWithDatesError, type ParentModelWithDatesResponse, type ModelWithDatesError, type ModelWithDatesResponse, type ModelWithDatesArrayError, type ModelWithDatesArrayResponse, type ArrayOfDatesError, type ArrayOfDatesResponse, type DateError, type DateResponse, type MultipleResponsesError, type MultipleResponsesResponse, ParentModelWithDatesResponseTransformer, ModelWithDatesResponseTransformer, ModelWithDatesArrayResponseTransformer } from './types.gen';
55+66+export const client = createClient(createConfig());
5768export const parentModelWithDates = (options?: Options) => { return (options?.client ?? client).post<ParentModelWithDatesResponse, ParentModelWithDatesError>({
79 ...options,
···11// This file is auto-generated by @hey-api/openapi-ts
2233-import { client, type Options } from './client';
33+import { createClient, createConfig, type Options } from './client';
44import { type ParentModelWithDatesError, type ParentModelWithDatesResponse, type ModelWithDatesError, type ModelWithDatesResponse, type ModelWithDatesArrayError, type ModelWithDatesArrayResponse, type ArrayOfDatesError, type ArrayOfDatesResponse, type DateError, type DateResponse, type MultipleResponsesError, type MultipleResponsesResponse, ParentModelWithDatesResponseTransformer, ModelWithDatesResponseTransformer, ModelWithDatesArrayResponseTransformer } from './types.gen';
55+66+export const client = createClient(createConfig());
5768export const parentModelWithDates = (options?: Options) => { return (options?.client ?? client).post<ParentModelWithDatesResponse, ParentModelWithDatesError>({
79 ...options,
···11// This file is auto-generated by @hey-api/openapi-ts
2233-import { client, type Options } from '@hey-api/client-fetch';
33+import { createClient, createConfig, type Options } from '@hey-api/client-fetch';
44import { type ParentModelWithDatesError, type ParentModelWithDatesResponse, type ModelWithDatesError, type ModelWithDatesResponse, type ModelWithDatesArrayError, type ModelWithDatesArrayResponse, type ArrayOfDatesError, type ArrayOfDatesResponse, type DateError, type DateResponse, type MultipleResponsesError, type MultipleResponsesResponse, ParentModelWithDatesResponseTransformer, ModelWithDatesResponseTransformer, ModelWithDatesArrayResponseTransformer } from './types.gen';
55+66+export const client = createClient(createConfig());
5768export const parentModelWithDates = (options?: Options) => { return (options?.client ?? client).post<ParentModelWithDatesResponse, ParentModelWithDatesError>({
79 ...options,
···11// This file is auto-generated by @hey-api/openapi-ts
2233-import { client, type Options } from '@hey-api/client-fetch';
33+import { createClient, createConfig, type Options } from '@hey-api/client-fetch';
44import { type ParentModelWithDatesError, type ParentModelWithDatesResponse, type ModelWithDatesError, type ModelWithDatesResponse, type ModelWithDatesArrayError, type ModelWithDatesArrayResponse, type ArrayOfDatesError, type ArrayOfDatesResponse, type DateError, type DateResponse, type MultipleResponsesError, type MultipleResponsesResponse, ParentModelWithDatesResponseTransformer, ModelWithDatesResponseTransformer, ModelWithDatesArrayResponseTransformer } from './types.gen';
55+66+export const client = createClient(createConfig());
5768export const parentModelWithDates = (options?: Options) => { return (options?.client ?? client).post<ParentModelWithDatesResponse, ParentModelWithDatesError>({
79 ...options,