NextJS 13 App Router API route not handling non-standard API request

Answered

Masai Lion posted this in #help-forum

Masai LionOP

2023-06-18T07:04:15.000Z

I am trying to integrate with a tool that generates a non-standard API request that looks like this

{
    "url": "http://localhost:3000/api/help",
    "method": "GET",
    "payload": "{ 'wow': 'wee'}",
    "headers": {}
}

I can't see to get the request to flow to the route - it returns an error to the caller
I assume it is because the attribute of the incoming request is 'payload' rather than 'body' - but I can change the calling code

Is there any way to relax the request parser or rewrite it to change payload to body before it gets handled?

Answered by Masai Lion

solved in the end - the calling code was using GET but sending a body - changed the calling code to use POST and now working fine - thanks

View full answer

19 Replies

@Masai Lion I am trying to integrate with a tool that generates a non-standard API request that looks like this `{ "url": "http://localhost:3000/api/help", "method": "GET", "payload": "{ 'wow': 'wee'}", "headers": {} }` I can't see to get the request to flow to the route - it returns an error to the caller I assume it is because the attribute of the incoming request is 'payload' rather than 'body' - but I can change the calling code Is there any way to relax the request parser or rewrite it to change **payload** to **body** before it gets handled?

joulev

2023-06-18T07:13:37.000Z

how do you make the request to the api? there needs to be a curl or a fetch or a axios somewhere - how do you use it?

Masai LionOP

2023-06-18T07:44:36.000Z

The tool is Tana - it calls my API service written using NextJS13. The Tana tool is the one generating the bad HTTP request.

@joulev how do you make the request to the api? there needs to be a `curl` or a `fetch` or a `axios` somewhere - how do you use it?

Masai LionOP

2023-06-18T07:45:26.000Z

The tool is Tana - it calls my API service written using NextJS13. The Tana tool is the one generating the bad HTTP request. I am running my code locally. Hence the http://localhost:3000

My (simplified) code looks like this:

import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export async function GET(request: NextRequest, ctx: undefined) {
  const { method } = request;
  console.log(request);
  console.log("HELP");
  const res = NextResponse.json({});
  res.headers.set("Access-Control-Allow-Origin", "https://app.tana.inc");
  return res;
}

but it never gets called when the Tana tool sets the payload attribute. If I change the way Tana call my code, so as to not set payload, then my code gets called

joulev

2023-06-18T07:48:13.000Z

i do think it is actually using the POST method

try the same code but with POST

idk this tana thing so i cant tell how it performs http requests, but it still needs to be http requests behind the scenes so route handlers should be able to take them

Masai LionOP

2023-06-18T07:49:06.000Z

I don't think so - I can see console logging from Tana that says it is using GET and it reports that my code generated an error

joulev

2023-06-18T07:50:05.000Z

if it did use the true HTTP GET, and it is indeed /api/help that you put this GET in, then that console.log(request) will 100% be printed, without fail

Masai LionOP

2023-06-18T07:50:16.000Z

but I see no logging or console at all in the NextJS console

joulev

2023-06-18T07:50:28.000Z

so that means it is not actual HTTP GET despite what it is saying

Masai LionOP

2023-06-18T07:50:51.000Z

I think it is failing deep inside NextJS engine trying to process the incoming request

joulev

2023-06-18T07:50:51.000Z

and i suspect it to be POST because many tools implement custom specs that uses POST even for reads

Masai LionOP

2023-06-18T07:51:46.000Z

I added POST() as well and that isn't called either

joulev

2023-06-18T07:52:05.000Z

that's weird, well idk then. try a pages/api route, does it work with tana?

a pages/api route takes any http methods

Masai LionOP

2023-06-22T00:05:48.000Z

solved in the end - the calling code was using GET but sending a body - changed the calling code to use POST and now working fine - thanks

Answer

Golden-winged Warbler

2023-06-22T00:30:48.000Z

I think bodies with GET is an anti-pattern and not widely supported. That could be at the root of this. FWIW, the pattern of GraphQL using POST for what should be GET so they can send a body with the request has led to a proposal for a QUERY method which would be basically GET with a body (to signifiy this request should not make modifications like POST|PATCH)