use native fetch for Next.js

[nainemom]

Describe the feature

Hi, as you mentioned in readme, in nodejs environment this library uses native fetch if globalThis.fetch available and fallback it to node-fetch-native if its not supported. My problem is that i want to use node-fetch-native, even if nodejs version is higher than 18 and globalThis.fetch is available.

The nextjs backend also doing some kind of your way to fill globalThis.fetch, the problem is that it does the job before the ofetch imports. so even if the globalThis.fetch is not available, nextjs fill it with its own backend and ofetch cannot detect that native fetch is not supported.

Additional information

• Would you be willing to help implement this feature?

[pi0]

Hi, dear @nainemom thanks for opening the issue. Is it possible for you to make a reproduction so i can better understand the issue? 🙏🏼

BTW if you want to explicitly use node-fetch polyfills, you can set the FORCE_NODE_FETCH environment variable.

[nainemom]

The globalThis.fetch inside nextjs is not equal to real native one in nodejs environments. The behavior of nextjs is that it checks that if globalThis.fetch is not available, fills it with undici. Then it extends it again so you can add some custom options to fetch. For example, this code is valid in a js file inside nextjs, no matter that the nodejs version is less or greater than 17:

fetch('https://...', {
    method: 'GET',
    next: {
       tags: ['x'],
       revalidate: 5000,
    },
});

So if i use ofetch in nextjs , it always uses the fetch provided by next, not the actual native one and not the fallback one provided by ofetch (node-fetch), because nextjs assigns the globalThis.fetch before ofetch imports.

The actual issue of mine is that i want to get ride of nextjs manipulation to fetch, and surely it is not related to this discussion :D
I just want to find a way to use ofetch in nextjs, just like when i use ofetch in pure js file.

[pi0]

Found these:

• https://github.com/vercel/next.js/blob/canary/packages/next/src/server/lib/patch-fetch.ts#L112
• https://github.com/vercel/next.js/blob/e117c000e45b80475d03a9bcaf1d53eb81058719/packages/next/src/server/node-polyfill-fetch.ts#L20

Neither ofetch nor node-fetch-native, overrides globalThis.fetch, this is a really bad practice they are doing. (also there is no possible way to retrieve native fetch by us if Next.js is overriding globalThis.fetch earlier).

The code in node-polyfill-fetch.ts seems to be protected with typeof globalThis.fetch === 'undefined' so i am not sure if in an environment (like Node.js 18 runtime) Next.js will override globalThis.fetch via polyfills but it is likely that patch-fetch.ts is making trouble. (You can confirm by checking fetch.__nextPatched flag).

Please keep me informed if you found out more. A reproduction would be nice so i can check faster but will try to come back to this later.

[pi0]

Shared by @QuiiBz, React does it too! https://github.com/facebook/react/blob/9b4f847d93aa302c953543ae0631023c06408ad3/packages/react/src/ReactFetch.js#L134

[tom-sherman]

Response from the React team about patching: facebook/react#25573 (comment)

[pi0]

Thanks for the ref @tom-sherman (one less thing to worry, i hope!) ❤️

[QuiiBz]

I was debugging something completely different and found that Next.js saves the original fetch function under globalThis._nextOriginalFetch. Can this help in any way?

https://github.com/vercel/next.js/blob/30da48fcd28b1fc07dcfa06d89b28bec95897d10/packages/next/src/server/lib/patch-fetch.ts#L120

[pi0]

It does indeed and people can do it in their project to depolyfill next at least for ofetch. However i am not comfortable adding such patch to the core, we might at least document it!

ofetch.create({ fetch: globalThis._nextOriginalFetch || globalThis.fetch }); 

[pi0]

This seems out of our hands to do anything. If you feel it is something worth to fix, feel free to make an issue in next.js repository to track.