Type error when using wreq-js in places that accept a fetch client.

[callumgare]

Describe the bug

wreq-js is very nearly type compatible with the native fetch function but not quite, meaning it can't be used as a drop in replacement in situations which accept a fetch client without throwing typescript errors.

Thanks for maintaining such a useful library by the way!

Reproduction

https://stackblitz.com/edit/vitejs-vite-msdyarep?file=index.ts&terminal=dev

(as the first comment mentions, once the webcontainer has finished loading if you're still not seeing errors highlighted then you might need to make some minor change to the file to get it to show).

Error output

Argument of type '(input: string | URL | Request, init?: RequestInit) => Promise<Response>' is not assignable to parameter of type '(input: URL | RequestInfo, init?: RequestInit) => Promise<Response>'.
  Types of parameters 'init' and 'init' are incompatible.
    Type 'RequestInit' is not assignable to type 'import("node_modules/wreq-js/dist/wreq-js").RequestInit'.
      Types of property 'headers' are incompatible.
        Type 'HeadersInit' is not assignable to type 'import("node_modules/wreq-js/dist/wreq-js").HeadersInit'.
          Type 'Headers' is not assignable to type 'HeadersInit'.
            Type 'Headers' is not assignable to type 'Record<string, string | number | boolean>'.
              Index signature for type 'string' is missing in type 'Headers'.(2345)

and

Argument of type '(input: string | URL | Request, init?: RequestInit | undefined) => Promise<Response>' is not assignable to parameter of type '{ (input: URL | RequestInfo, init?: RequestInit | undefined): Promise<Response>; (input: string | URL | Request, init?: RequestInit | undefined): Promise<...>; }'.
  Types of parameters 'init' and 'init' are incompatible.
    Type 'RequestInit | undefined' is not assignable to type 'import("/Users/callumgare/repos/liase/node_modules/wreq-js/dist/wreq-js", { with: { "resolution-mode": "import" } }).RequestInit | undefined'.
      Type 'RequestInit' is not assignable to type 'import("/Users/callumgare/repos/liase/node_modules/wreq-js/dist/wreq-js", { with: { "resolution-mode": "import" } }).RequestInit'.
        Types of property 'body' are incompatible.
          Type 'BodyInit | null | undefined' is not assignable to type 'import("/Users/callumgare/repos/liase/node_modules/wreq-js/dist/wreq-js", { with: { "resolution-mode": "import" } }).BodyInit | null | undefined'.
            Type 'ReadableStream<any>' is not assignable to type 'BodyInit | null | undefined'.
              Type 'ReadableStream<any>' is missing the following properties from type 'FormData': append, delete, get, getAll, and 6 more.ts(2345)

and

Argument of type 'import("node_modules/wreq-js/dist/wreq-js").Response' is not assignable to parameter of type 'Response'.
  Types of property 'headers' are incompatible.
    Property 'getSetCookie' is missing in type 'import("node_modules/wreq-js/dist/wreq-js").Headers' but required in type 'Headers'.(2345)

wreq-js version

2.3.1 (latest)

Runtime

v22.22.3

OS

macOS (Apple Silicon)

Additional context

No response

[callumgare]

To anyone else facing this I've created a workaround, a helper function which takes the wreq-js fetch client and makes the minor modifications required to have it be compatible with the standard web API fetch client interface:

import {
  type RequestInit as WreqRequestInit,
  type Response as WreqResponse,
  fetch as wreqFetch,
} from "wreq-js";

// @ts-expect-error -- Without some minor modification wreq-js's fetch doesn't satisfy the standard fetch interface
const wreqFetchWithoutNormalisation: typeof fetch = wreqFetch

// With those minor modifications it does
const wreqFetchWithNormalisation: typeof fetch = normaliseWreqFetch(wreqFetch)

type NormalisedWreqRequestInit<TInit extends WreqRequestInit = WreqRequestInit> = 
  Omit<TInit, "body" | "headers"> 
    & { body?: BodyInit | null; headers?: HeadersInit }

type NormalisedWreqResponse<TResponse extends WreqResponse = WreqResponse> = 
  Omit<TResponse, "bytes" | "clone" | "headers" | "body"> 
    & Pick<Response, "bytes" | "clone" | "headers" | "body">;

type NormalisedWreqFetch<
  TInit extends WreqRequestInit = WreqRequestInit,
  TResponse extends NormalisedWreqResponse = NormalisedWreqResponse,
> = (
  input: string | URL | Request,
  init?: NormalisedWreqRequestInit<TInit> | undefined
) => Promise<TResponse>

function normaliseWreqFetch<
  TInit extends WreqRequestInit = WreqRequestInit,
>(wreqFetchFn: typeof wreqFetch): NormalisedWreqFetch<TInit, NormalisedWreqResponse> {
  return async (input, init) => {
    const normalisedInit = init
      ? await webRequestInitToWreqRequestInit(init)
      : undefined;
    const wreqResponse = await wreqFetchFn(input, normalisedInit);

    return wreqResponseToWebResponse(wreqResponse);
  };
}

async function webRequestInitToWreqRequestInit<
  T extends RequestInit
>(
  init: T,
) {
  return {
    ...init,
    body:
      init.body instanceof ReadableStream
        ? await new Response(init.body).arrayBuffer()
        : init.body,
    headers: init.headers as HeadersInit,
  };
}

function wreqResponseToWebResponse(wreqResponse: WreqResponse): NormalisedWreqResponse {
  return Object.assign(wreqResponse, {
    // WreqFetch's Response does not have a bytes() method which is standard in the Fetch API, so we add it if missing.
    bytes: async () => {
      const buffer = await wreqResponse.arrayBuffer();
      return new Uint8Array(buffer);
    },
    // Wreq has a custom Headers object which seems close to but not fully compatible with standard Fetch API Headers.
    headers: new Headers(wreqResponse.headers.toObject()),
    // WreqFetch's Response body is of type `ReadableStream<Uint8Array<ArrayBufferLike>> | null`
    // which seems to be functionally with standard Fetch API's `ReadableStream<Uint8Array> | null` as best as I 
    // can tell, but the type definitions are incompatible so we cast them.
    body: wreqResponse.body as ReadableStream<Uint8Array<ArrayBuffer>> | null,
    // We also need to apply all of these normalisations to the new response created by .clone()
    clone: () => wreqResponseToWebResponse(wreqResponse.clone()),
  });
}

[sqdshguy]

Thanks for the report. Fixed on master:

• Response.bytes()
• BodyInit now accepts ReadableStream<Uint8Array> and sync/async iterables of Uint8Array
• Headers.getSetCookie()
• duplex: "half" accepted on RequestInit

typeof globalThis.fetch = fetch and Response → globalThis.Response now pass under Node lib settings, so your wrapper shouldn't be needed. Added a test that compiles the published .d.ts against those assertions so it can't regress.

Caveat: stream bodies are buffered into memory before sending, not streamed.

If you're on lib: ["DOM"], the Headers error remains and it's upstream, not us. Node's own undici-types Response isn't assignable to the DOM Response either (SpecIterableIterator missing [Symbol.dispose]). See nodejs/undici#3639, fixed in #4867, reverted in #5173. skipLibCheck plus a cast at the boundary is the workaround for now.