NextJS api route works perfectly locally (creates 200+ records) and it's broken on Vercel

Question

This is my API route:

And the code:

import type { NextApiRequest, NextApiResponse } from "next";
import axios from "axios";
import prisma from "../../../lib/prisma";

interface Platform {
  id: number;
  abbreviation: string;
  alternative_name: string;
  category: number;
  created_at: number;
  generation: number;
  name: string;
  platform_logo: {
    id: number;
    alpha_channel: boolean;
    animated: boolean;
    height: number;
    image_id: string;
    url: string;
    width: number;
    checksum: string;
  };
  slug: string;
  summary: string;
  updated_at: number;
  url: string;
  versions: number[];
  checksum: string;
}

export default async function handler(
  req: NextApiRequest,
  res: NextApiResponse
) {
  const url = "https://api.igdb.com/v4/platforms";

  const headers = {
    "client-id": process.env.TWITCH_IGDB_CLIENT_ID,
    authorization: "Bearer my_token",
    "accept-encoding": "*",
  };

  const body = `fields *, platform_family.*, platform_logo.*;
  limit 500;`;

  const response = await axios.post(url, body, { headers });

  console.log("The response status is:", response.status);

  if (response.status == 200) {
    await response.data.forEach(async (p: Platform) => {
      try {
        const platform = await prisma.platform
          .create({
            data: {
              category: p.category,
              name: p.name,
              slug: p.slug,
              platform_logo_url: p.platform_logo?.url, // Todo, sanitize this url.
              hashtag: p.name, // Todo, convert name to hashtag
            },
          });

        console.log("Created platforms", platform);
      } catch (e) {
        console.log(e)
      }

    });
  } else {
    console.log(response.status);
  }

  res.status(200).json({ message: "Imported all platforms." });
}

Locally I hit the url: http://localhost:3000/api/igdb/refresh_platforms and I can see the 199 platforms in my local database.

On Vercel, I sometimes get 3 inserted, sometimes none inserted, sometimes, 55 inserted.

It seems completely arbitrary and I'm totally confused.

What am I doing wrong here?

Does this answer your question? [How to return many Promises and wait for them all before doing other stuff](https://stackoverflow.com/questions/31426740/how-to-return-many-promises-and-wait-for-them-all-before-doing-other-stuff) — Phil, Dec 18 '22 at 23:31
Not really @Phil I'm new to typescript so I don't know how my code would need to look like with the actual solution. What is the fix here? — Only Bolivian Here, Dec 19 '22 at 01:10
`await Promise.all(response.data.map(async (p: Platform) => { ... }))` — Phil, Dec 19 '22 at 01:13

score -1 · Answer 1 · answered Dec 19 '22 at 01:20

The solution was to use for..of - that fixed the problem. Thanks @phil

    for (const p of response.data) {
      try {
        const platform = await prisma.platform.create({
          data: {
            category: p.category,
            name: p.name,
            slug: p.slug,
            platform_logo_url: p.platform_logo?.url, // Todo, sanitize this url.
            hashtag: p.name, // Todo, convert name to hashtag
          },
        });

        console.log("[igdb] Platform created", platform);
      } catch (e) {
        console.log("[igdb] Platform already exists, skipping", p.name);
      }
    }

Note that this sort of loop will execute each Promise in sequence whereas Promise.all will execute in parallel. — Linda Paiste, Dec 19 '22 at 03:31

NextJS api route works perfectly locally (creates 200+ records) and it's broken on Vercel

1 Answers1