Some sort of middleware support

[drwpow]

Original message by @djMax on drwpow/openapi-fetch#41

---

Description

The request interception, response interception, etc is quite useful and I wouldn't think would add much to the library. Is there a way to simulate this on top of the library? (I don't see an obvious one)

Proposal

Add a single pre-flight and post-flight hook argument to the methods.

Checklist

• I’m willing to open a PR for this (see CONTRIBUTING.md)

[djMax]

I started messing with this, and I now think the answer is "don't do it here." ClientOptions already supports a fetch argument, and you can basically do all you want with that, I think.

[adarshaacharya]

@djMax so did you found any solution for this using fetch argument?

[djMax]

for collecting basic metrics? Yes, you just wrap the fetch function with an observer. You can use something like this:

https://www.npmjs.com/package/fetch-hooks

I've been meaning to make a more purpose built module for this particular library but haven't had time. The one thing I think should change in this lib is the direct call of response.json(). Instead there should probably be some way to set what method is called to handle the response.

[adarshaacharya]

@djMax i'm trying to implement refresh token using openapi-typescript and running out of idea for implementing that.
Used to do it using axios interceptor checking the status code, how can we implement here ?

[djMax]

You would just make a fetch something like this:

async function customFetch(...args) {
  // Modify the request as necessary, e.g. with a Bearer token auth header
 const result = await fetch(...args);
 if (result.status === 403) {
   // refresh the token, call customFetch again, do something to protect against repeated calls
   return customFetch(...args);
 }
  return result;
}

[marcomuser]

Something simple like this should also make do I suppose for most pre-flight cases?

const customFetchWithInterceptor = async (url, options) => {
  // Get your accessToken and add your custom headers or any other modifications to the options object here, e.g.:
  const accessToken = await getAccessToken();
  const modifiedOptions = {
    ...options,
    headers: {
      ...options?.headers,
      Authorization: 'Bearer YOUR_ACCESS_TOKEN',
    },
  };

  // Make the actual fetch call with the modified options
  return fetch(url, modifiedOptions);
}

And then use this function as the custom fetch in the ClientOptions.

[WickyNilliams]

it's slightly off topic, but this i ended up on this issue when investigating how to throw on error instead of returning a data structure like { data, error }. i am using tanstack query, so throwing on error is a must. i didn't want to manually do this every time.

i struggled to write an object that wraps each GET/POST/etc function without breaking the types. or having to restate all the generics, which is error prone.

i have landed on exposing the client like this:

const client = createApiClient<paths>({ ... })
export type Client = typeof client
export type ApiCall =  (client: Client) => Promise<FetchResponse<T>>

export function useApi() {
  return async function <T>(apiCall: ApiCall<T>) {
    const response = await apiCall(client)

    if (response.error) {
      throw new ApiError(response)
    }

    return response.data!
  }
}

// later
const api = useApi()
const data = await api(client => client.GET("/some/path"))

this allowed me to have a small wrapper (at the cost of some indirection) that leverages TS inferance with minimal type-level magic, and means it'll always throw on error.

just posting here in case it helps anyone in future! or if supporting this use case can be a consideration for some future middleware/extensibility points

[ddx32]

@WickyNilliams thanks for the snippet! Would you be able to share how's the FetchResponse type structured? I'm trying to implement a tanstack-query wrapper, but struggling so far.

[WickyNilliams]

@ddx32 It's exported from openapi-fetch :)

import type { FetchResponse } from "openapi-fetch"

[tonyxiao]

What if we created something like trpc links? It has a tiny internal observables implementation but provides the ultimate flexibility to end users.

[tonyxiao]

This is my current solution. Still want to add something that allows you to refresh tokens and such before request, but it solves the problem of no more error possibility in the response typing (you can throw your own error).

import type { FetchResponse } from 'openapi-fetch';
import createClient from 'openapi-fetch';

type MaybePromise<T> = T | Promise<T>;

type _ClientOptions = NonNullable<Parameters<typeof createClient>[0]>;
// Workaround for https://github.com/drwpow/openapi-typescript/issues/1122
interface ClientOptions extends _ClientOptions {
  preRequest?: (...args: Parameters<typeof fetch>) => MaybePromise<Parameters<typeof fetch>>;
  postRequest?: (
    res: Awaited<ReturnType<typeof fetch>>,
    requestArgs: Parameters<typeof fetch>
  ) => ReturnType<typeof fetch>;
}

// eslint-disable-next-line @typescript-eslint/ban-types
export function createOpenapiClient<Paths extends {}>({
  preRequest = (url, init) => [url, init],
  postRequest = (res) => Promise.resolve(res),
  ...clientOptions
}: ClientOptions = {}) {
  const baseFetch = clientOptions?.fetch ?? globalThis.fetch;
  const customFetch: typeof baseFetch = async (...args) => {
    const requestArgs = await preRequest(...args);
    const res = await baseFetch(...requestArgs);
    return postRequest(res, requestArgs);
  };
  const client = createClient<Paths>({ ...clientOptions, fetch: customFetch });

  return {
    GET: (...args: Parameters<typeof client.GET>) => client.GET(...args).then(throwIfNotOk),
    PUT: (...args: Parameters<typeof client.PUT>) => client.PUT(...args).then(throwIfNotOk),
    POST: (...args: Parameters<typeof client.POST>) => client.POST(...args).then(throwIfNotOk),
    DELETE: (...args: Parameters<typeof client.DELETE>) => client.DELETE(...args).then(throwIfNotOk),
    OPTIONS: (...args: Parameters<typeof client.OPTIONS>) => client.OPTIONS(...args).then(throwIfNotOk),
    HEAD: (...args: Parameters<typeof client.HEAD>) => client.HEAD(...args).then(throwIfNotOk),
    PATCH: (...args: Parameters<typeof client.PATCH>) => client.PATCH(...args).then(throwIfNotOk),
    TRACE: (...args: Parameters<typeof client.TRACE>) => client.TRACE(...args).then(throwIfNotOk),
  };
}

function throwIfNotOk<T>(res: FetchResponse<T>) {
  if (res.error) {
    // TODO: Return more detailed error here...
    res.error;
    throw new Error('HTTPError');
  }
  // You can further modify response as desired...
  return res;
}