Unable to fetch from Next.js API which is connected to external API

Questions / Help
1

Good morning everyone,

I am currently having some issues with a deployed version of my Next.js project (deployed with a Dockerfile).

What happened:
On my landing page I am fetching data from the TMDb API which itself is called by the internal API. I am constantly getting a 500 error with a Connection Timeout Error after 10 seconds.

2022-11-23T07:29:19.344 app[cf597037] fra [info] TypeError: fetch failed
2022-11-23T07:29:19.345 app[cf597037] fra [info] at Object.fetch (node:internal/deps/undici/undici:11118:11)
2022-11-23T07:29:19.345 app[cf597037] fra [info] at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
2022-11-23T07:29:19.345 app[cf597037] fra [info] at async handler (/app/.next/server/pages/api/movies.js:18:21)
2022-11-23T07:29:19.345 app[cf597037] fra [info] at async Object.apiResolver (/app/node_modules/next/dist/server/api-utils/node.js:366:9)
2022-11-23T07:29:19.345 app[cf597037] fra [info] at async NextNodeServer.runApi (/app/node_modules/next/dist/server/next-server.js:481:9)
2022-11-23T07:29:19.345 app[cf597037] fra [info] at async Object.fn (/app/node_modules/next/dist/server/next-server.js:735:37)
2022-11-23T07:29:19.345 app[cf597037] fra [info] at async Router.execute (/app/node_modules/next/dist/server/router.js:247:36)
2022-11-23T07:29:19.346 app[cf597037] fra [info] at async NextNodeServer.run (/app/node_modules/next/dist/server/base-server.js:347:29)
2022-11-23T07:29:19.346 app[cf597037] fra [info] at async NextNodeServer.handleRequest (/app/node_modules/next/dist/server/base-server.js:285:20) {
2022-11-23T07:29:19.346 app[cf597037] fra [info] cause: ConnectTimeoutError: Connect Timeout Error
2022-11-23T07:29:19.346 app[cf597037] fra [info] at onConnectTimeout (node:internal/deps/undici/undici:6625:28)
2022-11-23T07:29:19.346 app[cf597037] fra [info] at node:internal/deps/undici/undici:6583:50
2022-11-23T07:29:19.346 app[cf597037] fra [info] at Immediate._onImmediate (node:internal/deps/undici/undici:6614:13)
2022-11-23T07:29:19.346 app[cf597037] fra [info] at process.processImmediate (node:internal/timers:471:21) {
2022-11-23T07:29:19.346 app[cf597037] fra [info] code: 'UND_ERR_CONNECT_TIMEOUT'

I also built a different Django API (also hosted on Fly.io using Dockerfile) that I need to connect with at some point on a different page, but I am getting the same error.
If I fetching strictly internally (for example logging in or changing a password), there is no error.

When I’m trying the functionality of my project locally (dev and production server), it works fine. and the fetch is not taking 10 seconds but around 1.5s.

Codeblock for the fetching of the TMDb API (I omitted comments and other responses since they are not happening in this case):

    const res = await fetch(
      `https://api.themoviedb.org/3/trending/all/day?api_key=${process.env.TMDB_API_KEY}`,
    );
    const data = await res.json();

   const resultArray: TrendingMovieType[] = data.results
        .slice(0, 10)
        .map((result: CompleteMovieResponseType) => {
          if (result.media_type === 'movie') {
            return {
              title: result.title,
              originalTitle: result.original_title,
              poster: result.poster_path,
              overview: result.overview,
              backdrop: result.backdrop_path,
              media: result.media_type,
              id: result.id,
            };
          } else if (result.media_type === 'tv') {
            return {
              id: result.id,
              media: result.media_type,
              backdrop: result.backdrop_path,
              title: result.name,
              originalTitle: result.original_name,
              poster: result.poster_path,
              overview: result.overview,
            };
          }
          return null;
        });
      return response.status(200).json({ result: resultArray });

What I tried:

  • I tried using Postman for the API calls to check if the external APIs are not working correctly - everything’s looking good.
  • I also tried Postman to call the internal API link directly - same 500 error.
  • Using flyctl ssh I tried to fetch the external APIs on the console with node, also got the 500 error.
  • Looked here if someone else had similar issues, could not find any topics. Also googling did not really help.

What might be the problem:
Maybe some configuration error on my part, although I would have no idea where. Or some next.js issue? I have no idea.

Tech used

  • Next: 12.3.1
  • React 18.2.0
  • node:18-alpine on the server (v18.12.1)

Thank you for your help!

2

I was able to figure out the problem, I just had to use an AbortController :person_shrugging: