How to customize json parsing

[MeikelLP]

My API returns dates as ISO strings. Obviously I don't want to parse it everywhere on the go and thus want to to adjust the parsing of the response.

The default Response.json() method has no overload to adjust the parsing like JSON.parse(string, (key, value) => {}) thus one had to use .text() and parse the result manually. How can I archive this with the openapi-fetch library?

I tried the following:

async onResponse({ response }) {
    const text = await response.text()
    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
    const json = dateAwareJsonParse(text)
    return Response.json(json, {
        status: response.status,
        statusText: response.statusText,
        headers: response.headers
    })
}

but sadly the static method Response.json() does convert any given object to a string and back thus killing all custom parsing. The library checks the response for a correct Response object via instanceof and thus I can't return a custom object with the correct structure (the code just crashes without any error and the webpage is broken).

How can I customize the response parsing?

[muhammetozkoc]

openapi-fetch doesn't currently accept a custom parser function for parseAs. A middleware can still handle this by returning a Response subclass that overrides json().

The part that caught me is that openapi-fetch falls back to text() plus its own JSON.parse() when Content-Length is missing. The replacement response therefore needs the actual byte length.

const reviveDates = (_key: string, value: unknown) =>
  typeof value === "string" &&
  /^\d{4}-\d\d-\d\dT\d\d:\d\d:\d\d/.test(value)
    ? new Date(value)
    : value;

class ReviverResponse extends Response {
  async json() {
    return JSON.parse(await this.text(), reviveDates);
  }
}

const dateMiddleware = {
  async onResponse({ response }: { response: Response }) {
    if (!response.headers.get("content-type")?.includes("application/json")) {
      return;
    }

    const body = await response.text();
    const headers = new Headers(response.headers);
    headers.set(
      "content-length",
      String(new TextEncoder().encode(body).byteLength),
    );

    return new ReviverResponse(body, {
      status: response.status,
      statusText: response.statusText,
      headers,
    });
  },
};

client.use(dateMiddleware);

I tested this with the current package and the parsed date is a Date instance. It does buffer JSON responses, and unsuccessful responses still go through the library's normal error parser.