API resolved without sending a response in Nextjs

Question

I have to make some changes in my NextJS project because my endpoint API doesn't support many calls and I would like to make a refresh from the original data every 3 min.

I implemented API from NextJS: I created a pages/api/data and inside, I make the call to my endpoint, and in my getInitialProps inside index call to data file.

The get works okay, but I have 2 problems:

1: I have an alert message that says:

API resolved without sending a response for /api/data, this may result in stalled requests.

2: It doesn't reload data after 3 minutes... I suppose it is because of the Cache-Control value.

This is my code:

pages/api/data

import { getData } from "../../helper";

export default async function(req, res) {
  getData()
    .then(response => {
      res.statusCode = 200
      res.setHeader('Content-Type', 'application/json');
      res.setHeader('Cache-Control', 'max-age=180000');
      res.end(JSON.stringify(response))
    })
    .catch(error => {
      res.json(error);
      next();
    });
};

pages/index

import React, { useState, useEffect } from "react";
import fetch from 'isomorphic-unfetch'

const Index = props => {

  return (
    <>Hello World</>
  );
};

 Index.getInitialProps = async ({ res }) => {
  const response = await fetch('http://localhost:3000/api/data')
  const users = await response.json()
  return { users }
};

export default Index;

Hi Alessio, I try whit the await and the alert message disappear! but the data returns 4 time now... — Phil
– Phil, Commented Mar 14, 2020 at 21:39
You need to add a return statement before getData(), e.g. return getData().then(...).catch(...) — juliomalves
– juliomalves, Commented Jul 26, 2022 at 18:09

GMaiolo · Accepted Answer · 2021-12-29 05:51:53Z

46

You should return a Promise and resolve/reject it.

Example:

import { getData } from "../../helper";

export default async function(req, res) {
  return new Promise((resolve, reject) => {
    getData()
      .then(response => {
        res.statusCode = 200
        res.setHeader('Content-Type', 'application/json');
        res.setHeader('Cache-Control', 'max-age=180000');
        res.end(JSON.stringify(response));
        resolve();
      })
      .catch(error => {
        res.json(error);
        res.status(405).end();
        resolve(); // in case something goes wrong in the catch block (as vijay commented)
      });
  });
};

edited Dec 29, 2021 at 5:51

GMaiolo

4,6681 gold badge26 silver badges39 bronze badges

answered May 11, 2020 at 14:31

Naxos84

2,0371 gold badge25 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Vijay Over a year ago

Code snipped in the answer might throw UnhandledPromiseRejectionWarning if there is an error. In the catch block you should do: res.status(405).end(); return resolve()

jmealy Over a year ago

Returning a promise from an async function is redundant. Better to use await on getData, ditch all the nesting, and return whatever values you please rather than resolveing.

Naxos84 Over a year ago

I totally aggree that returning an explicit Promise is not always necessary in in an async function. But in my opinion there is nothing useful to return if we're using await. The thing here is that NextJS only wants some return value from that function it doesn't matter what it is. Returning something like data.someValue might be confusing here.

christian wuensche Over a year ago

I had the same error. I forgott to add await in front of an async function inside my api default function.

jfunk · Accepted Answer · 2022-07-26 00:40:44Z

15

For me it was necessary to return the result, even though the result was given to the client without return:

Before: res.status(405).json({ message: 'Method not allowed.' });

After, error resolved: return res.status(405).send('Method not allowed.');

[EDIT]: corrected to use send instead of json for error return value.

edited Jul 26, 2022 at 0:40

answered Apr 30, 2022 at 23:12

jfunk

8,2724 gold badges43 silver badges41 bronze badges

2 Comments

Zev Isert Over a year ago

Not sure about this, .json returns void, and isn't async, so it wouldn't be much different from a plain return anyway would it?

mohas Over a year ago

changed .send({message: 'not found'}) to .send('not found') for it to work

p galiardi · Accepted Answer · 2021-05-27 17:17:48Z

13

import { getData } from "../../helper";

export default async function (req, res) {
  try {
    const response = await getData();
    res.statusCode = 200;
    res.setHeader('Content-Type', 'application/json');
    res.setHeader('Cache-Control', 'max-age=180000');
    res.end(JSON.stringify(response));
  }

  catch (error) {
    res.json(error);
    res.status(405).end();
  }
}

answered May 27, 2021 at 17:17

p galiardi

1491 silver badge4 bronze badges

2 Comments

johndpope Over a year ago

.end() fixed it - thanks

nunurao Over a year ago

Why is it better to use the async flow instead of .then().catch()? Don't they behave the same effectively?

Andrey · Accepted Answer · 2022-12-31 16:53:24Z

8

You can try adding the following additional export to your "pages/api/xxxx" API page:

// pages/api/xxxx

export const config = {
  api: {
    externalResolver: true,
  },
};

You can find more details about following config here:
https://nextjs.org/docs/api-routes/request-helpers#custom-config

edited Dec 31, 2022 at 16:53

answered Dec 31, 2022 at 16:52

Andrey

811 silver badge4 bronze badges

2 Comments

zeros and ones Over a year ago

Thank you, this is the answer I was looking for. I am using express on the API routes with nextjs and awaiting a promise was resolving the request too soon.

holydragon Over a year ago

Is there a solution to implement this kind of config for every api in one place?

Yulian · Accepted Answer · 2023-04-26 08:53:12Z

2

Here is how to fix the error since you are using async and fetching data, just add await before fetch :

import { getData } from "../../helper";

export default async function(req, res) {
  await getData()
    .then(response => {
      res.statusCode = 200
      res.setHeader('Content-Type', 'application/json');
      res.setHeader('Cache-Control', 'max-age=180000');
      res.end(JSON.stringify(response))
    })
    .catch(error => {
      res.json(error);
      next();
    });
};

edited Apr 26, 2023 at 8:53

Yulian

3884 silver badges11 bronze badges

answered Nov 3, 2022 at 18:41

ABDELLATIF ANAFLOUS

1,05711 silver badges15 bronze badges

Comments

Ramprasad · Accepted Answer · 2022-09-06 11:09:14Z

1

export default async function handler(req, res) {
  return new Promise(async (resolve) => {
    switch (req.method) {
      case "GET": {
        try {
          let response = await fetch(
            "https://jsonplaceholder.typicode.com/todos/1"
          );
          res.status(200).send(await response.json());
          return resolve();
        } catch (error) {
          res.status(500).end();
          return resolve();
        }
      }
    }
    res.status(405).end();
    return resolve();
  });
}

edited Sep 6, 2022 at 11:09

answered Sep 6, 2022 at 11:03

Ramprasad

112 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

Ron Newcomb · Accepted Answer · 2023-02-01 20:16:37Z

If you only get this error after using next export but it works fine with next dev or next start then you probably have a CORS issue.

In the browser network tab, is there an OPTIONS call paired with your GET (or whatever)? If so, you need to handle the OPTIONS call and set the CORS headers:

export default async (request: NextApiRequest, response: NextApiResponse<IStudy[]>) => {
  response.setHeader('Access-Control-Allow-Origin', '*');
  response.setHeader('Access-Control-Allow-Headers', '*');
  response.setHeader('Access-Control-Allow-Methods', '*');
  if (request.method == 'OPTIONS') return response.status(200).end();
  // rest of your function starts here...

Obviously don't be so free with your headers in a production environment...

You can set these headers everywhere at once in nextjs.config.js like so:

  crossOrigin: 'anonymous',
  headers: () => {
    return [
      {
        source: '/api/(.*)',
        headers: [
          { key: 'Access-Control-Allow-Origin', value: '*' },
          { key: 'Access-Control-Allow-Methods', value: '*' },
          { key: 'Access-Control-Allow-Headers', value: '*' },
        ],
      },
    ];
  },

But in each api route you'll still need to prepend the line

if (request.method == 'OPTIONS') return response.status(200).end();

ABDULLOKH MUKHAMMADJONOV · Accepted Answer · 2021-10-10 20:03:07Z

0

You can use 'next-connect' library which eliminates the necessity of returning a promise in this scenario. If you like express.js's route->middleware->endpoint pattern this library is what you are looking for. It also provides global error handling out of the box! [next-connect docs]

Example:

import nc from 'next-connect'

function onError(err, req, res, next) {
  logger.log(err);

  res.status(500).end(err.toString());
  // OR: you may want to continue
  next();
}

const handler = nc({ onError });

handler
  .use((req, res, next) => {
    if(!req.user){
      throw new Error("oh no!");
      // or use next
      next(Error("oh no"));
    }
  })
  .get((req, res) => {
    res.end("success")
  })

answered Oct 10, 2021 at 20:03

ABDULLOKH MUKHAMMADJONOV

5,3946 gold badges28 silver badges51 bronze badges

1 Comment

EternalObserver Over a year ago

This doesn't solve the issue. The warning still persists.

Emmanuel Oyekan · Accepted Answer · 2023-05-18 22:13:28Z

0

Not directly related to the code sample, but I also got this error using the next APIs.

The issue was a wrong HTTP method that wasn't being accounted for in the handler.

I was calling a get, and the handler was expecting a post.

So just check out for this also.

answered May 18, 2023 at 22:13

Emmanuel Oyekan

12 bronze badges

1 Comment

Community Over a year ago

Your answer could be improved with additional supporting information. Please edit to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers in the help center.

mjw · Accepted Answer · 2023-01-10 09:34:12Z

-1

It's also good to mention that the res.send() method is a way to send the response and automatically call res.end() under the hood.

answered Jan 10, 2023 at 9:34

mjw

212 bronze badges

Collectives™ on Stack Overflow

API resolved without sending a response in Nextjs

10 Answers 10

4 Comments

2 Comments

2 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

10 Answers 10

4 Comments

2 Comments

2 Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related