URLSearchParams - getAll() is not returning proper array in edge runtime.
Bug Report
Current behavior Using NextJS 13.4, using API routes (Pages Folder) in the following folder structure:
pages/api/[...name].jsx
When i try to use the method getAll() on the route BASE_URL/api/first-segment/second-segment:
const { searchParams } = new URL(req.url);
const allSegments = searchParams.getAll('name')
the expected return from getAll() was to be an array like:
[
'first-segment',
'second-segment'
]
This works correct in localhost and in chrome js console.
However, when pushing to production (edge runtime), it gives the following code:
[
'first-segment/second-segment',
]
... which is different from the Web API implementation.
Expected behavior/code
From the example above, searchParams.getAll(param) was expected to return an array with two items. It returned one array with only one item.
I ran the code now with edgeVM, and works as expected.
The only place where is not working is in production code, deployed at vercel edge.
if you want to check the bug in production: https://og.codante.io/api/test/first-segment/second-segment
Hello, I'm not seeing how .getAll('name') is going to return ['first-segment','second-segment'] to you.
Using Node.js repl:
> new URL('https://og.codante.io/api/test/first-segment/second-segment').searchParams.getAll('name')
[]
They should be query parameters rather than part of the URL, like in this way:
new URL('https://og.codante.io/api/test?name=first-segment&name=second-segment').searchParams.getAll('name')
[ 'first-segment', 'second-segment' ]
Please correct me if I'm wrong; happy to re-open the issue if needed.
Hello @Kikobeats,
When i have a catch all route, NextJS injects the segments into req.url as query params when using edge runtime, so we can access it on API routes.
Sorry if i wasn't clear, but I am sure that this problem is a bug. Local and edge production environment are getting different results with the exact same code. Please take a look at the code and the production result of both cases (as per the documentation example)
Edge Runtime (bug): https://og.codante.io/api/edge/first/second - Node: https://og.codante.io/api/node/first/second
Below is the code that is running in production (link here):
export const config = {
runtime: 'edge',
};
export default function handler(req) {
const { searchParams } = new URL(req.url);
const allSegments = searchParams.getAll('name');
return new Response(JSON.stringify({ allSegments }), { status: 200 });
}
Hello @Kikobeats any chance reopening this?
When we run this in node:
new URL('https://og.codante.io/api/test?name=first-segment&name=second-segment').searchParams.getAll('name')
we get the expected output.
But when we run the same code in edge-runtime (production nextjs deployment @vercel ), the result is not the expected.
Please check this live: Edge Runtime (bug): og.codante.io/api/edge/first/second - Node: og.codante.io/api/node/first/second
Hey @robertotcestari, I reopened the issue; definitively we have to take a look!