Next.js Discord

Discord Forum

Unable to access API route on Vercel, but it works fine on local

Unanswered
Bombay posted this in #help-forum
Open in Discord
Avatar
BombayOP
Hello

I have api routes in my Next 13 application using the app router. For example, on my localhost, I can access this route just fine: 
http://localhost:3000/api/modeling/level/647fd6dd22a310243b687152


It returns the data requested.

When I push to main on github and it publishes successfully on Vercel, I get this response from the following endpoint.

/ 20230705074445
// https://griddle-6u6618xqe-joselvelez.vercel.app/api/modeling/level/647fd6dd22a310243b687152

{
  "message": "level not found"
}


My api route looks like this for a GET request:

export const GET = async (request:NextRequest, {params}: {params: {id: string}} ) => {
  try {
        const level = await prisma.level.findUnique({
            where: {
        id: params.id
            }
    });
    
    if (!level) {
      return NextResponse.json({message: "level not found"}, {status: 404})
    }

    return NextResponse.json({data: level}, { status: 200 })

  } catch (err) {
    return NextResponse.json({ message: "GET error, no level found", err}, {status: 500})
  }
}


Stack Details are:
MongoDB hosted on Atlas
Prisma ORM, client version 4.16.2
NextJS version 13.4.8

Why am I not able to fetch data on vercel but it works fine on local?

33 Replies

Avatar
tafutada777
because id you passed is different
Avatar
BombayOP
How so? the string at the end is a url param that is different depending on the record I am looking up. I am using the params object to access the id from the url. Did I miss something? It works find on localhost
ah! I see what you mean!
Avatar
tafutada777
if you want to get answers, you show a simple example. keep in mind nobody know your impl
Avatar
BombayOP
I just fixed that.. it still does not work. both of those ids are valid records in my mongodb
gotcha, sorry. I am new to vercel and next 13. Is there something specific I can provide? I dont want to provide my .env variables.
Avatar
tafutada777
is that a dynamic page?
Avatar
BombayOP
yes, inside my app dir, i have 
app/api/modeling/level/[id]/route.ts
Image
Here is what it looks like on localhost
Image
Avatar
tafutada777
add console.log after 9 to print params.id
Avatar
BombayOP
and this is on vercel
Image
Image
Avatar
tafutada777
and hard-code an ID that exists in DB. see the diff
Avatar
BombayOP
on local I get this when hard coding an id
Image
Image
Avatar
tafutada777
a u really sure it connects to the same DB?
Avatar
BombayOP
how can I be sure that the vercel instance is connecting to the same DB? I am using their MongoDB integration. It was working fine before.
Avatar
tafutada777
go to a Vercel Dashboard, check ENV of MongoDB endpoint
Avatar
BombayOP
I have set my prisma datasource to use the same env variable for the MongoDB connection url on local and vercel
Image
Image
the Vercel MongoDB integration created those other 2 env variables, but i dont know if I need to do something with those.
Avatar
tafutada777
at line 9 before findUnique(), add insert statement. then findUnique(the inserted doc) to see how it works.
Avatar
BombayOP
should I do this on local or vercel?
on local I have an api endpoint that works and allows me to insert new records.
On local, using thunderclient, shows up on Mongo Compass
Image
Image
This is the route file for the create api endpoint

import { NextResponse } from "next/server";
import prisma from '@/app/libs/prismadb';

export const POST = async (request:Request) => {
  try {
    const body = await request.json();
    const {
      id,
      level_name,
      level_code,
      level_desc,
      inUse,
      currency_select,
      parentLevel_select,
      currentClient,
      currentInstance,
    } = body;

    const createLevel = async () => {
      await prisma.level.create({
        data: {
          name: level_name,
          code: level_code,
          inUse: inUse,
          clientId: currentClient,
          instanceId: currentInstance,
          currencyId: currency_select,
          parentId: parentLevel_select,
          description: level_desc,
          updatedAt: new Date(),
          createdAt: new Date(),
        }
      });
    }

    // Update new parent to reflect that it has a child and is in use
    const updateNewParent = async () => {
      await prisma.level.update({
        where: {
          id: parentLevel_select
        },
        data: {
          inUse: true
        }
      });
    }

    try {
      createLevel();
      updateNewParent();
    } catch (err) {
      throw Error("unable to create level and udpate parent")
    }

    return NextResponse.json("new level created successfully")
  } catch (err) {
    return NextResponse.json({ message: "POST error", err}, {status: 500})
  }
}
Avatar
tafutada777
i guess it does not matter. can u accees it with MongoDB Compass?
and try another way like findFirst(). something wrong with Prisma cache.
Avatar
BombayOP
Why do you think it is something with prisma cache? Just curious.
I think it has something to do with vercel deployment. I just dont know what. I'm new to vercel
Avatar
tafutada777
i mean combination of Vercel and Prisma cache
Avatar
BombayOP
The api endpoint is working bc I get back my custom message, but I dont know why it cant retrieve the record from the db.
Image
Image
Avatar
tafutada777
if i were u, i tried other function like findFirst, findMany to see how it works.
its up to u
Avatar
BombayOP
K, I will try that and report back. Thanks for your help!