Getting error while trying to use KY to fetch data in NEXTJS 13 Server APIs 'TypeError: Cannot construct a Request with a Request object that has already been used.'

[FaizanShaikh45]

Hi Guys,

Config:

KY Version: ^0.33.2
Node Version: 18.13.0
NextJS Version: latest (13)
React: 18.2.0

I'm trying to use KY to retrieve data from backend services. I'm using KY in the NextJS APIs folder to call down-stream services. However, I am receiving the error mentioned below.

TypeError: Cannot construct a Request with a Request object that has already been used.
    at Object.fetch (node:internal/deps/undici/undici:14062:11)
    at async fn (webpack-internal:///(api)/./node_modules/ky/distribution/core/Ky.js:29:28)
    at async result.<computed> [as json] (webpack-internal:///(api)/./node_modules/ky/distribution/core/Ky.js:65:39)
    at async handler (webpack-internal:///(api)/./pages/api/user/recommended-user-list.ts:13:30)
    at async Object.apiResolver (folder/node_modules/next/dist/server/api-utils/node.js:372:9)
    at async DevServer.runApi (folder/node_modules/next/dist/server/next-server.js:488:9)
    at async Object.fn (folder/node_modules/next/dist/server/next-server.js:751:37)
    at async Router.execute (folder/node_modules/next/dist/server/router.js:253:36)
    at async DevServer.run (folder/node_modules/next/dist/server/base-server.js:384:29)
    at async DevServer.run (folder/node_modules/next/dist/server/dev/next-dev-server.js:741:20)
    at async DevServer.handleRequest (folder/node_modules/next/dist/server/base-server.js:322:20)

HTTP Client Code Ref:

The structure I'm attempting to set up for the http client is seen above. So I'm trying to create an HTTP client and passing it to the service as arguments to the function, and then with that client service is calling downstream APIs to get data.

Service Code Ref:

It works perfectly with NextJS 12, however when I try to implement it with NextJS 13, I get this problem. Could someone please assist me with this?

Thanks

[panudetjt]

Have you figured it out ?

My assumption is because nextjs is polyfill the native fetch with their own version of fetch.

[Talent30]

The fetch in NextJS behaves differently to the native fetch.

[Talent30]

I can reproduce this, maybe need to raise an issue on next.js side

[AlexisWalravens]

I also encountered this issue, I tried with just the native NodeJS fetch (polyfilled by Next) and I don't have the issue with just fetch.

[vladly]

I also faced this problem.

[lcdss]

Same problem here. I'll probably use just fetch for now.

[AlexisWalravens]

Same problem here. I'll probably use just fetch for now.

I now use ofetch (https://github.com/unjs/ofetch), it has a similar set of features as ky and it works with the app router.

[mabdullahadeel]

I am also having troubles getting ky to work in nextjs server actions/components

In my case, it does make request but the json payload is not attached to the request. Using fetch solved the issue. So I guess it's something related to ky polyfill.

[sholladay]

Please try awaiting the response before calling .json() and tell me if that fixes it or not.

Before:

return httpClient
    .post ("test/test", {
        json: {
            test: params. test,
        }
    })
    .json()

After:

const response = await httpClient
    .post ("test/test", {
        json: {
            test: params. test,
        }
    });

return response.json();

[GLObus303]

I ran into similar issues with the Next.js app folder/server actions/server components or whatnot. The solution was quite simple for me and it was upgrading to Node 18+.

Apparently, Node pre-18 is not supporting native fetch and I do suppose Next.js has troubles with that. Unfortunately, the fact Ky is node 18+ is at the bottom of the docs, so it took a while to find out.

[IRediTOTO]

lso having troubles getting ky to work in nextjs server actions/components

In my case, it does make request but the json payload is not attached to the request. Using fetch solved the issue. So I guess it's something related to ky polyfill.

I just tried, not working