Next.js Discord

Discord Forum

Native API Post Throwing Error

Unanswered
Asian paper wasp posted this in #help-forum
Open in Discord
Asian paper waspOP
We have a Next app, v13.4.13 with the page router. We are using TypeScript with class components.

We have a form submit that will post our data to our internal endpoint, /api/create. This will eventually post the data to an external API endpoint. For now, it's just a console.log with a return of the data.

CONSOLE.LOG 
form data
{
  // awesome form data
}
API handler should not return a value, received object.
API resolved without sending a response for /api/create, this may result in stalled requests.

Then, after the logged data and warnings, we get an error. Trying to understand what is happening. 
- error Failed to handle request for /api/create
TypeError: fetch failed
    at Object.fetch (node:internal/deps/undici/undici:11576:11)
    at async invokeRequest (/node_modules/next/dist/server/lib/server-ipc/invoke-request.js:21:12)
    at async requestHandler (/node_modules/next/dist/server/lib/start-server.js:336:33)
    at async Server.<anonymous> (/node_modules/next/dist/server/lib/start-server.js:152:13) {
  cause: HeadersTimeoutError: Headers Timeout Error
      at Timeout.onParserTimeout [as callback] (node:internal/deps/undici/undici:9748:32)
      at Timeout.onTimeout [as _onTimeout] (node:internal/deps/undici/undici:8047:17)
      at listOnTimeout (node:internal/timers:569:17)
      at process.processTimers (node:internal/timers:512:7) {
    code: 'UND_ERR_HEADERS_TIMEOUT'
  }
}

23 Replies

European sprat
The message says you're trying to return a value and it needs to be a response, so are you returning response?
Asian paper waspOP
I've fixed that part, and those two warnings have gone away. Still getting the error though.
European sprat
show code
Asian paper waspOP
I'm very limited on what can be shown, but here is a sanitized version of that endpoint. 
type Data = {
  name: string;
};

export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
  if (req.method === 'POST') {
    console.log('form data\n', req.body);
    return res.json({ name: 'awesome data returned' });
  }
}
European sprat
ah sorry i missed reading that you were using page router. i'm not familiar with it
French Spaniel
Can I see the code for your fetch request?
Asian paper waspOP
I don't have a fetch. Using Axios.
On form submit, this is the POST to our local Next endpoint. 
return await axios({
  method: 'post',
  url: `/api/create`,
  data: data
})
  .then((res) => {
    console.log('Success\n', res.statusText);
  })
  .catch((error: Error) => {
    console.log('Error Received:\n', error);
  });
French Spaniel
Just to debug, outside and below the if block do a res.status(200).end();

Then hit the endpoint
French Spaniel
type Data = {
  name: string;
};

export default async function handler(req: NextApiRequest, res: NextApiResponse<Data>) {
  if (req.method === 'POST') {
    console.log('form data\n', req.body);
    return res.json({ name: 'awesome data returned' });
  }
  res.status(200).end(); // For debugging to see if route is resolving as expected
}
The other two things is I am seeing two different routes between

API handler should not return a value, received object.
API resolved without sending a response for /api/create-trial, this may result in stalled requests.


- error Failed to handle request for /api/create
TypeError: fetch failed
French Spaniel
Got it, trying to narrow down what is causing this. I've experienced this same error before because I heavily use pages router and I am trying to remember what it was.
The next thing I would do is look at the actual req object coming in from the post by doing a console.log(req) above the if statement in the endpoint
Asian paper waspOP
No, I'm not getting a response from the res.status. The data is being logged to the console, with no warnings and I don't have an error yet. So far, so good.
@French Spaniel Hmm, one last thing is I know you sanitized this, but I would ensure that there is some response being sent to the client if this if block does not get evaluated to true.
Asian paper waspOP
Right. We haven't gotten there yet. Still getting used to building an API this way.
Asian paper waspOP
Req object looks good. Don't see a need to keep it.
Asian paper waspOP
Things are looking good. Gonna close this.