NOTE: this is a fork of https://github.com/ajaishankar/openapi-typescript-fetch because it didn't seem to be maintained and we needed to add features.

📘️ openapi-typescript-fetch

A typed fetch client for openapi-typescript

$3

``bash
npm install openapi-typescript-fetch
`
Or
`bash
yarn add openapi-typescript-fetch
`

Features

Supports JSON request and responses

- ✅ OpenAPI 3.0
- ✅ Swagger 2.0

$3

Generate typescript definition from schema

`bash
npx openapi-typescript https://petstore.swagger.io/v2/swagger.json --output petstore.ts

🔭 Loading spec from https://petstore.swagger.io/v2/swagger.json…

🚀 https://petstore.swagger.io/v2/swagger.json -> petstore.ts [650ms]

`

Typed fetch client

`ts
import 'whatwg-fetch'

import { Fetcher } from 'openapi-typescript-fetch'

import { paths } from './petstore'

// declare fetcher for paths
const fetcher = Fetcher.for()

// global configuration
fetcher.configure({
baseUrl: 'https://petstore.swagger.io/v2',
init: {
headers: {
...
},
},
use: [...] // middlewares
})

// create fetch operations
const findPetsByStatus = fetcher.path('/pet/findByStatus').method('get').create()
const addPet = fetcher.path('/pet').method('post').create()

// fetch
const { status, data: pets } = await findPetsByStatus({
status: ['available', 'pending'],
})

console.log(pets[0])
`

$3

A non-ok fetch response throws a generic ApiError

But an Openapi document can declare a different response type for each status code, or a default error response type

These can be accessed via a discriminated union on status, as in code snippet below

`ts
const findPetsByStatus = fetcher.path('/pet/findByStatus').method('get').create()
const addPet = fetcher.path('/pet').method('post').create()

try {
await findPetsByStatus({ ... })
await addPet({ ... })
} catch(e) {
// check which operation threw the exception
if (e instanceof addPet.Error) {
// get discriminated union { status, data }
const error = e.getActualType()
if (error.status === 400) {
error.data.validationErrors // only available for a 400 response
} else if (error.status === 500) {
error.data.errorMessage // only available for a 500 response
} else {
...
}
}
}
`

$3

Middlewares can be used to pre and post process fetch operations (log api calls, add auth headers etc)

`ts

import { Middleware } from 'openapi-typescript-fetch'

const logger: Middleware = async (url, init, next) => {
console.log(fetching ${url})
const response = await next(url, init)
console.log(fetched ${url})
return response
}

fetcher.configure({
baseUrl: 'https://petstore.swagger.io/v2',
init: { ... },
use: [logger],
})

// or

fetcher.use(logger)
`

$3

This library can be used server side if you have a compatible fetch lib (e.g. node-fetch).

`sh
npm install cross-fetch
`

You will then need to inject fetch into the config:

`ts
import altFetch, { Headers } from 'node-fetch'
const fetcher = Fetcher.for()
fetcher.configure({
fetchProvider: {
fetch: altFetch as any,
headers: Headers as any,
},
baseUrl: 'https://api.backend.dev',
init: {
headers: {
Authorization: 'Bearer token',
},
},
})
`

If you want/need to use node-fetch there is an issue because it's not type-compatible with native fetch. See discussion and workarounds for it here: https://github.com/apollographql/apollo-link/issues/513#issuecomment-548219023

$3

- OpArgType - Infer argument type of an operation
- OpReturnType - Infer return type of an operation
- OpErrorType - Infer error type of an operation
- FetchArgType - Argument type of a typed fetch operation
- FetchReturnType - Return type of a typed fetch operation
- FetchErrorType - Error type of a typed fetch operation
- TypedFetch - Fetch operation type

`ts
import { paths, operations } from './petstore'

type Arg = OpArgType
type Ret = OpReturnType
type Err = OpErrorType

type Arg = OpArgType
type Ret = OpReturnType
type Err = OpErrorType

type FindPetsByStatus = TypedFetch

const findPetsByStatus = fetcher.path('/pet/findByStatus').method('get').create()

type Arg = FetchArgType
type Ret = FetchReturnType
type Err = FetchErrorType
`

$3

- arrayRequestBody - Helper to merge params when request body is an array see issue

`ts

const body = arrayRequestBody([{ item: 1}], { param: 2})

// body type is { item: number }[] & { param: number }
``

Happy fetching! 👍