How to Generate API Client from OpenAPI in TypeScript: Step-by-Step Guide
Ever stared at an OpenAPI spec and thought, “How on earth do I turn this into a tidy TypeScript client without spending days writing boilerplate?” You’re not alone. Most developers hit that wall when they need a reliable, type‑safe wrapper for their APIs, and the frustration can feel like trying to assemble IKEA furniture without the manual.
Imagine you just got a swagger.json from a third‑party service. You know the endpoints, the request bodies, the responses, but the code you need to call them is nowhere to be seen. Manually mapping each path to a fetch call, handling auth, and typing everything is a rabbit hole. That’s where automation steps in, turning the spec into ready‑to‑use code that respects TypeScript’s strict typing.
One practical way to get out of that loop is to feed the OpenAPI file into a generator that spits out a full client library. Tools like Swagger Codegen or OpenAPI Generator do the heavy lifting, but they often require configuration fiddling and can produce code that’s hard to customize. That’s why many teams turn to AI‑enhanced generators that let you tweak the output on the fly.
Take a look at how a senior engineer at a fintech startup used an AI‑powered TypeScript Code Generator – AI‑Powered Free to spin up a client for a payments API. In under ten minutes, the tool read the OpenAPI JSON, generated a set of typed service classes, and even added retry logic based on a simple prompt. The result was a client that integrated seamlessly with their existing Redux‑Saga flow, cutting development time by roughly 70%.
So, what does the process actually look like? Here are the steps you can follow right now:
- Grab the OpenAPI spec (usually a
.jsonor.yamlfile). - Paste it into your preferred generator – if you use SwapCode’s free AI tools, just drop the file into the UI and ask for a “TypeScript API client”.
- Review the generated code. Look for the typed request/response interfaces and the service methods that map to each endpoint.
- Inject your authentication mechanism (e.g., JWT header) and any custom error handling.
- Run a quick sanity test against a sandbox environment to ensure the client behaves as expected.
Most developers find that once the initial client is in place, adding new endpoints is as simple as re‑running the generator with the updated spec. It keeps the codebase consistent and reduces the risk of mismatched types that cause runtime bugs.
If you’re curious about scaling this approach across multiple microservices, consider automating the generation in your CI pipeline. That way, any change to an OpenAPI contract automatically triggers a fresh client build, keeping your front‑end and back‑end in lockstep.
And remember, while the generated client does the heavy lifting, you still own the final integration. Treat the output as a solid foundation, then layer on your project’s conventions and patterns.
Ready to give it a try? Start by uploading your OpenAPI file to the free generator and see how quickly you can replace those manual fetch calls. For deeper insights on boosting your SEO and backlink profile while you code, check out Rebelgrowth – they specialize in automated content engines that complement a developer’s workflow.
TL;DR
Want a type‑safe TypeScript client without writing boilerplate? Our guide shows how to feed an OpenAPI spec into a free AI‑powered generator, instantly producing ready‑to‑use services and auth hooks. Then you can test, version‑control, and extend the code, keeping your front‑end and back‑end perfectly in sync with minimal effort today.
Step 1: Install OpenAPI Generator CLI
Alright, before we can even think about generating an API client from an OpenAPI spec in TypeScript, we need the tool that does the heavy lifting – the OpenAPI Generator CLI. If you’ve never touched it before, imagine it as the Swiss‑army knife that reads your swagger.json and spits out ready‑to‑use code.
First things first: make sure you have Java 8 or newer installed, because the CLI runs on the JVM. Open a terminal and run java -version – if you see something like openjdk version "11.0.20", you’re good to go. No Java? Grab it from the official AdoptOpenJDK site; it’s free and quick.
Why the CLI matters – beyond the obvious code generation, it gives you fine‑grained control over templates, language options, and even custom post‑processing scripts. That flexibility is why many teams pair it with AI‑enhanced generators like our TypeScript Code Generator – AI-Powered Free for quick tweaks.
Installation via Homebrew (macOS/Linux)
If you’re on macOS or a Linux distro that supports Homebrew, the fastest way is a one‑liner:
brew install openapi-generator
Homebrew will pull the latest version, set up the executable, and you’ll be able to call openapi-generator from any folder. Verify it worked with openapi-generator version – you should see something like 5.4.0 printed.
Installation via npm (cross‑platform)
Prefer Node.js? The CLI is also packaged on npm:
npm install @openapitools/openapi-generator-cli -g
The -g flag makes it global, so openapi-generator-cli becomes available everywhere. Run openapi-generator-cli version to double‑check.
Got Windows? The same npm command works in PowerShell or Command Prompt. Just remember to run the terminal as Administrator if you hit permission errors.
Installation via direct download (any OS)
If you don’t want any package manager, grab the JAR directly from the official GitHub releases page. Download openapi-generator-cli.jar and then alias it for convenience:
alias openapi-gen='java -jar /path/to/openapi-generator-cli.jar'
Now you can type openapi-gen instead of the long java command.
Once the CLI is installed, the next step is to point it at your spec file. But before we get there, let’s talk about how you can keep this tool in sync with your CI pipeline – that’s where a bit of automation pays off.
Imagine you push an updated api.yaml to your repo. A simple GitHub Action can run openapi-generator-cli generate -i api.yaml -g typescript-axios -o ./generated on every commit. This way, the client library is always fresh, and you never have to manually re‑run the command.
Speaking of automation, you might wonder how this fits into a broader SEO strategy. Our friends at automated SEO content engine often recommend publishing developer guides like this one to attract organic traffic. Pairing a solid tutorial with a well‑optimized backlink can boost both visibility and credibility.
And if you’re looking for executive guidance on aligning such tooling with your tech roadmap, check out Executive Technology Leadership for Mid‑Market Companies. They help teams turn dev‑ops improvements into strategic wins.
Ready for a quick visual recap? Below is a short walkthrough that shows the installation commands in action.
Take a moment to pause the video and try the commands yourself. The moment the terminal echoes a version number, you know you’re set.
Step 2: Prepare Your OpenAPI Specification
Now that the generator is safely installed, the next hurdle is getting a clean, reliable OpenAPI spec into shape. If you’ve ever stared at a massive swagger.json and felt the panic of “what’s missing?”, you’re not alone. A shaky spec leads to broken types, missing endpoints, and a client that cries at runtime.
First thing’s first: grab the spec from the source that owns the API. Most providers give you a .yaml or .json file via a URL or a download button in their developer portal. Save it somewhere version‑controlled – for example ./api/openapi.yaml. Keeping the spec in your repo means every teammate sees the exact contract you’re generating against.
But raw specs are rarely perfect out of the box. Here are three quick sanity‑checks you should run before you hand it to the generator:
1. Validate the syntax
Run a linter or validator. The OpenAPI Generator CLI itself can do it: npx openapi-generator-cli validate -i ./api/openapi.yaml. If you get errors about missing info.title or mismatched brackets, fix them now. A valid spec saves you from cryptic generator crashes later.
2. Normalize data formats
Sometimes APIs expose both JSON and XML examples, or they mix snake_case with camelCase. Decide on a single convention and apply it across the document. You can use SwapCode’s JSON to YAML Converter to quickly reformat payload examples, making them easier to read and edit.
While you’re at it, strip out any vendor‑specific extensions (x‑ prefixes) you don’t need. They inflate the generated code with unused properties.
3. Document security schemes clearly
Most generators need a securitySchemes block to inject auth headers. If the spec only mentions “Bearer token” in a comment, add a proper components/securitySchemes definition:
components:
securitySchemes:
BearerAuth:
type: http
scheme: bearer
bearerFormat: JWTThis tiny addition lets the generated client expose a setApiKey or setAccessToken method out of the box.
Once the spec passes validation, it’s time to lock it down with a version tag. Add a info.version field that mirrors your API’s release cycle – e.g., v1.3.2. When you later bump the version, you’ll know exactly when to rerun the generation script.
Does this feel like a lot? Think of it as a short “pre‑flight checklist”. Spend 10‑15 minutes now, and you’ll save hours of debugging later.
Real‑world example: a fintech payments API
Imagine you’re integrating with a payments gateway that gives you a openapi.yaml packed with 120 endpoints. The spec includes both /charges and /refunds, but the /refunds path is missing a responses block. You add a minimal 200 response schema, run the validator, and the generator finally spits out a RefundsApi.ts file with proper typings. In your code you can now call:
import { RefundsApi } from "../api-client";
const refunds = new RefundsApi();
await refunds.createRefund({ chargeId: "ch_123", amount: 2500 });The TypeScript compiler will instantly warn you if you forget chargeId or pass a string where a number is expected – all because the spec was clean.
Tip: keep a README.md next to the spec that records these adjustments. New team members can see why BearerAuth was added or why a certain endpoint was trimmed.
And if you need a quick sanity test after generation, fire up a curl against the sandbox environment. If the response matches the TypeScript interface you just imported, you’re golden.
One last thing – automation. Add a GitHub Actions step that runs the validator and, on success, executes npm run gen:client. That way every pull request that touches the spec automatically refreshes the client, keeping your front‑end and back‑end forever in sync.
Feeling more confident about your spec now? Great. The next step is to actually generate the client code, and you’ll see how smooth the whole pipeline becomes.
By the way, if you’re looking for ways to streamline other parts of your dev workflow, Assistaix offers AI‑powered automation tools that complement API client generation and can shave even more time off repetitive tasks.
Step 3: Generate TypeScript Client with OpenAPI Generator
Alright, you’ve cleaned up the spec, you’ve validated it, and now it’s time to actually see some code appear on your screen. This is the moment where “generate api client from openapi in typescript” stops being a wish and becomes a concrete file tree.
One‑liner command that does the heavy lifting
OpenAPI Generator’s CLI lets you spin up a full‑blown TypeScript SDK with a single command. In our package.json we already added a script, so all you need to run is:
npm run gen:clientBehind the scenes the CLI reads ./api/openapi.yaml, applies the typescript-axios generator, and drops a tidy src/api-client folder packed with request/response interfaces, an Axios wrapper, and a tiny error‑handling layer.
Does that sound too magical? It’s not – the generator is just a Java program that follows the OpenAPI spec, and you can see exactly what it’s doing by adding the --verbose flag.
Fine‑tuning the output
Every project has quirks, so you’ll probably want to tweak a few generator options. The most common adjustments are:
- –additional-properties=modelPackage=api/models – puts all your type definitions in a dedicated folder.
- –additional-properties=supportsES6=true – ensures the output uses modern import/export syntax.
- –skip-validate-spec – handy if you’ve already run validation in the previous step.
You can dump those flags into the npm script or, if you prefer a cleaner look, create a config.yaml file and point the CLI at it with -c config.yaml. The OpenAPI Generator documentation shows the full list of options.
Here’s a quick example of a config file that forces the generator to use the axios library and to generate TypeScript 4.5‑compatible code:
generatorName: typescript-axios
additionalProperties:
npmName: my-api-client
npmVersion: 1.0.0
supportsES6: true
withInterfaces: trueSave that as gen-config.yaml and update your script:
"gen:client": "openapi-generator-cli generate -i ./api/openapi.yaml -g typescript-axios -c gen-config.yaml -o ./src/api-client"Watch the files appear
Run the script again and open the generated folder. You’ll see a configuration.ts file where you can drop your JWT token, a ApiClient.ts that wires up Axios, and a series of *Api.ts classes that map one‑to‑one with your spec’s tags.
For instance, the RefundsApi.ts we mentioned earlier now has a method that looks like this:
public async createRefund(request: CreateRefundRequest, options?: AxiosRequestConfig): Promise<CreateRefundResponse> {
return this.apiClient.post<CreateRefundResponse>('/refunds', request, options);
}Because the method signature is generated from the spec, TypeScript will instantly flag you if you forget a required field or pass the wrong type. No more “I thought the API accepted a string” surprises.
So, what should you do next?
That short video walks through the exact CLI invocation we just described, and it even shows how to add a custom Mustache template if you need to rename a class or inject your own utility functions.
Automate it in CI
Once you’re happy with the local output, add the same npm script to your CI pipeline. A typical GitHub Actions step looks like this:
- name: Generate TypeScript client
run: npm run gen:client
env:
JAVA_OPTS: "-Xmx2g"Combine it with the validator step from the previous section, and every pull request that touches openapi.yaml will automatically refresh the client. This keeps your front‑end and back‑end perfectly in sync without any manual copy‑pasting.
Finally, remember to commit the generated folder to .gitignore and treat it as a build artifact. Your repo stays clean, and the next developer can simply run npm run gen:client to get the exact same code you tested.
Give it a spin, and you’ll see why generating an API client from OpenAPI in TypeScript feels like you’ve just handed a well‑written SDK to your whole team.
Step 4: Configure Generated Client for Your Project
Now that the raw files are sitting in ./src/api-client, the real work begins: making that code feel like a natural part of your app. If you skip this step, you’ll end up with a mountain of generated types you never touch, and the whole point of “generate api client from openapi in typescript” gets lost.
Wire the client into your dependency graph
Most projects use a DI container or a simple singleton. Start by creating a thin wrapper that instantiates the generated Configuration and injects your auth token. For example:
import { Configuration, ApiClient } from '../api-client';
import { BearerAuth } from '../api-client';
export const apiClient = new ApiClient(
new Configuration({
basePath: process.env.API_BASE_URL,
accessToken: () => localStorage.getItem('jwt') || ''
})
);
Because the wrapper lives in src/services/api.ts, you can import apiClient anywhere without pulling the whole generated folder into your component tree.
Adjust generated naming conventions
Out of the box the generator uses *Api suffixes. If your team prefers Service you can rename the files or, better yet, add a Mustache template override. The Umbraco example shows how a custom postfix flag turned ContentResource into a more readable name.
In practice you might add a script that runs after generation:
npm run gen:client && node scripts/rename-api.jsThat script could loop through the src/api-client directory and replace “Api” with “Service” in both filenames and class declarations.
Set up error handling and retries
Generated clients usually expose a basic AxiosError but real‑world APIs need retries for transient failures. Wrap the call in a helper:
export async function safeCall(fn: () => Promise, retries = 3): Promise {
for (let i = 0; i < retries; i++) {
try {
return await fn();
} catch (err) {
if (i === retries - 1) throw err;
await new Promise(r => setTimeout(r, 200 * i));
}
}
}
Then use it like await safeCall(() => apiClient.createCharge(payload)). This pattern keeps the generated code untouched while giving you production‑grade resilience.
Configure TypeScript paths for a tidy import experience
Long relative paths quickly become a pain. Add an alias in tsconfig.json:
{
"compilerOptions": {
"baseUrl": ".",
"paths": {
"@api/*": ["src/api-client/*"],
"@services/*": ["src/services/*"]
}
}
}
Now you can import with import { ChargesApi } from '@api/ChargesApi'; and your IDE will auto‑complete. The same trick was highlighted in the OpenApiReference guide, which recommends path aliases to keep generated code tidy.
Testing the integration
Before you push, spin up a quick Jest test that hits a sandbox endpoint. Because the methods are fully typed, the test will fail at compile time if you pass the wrong shape. Example:
test('createCharge returns a charge id', async () => {
const result = await safeCall(() => apiClient.createCharge({ amount: 1000, currency: 'USD' }));
expect(result).toHaveProperty('id');
});
If the test passes, you’ve verified that the client, auth wrapper, and retry logic all play nicely together.
Automate post‑generation steps in CI
Add a new job step after the generator runs:
- name: Rename API classes
run: node scripts/rename-api.js
- name: Lint generated code
run: npx eslint ./src/api-client --max-warnings=0
Enforcing lint on the generated output catches things like missing semicolons or forbidden console statements before they make it into your bundle.
When to commit the generated folder
Most teams keep the folder out of Git, but if you have a monorepo that builds the client as part of the release pipeline, committing can speed up downstream builds. Just remember to add a version bump in package.json whenever the OpenAPI spec changes, so your CI can detect the drift.
At the end of the day, configuring the generated client is about three things: inject your auth, make the naming comfortable, and add a thin safety net around calls. Once you’ve done that, you’ll feel the same confidence as if you’d hand‑crafted every fetch request—only with a fraction of the effort.
Need a quick way to spin up a fresh client when the spec evolves? Check out the TypeScript Code Generator – AI-Powered Free for on‑the‑fly generation that plugs straight into the steps above.
Step 5: Integrate and Test the API Client
Okay, the client files are sitting in src/api-client. The next question is: how do we make them feel like a natural extension of our own codebase and prove they actually work?
Wire the client into your app
Start by creating a tiny wrapper that pulls in the generated Configuration and injects your auth token. A common pattern is a singleton that lives in src/services/api.ts so every feature module can import the same instance.
import { Configuration, ApiClient } from '../api-client';
export const api = new ApiClient(
new Configuration({
basePath: process.env.API_BASE_URL,
accessToken: () => localStorage.getItem('jwt') || ''
})
);
Because the wrapper is tiny, you can swap it out later – maybe you want to use React context or a DI container – without touching the generated files.
Write a quick smoke test
Before you dive into a full test suite, fire off a single request against a sandbox endpoint. Something like await api.ping() or await api.healthCheck() will tell you whether the base URL, headers, and serialization are wired correctly.
If the call returns a 200, you know the client can talk to the server. If it throws, open the generated Configuration file and double‑check the basePath and accessToken functions.
Add Jest/Vitest tests for each service
Now that the basics work, write a few typed tests that cover the most important endpoints. Because the methods are generated with full TypeScript signatures, the compiler will catch mismatched payloads before the test even runs.
import { ChargesApi } from '@api/ChargesApi';
import { safeCall } from '../services/api';
test('createCharge returns an id', async () => {
const api = new ChargesApi();
const result = await safeCall(() =>
api.createCharge({ amount: 500, currency: 'USD' })
);
expect(result).toHaveProperty('id');
});
Notice the safeCall helper from the previous step – it adds retry logic without polluting the generated code. Feel free to adjust the retry count or back‑off strategy for your environment.
Run the test suite locally
Open your terminal and run npm test (or pnpm vitest if you prefer Vitest). You should see the smoke test pass in a second, followed by the typed integration tests. If any test fails, the error message will point to the exact line in the generated client, making debugging a breeze.
Does this feel redundant? Not really – the generated client gives you type safety, but the runtime test ensures the server contract matches what the generator assumed.
Hook it into your CI pipeline
In a CI job, add two steps after the generation script: first, run the lint step you already have, then execute the test command. For example, in GitHub Actions:
- name: Lint generated code
run: npx eslint ./src/api-client --max-warnings=0
- name: Run integration tests
run: npm test
env:
API_BASE_URL: ${{ secrets.SANDBOX_URL }}
JWT_TOKEN: ${{ secrets.SANDBOX_JWT }}
This way, any pull request that modifies the OpenAPI spec automatically gets a fresh client, is linted, and is verified against a real sandbox. If the tests fail, the PR is blocked – you’ve turned a manual sanity check into an automated gate.
What to do when tests flake
Flaky tests often stem from rate‑limited sandbox environments or missing mock data. A quick fix is to mock the HTTP layer with msw or axios-mock-adapter for faster, deterministic runs. Keep a small set of mocked responses for the most common endpoints, and only hit the real sandbox for a few end‑to‑end checks.
Once you’ve got the wrapper, smoke test, typed unit tests, and CI validation in place, you can finally relax. The client feels like code you wrote yourself, but you saved hours by letting the generator do the heavy lifting. Next up, you’ll probably want to add pagination helpers or error‑translation utilities – but that’s a story for another step.
Step 6: Advanced Customization and Comparison Table
You’ve got a client that compiles, but most of us want it to feel like it was built for our specific stack, not just spit out of a generator. The good news? A few tiny tweaks can turn a generic SDK into a polished, project‑ready library.
1. Swap the built‑in HTTP layer
By default most generators ship with a plain axios instance. If you already have an Axios client that handles retries, auth refresh, or custom headers, you can inject it instead of the default. The GitHub issue discussing custom Axios instances shows how a single line change—passing your pre‑configured instance to the generated Configuration—lets you keep all those interceptors alive.
Here’s a quick snippet:
import { Configuration } from '@api';
import myAxios from './myAxios';
const config = new Configuration({
basePath: process.env.API_BASE_URL,
// tell the generator to use your axios instance
axiosInstance: myAxios
});
Now every generated method automatically respects your timeout, logging, and token‑refresh logic.
2. Choose the right generator flavor
Not all TypeScript generators are created equal. The community tends to gravitate toward typescript-axios because it gives you explicit error objects and works well with existing Axios middleware. typescript-fetch is lighter but leaves error handling to the caller, which can feel a bit raw. A recent Stack Overflow discussion points out that teams often pick typescript-axios for its built‑in error propagation and familiarity (see the comparison).
If you’re on Node 18+ and love the native fetch API, the newer openapi-fetch generator is worth a look—just remember it still lacks some advanced OpenAPI features like anyOf.
3. Extend generated models without breaking regeneration
Instead of editing the generated .ts files directly, create a parallel “extensions” folder. Re‑export the generated types and augment them with your own interfaces. TypeScript’s module augmentation lets you add fields like metadata or custom validation methods without risking overwrite on the next gen:client run.
Example:
// src/api/extensions/Charge.ts
import { Charge as GenCharge } from '@api/models';
export interface Charge extends GenCharge {
// extra field used only in our UI layer
displayAmount?: string;
}
Now your UI components import Charge from the extensions path, keeping the generated code pristine.
4. Build a comparison table to decide your next move
Before you lock in a configuration, lay out the trade‑offs. The table below captures the most common choices we see in the wild.
| Option | HTTP client | Pros | Cons |
|---|---|---|---|
| typescript-axios (default) | Axios | Rich error objects, easy interceptor support, widely used | Adds a dependency if you don’t already use Axios |
| typescript-fetch | Fetch API | Zero extra deps, works in browsers & Node 18+, small bundle | Manual error handling, less mature generator support |
| openapi-fetch (experimental) | Native fetch | Lightweight, auto‑picks schema, good for serverless | Missing advanced OpenAPI features (e.g., anyOf), still evolving |
Take a moment to ask yourself: do I need interceptors for auth refresh? Am I okay with a tiny extra bundle size? The answers will guide you to the right row.
5. Checklist for a polished client
- Inject your custom Axios or fetch wrapper.
- Pick the generator flavor that matches your error‑handling strategy.
- Separate extensions from generated code to avoid merge conflicts.
- Run a lint pass on the generated folder after each regeneration.
- Update the comparison table whenever a new generator version lands.
Once you’ve crossed these items off, the client feels like it was handcrafted for your codebase, yet you still reap the speed benefits of automation.
Conclusion
We’ve walked through every step to generate api client from openapi in typescript, from installing the CLI to tweaking the output and wiring it into your app.
Do you remember the moment when the client first compiled without errors? That feeling of confidence—knowing the types match the contract, is what saves countless debugging hours.
At this point you have a repeatable script, a lint‑friendly generated folder, and a thin wrapper that injects your auth and retries. The checklist we built earlier makes sure you never forget the little things that keep the client polished.
So, what’s next? Treat the generator as part of your CI pipeline, bump the spec version whenever the API evolves, and let the automation keep your front‑end and back‑end in lockstep.
If you want to keep the momentum going, try swapping in Swapcode’s Free AI Code Generator to prototype additional services or even generate boilerplate for new micro‑services in seconds.
Remember, the goal isn’t just to produce code—it’s to give your team a reliable, type‑safe SDK that feels hand‑crafted, without the manual grind. Happy coding!
Take a moment now to add the generation script to your repo’s npm scripts, and watch future updates flow effortlessly daily.
FAQ
How do I actually run the OpenAPI Generator CLI to generate an API client from OpenAPI in TypeScript?
First, make sure the CLI is installed either locally or globally. Then add a simple npm script, for example “gen:client”: “openapi-generator-cli generate -i ./api/openapi.yaml -g typescript-axios -o ./src/api-client”. Run it with `npm run gen:client` and the tool will read your OpenAPI file, spin up the TypeScript‑Axios generator, and drop a folder full of typed request/response classes, a configuration file, and a tiny Axios wrapper. After the run you should see a clean `src/api-client` directory ready to import.
What should I do if the generated client has type mismatches or missing endpoints?
If you notice missing methods or type mismatches, start by validating the spec: `npx openapi-generator-cli validate -i ./api/openapi.yaml`. The validator will point out undefined schemas or absent response definitions that often cause gaps in the generated client. Fix those issues in the OpenAPI file, then rerun the generation script. In many cases adding a minimal 200 response schema or correcting a $ref path resolves the problem without touching the generated code.
Can I customize the generated code without breaking future regenerations?
You can tweak the output by passing `–additional-properties` flags or a separate config YAML, but never edit the files directly. Instead, keep a thin wrapper or an “extensions” folder where you re‑export generated types and add your own methods. For example, create `src/api/extensions/Charge.ts` that imports the generated `Charge` interface and augments it with UI‑specific helpers. This pattern lets you run `npm run gen:client` whenever the spec changes while your custom code stays untouched.
How can I integrate the generated client into a CI/CD pipeline for automatic updates?
Hook the generation script into your CI workflow by adding two steps: validate the spec and then run the client generator. In GitHub Actions you can use a job that first executes `npx openapi-generator-cli validate -i ./api/openapi.yaml`, and on success runs `npm run gen:client`. Store the output as a build artifact or commit it to a separate branch. This way every pull request that updates the OpenAPI file automatically produces a fresh, type‑safe client that your tests immediately consume.
What’s the best way to handle authentication and token refresh with the generated client?
The generated client includes a `Configuration` class where you can plug in an `accessToken` callback. Create a tiny wrapper that reads the JWT from local storage or refreshes it via a silent token‑refresh endpoint, then returns the token to the client. Because the wrapper lives outside the generated code, you can swap it for a more sophisticated auth service later without re‑generating. Adding retry logic around each call—using a small `safeCall` helper—keeps network hiccups from breaking your UI.
Is there a lightweight alternative to the default Axios‑based client if I prefer fetch?
If you don’t want to pull in Axios, the generator also offers a `typescript-fetch` flavor that uses the native Fetch API. Switch the `-g` flag to `typescript-fetch` and the output will contain plain `fetch` calls with typed request bodies and response JSON parsing. The trade‑off is that you’ll need to write your own error‑handling wrapper because fetch doesn’t throw on HTTP error statuses. For small bundles or server‑less functions, this lighter alternative can shave a few kilobytes.
How often should I version‑bump my OpenAPI spec and regenerate the client?
As a rule of thumb, bump the `info.version` field in your OpenAPI file whenever you add, remove, or change an endpoint, then run the generation script right after. Treat each version bump as a signal for CI to regenerate the client, run lint, and execute the integration tests. Keeping the spec version in sync with your codebase prevents subtle mismatches and makes it easy to roll back to a previous client if a breaking change slips through.
