Support passing Request object to fetch function

[vincerubinetti]

The regular browser fetch function can take either a url string OR a Request object as its first parameter:
https://developer.mozilla.org/en-US/docs/Web/API/fetch

If I try to pass a Request object to node-fetch, I get the error: Only absolute URLs are supported.

This would be very nice to have, as I'm using fetch/node-fetch alongside the CacheStorage API, which works (best) using Request objects.

[jimmywarting]

Are you sure that this dosen't work?

we got test cases for this...

node-fetch/test/main.js

Lines 1964 to 1972 in 1c5ed6b

	it('should support fetch with Request instance', async () => {
	const url = `${base}hello`;
	const request = new Request(url);
	const res = await fetch(request);
	expect(res.url).to.equal(url);
	expect(res.ok).to.be.true;
	expect(res.status).to.equal(200);
	await res.arrayBuffer();
	});

[vincerubinetti]

Perhaps it's that I'm using Request with options as well, and that test only covers the url?

I could be using it wrong though. I'm using node-fetch to mock fetch in jest, like this:

import fetch, { Request } from "node-fetch";

window.fetch = jest.fn().mockImplementation(fetch);
window.Request = jest.fn().mockImplementation(() => Request);

Also, the error message and the docs seem to imply that the fetch function only takes an absolute url string.

[vincerubinetti]

Just ran this test.mjs file with node and it worked:

import fetch, { Request } from "node-fetch";

const url = "https://httpbin.org/get";
const request = new Request(url, { method: "GET" });

fetch(request)
  .then((r) => r.json())
  .then(console.log);

So it's probably an issue with how I'm mocking it in jest. Any help there would be appreciated too.

Might want to update the docs and error codes to mention the other supported input types.

[jimmywarting]

The problem might not be with fetch+Request

the problem could perhaps be that you are creating a Request on the backend like so: new Request('/get'). On the backend you would need to use absolute urls. new Request('https://example.com/get')

[vincerubinetti]

I don't think so. I have a my own request function wrapper around fetch that looks like this (heavily simplified):

export const request = async <T>(
  url = "",
  options: RequestInit = {}
): Promise<T> => {
  const request = new Request(url, options);
  const response = await fetch(request);
  const parsed = await response.json();
  return parsed;
};

Simply changing fetch(request) to fetch(url, options) makes node-fetch not complain. Also I'm quite sure there are no relative urls being passed to this wrapper function anywhere in my code base. I only use this function to request external public resources (ie absolute urls).

I think the problem is the jest mocking.

[vincerubinetti]

Here's some debug info:

url: https://api.uptimerobot.com/v2/getMonitors?api_key=REDACTED

      TypeError: Only absolute URLs are supported
          at getNodeRequestOptions (/Users/rubinetv/Desktop/monarch-ui-new/node_modules/node-fetch/lib/index.js:1327:9)
          at /Users/rubinetv/Desktop/monarch-ui-new/node_modules/node-fetch/lib/index.js:1440:19
          at new Promise (<anonymous>)
          at fetch (/Users/rubinetv/Desktop/monarch-ui-new/node_modules/node-fetch/lib/index.js:1437:9)
          at /Users/rubinetv/Desktop/monarch-ui-new/node_modules/jest-mock/build/index.js:449:39
          at /Users/rubinetv/Desktop/monarch-ui-new/node_modules/jest-mock/build/index.js:457:13
          at fetch (/Users/rubinetv/Desktop/monarch-ui-new/node_modules/jest-mock/build/index.js:170:19)
          at request (/Users/rubinetv/Desktop/monarch-ui-new/src/api/index.ts:65:22)
          at processTicksAndRejections (node:internal/process/task_queues:96:5)

All the other urls when errors are thrown are also absolute.

I'll continue to look into this and let you know if I figure anything out.

[vincerubinetti]

Important addendums

• I am using msw, which I believe uses node-fetch under the hood. I wonder if trying to mock Request so my custom request func above doesn't throw an error is messing with msw's ability to mock my request so my tests pass.
• I'm using node-fetch version 2.6.7 due to this issue.

[isao]

I see this issue too. Calling fetch(request) is throwing for me when I provide a valid Request instance as the sole fetch parameter. The same code works in the browser.

It looks like the isRequest() check is failing because of a Symbol mis-match.

Here are some node debugger screenshots showing parseURL() being called on a Request instance instead of a string...

HTH... FWIW, I can kind of work around this by calling node-fetch like fetch(request.url, request), but I think the semantics are different with the headers and body?

[isao]

To clarify, the "Request internals" symbol used by fetch is different than the one in the Request export from node-fetch. I'm using Vite in dev, which might explain the symbol mis-match...