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
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

tafutada777
because id you passed is different
@tafutada777 because id you passed is different
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!
tafutada777
if you want to get answers, you show a simple example. keep in mind nobody know your impl
BombayOP
I just fixed that.. it still does not work. both of those ids are valid records in my mongodb
@tafutada777 if you want to get answers, you show a simple example. keep in mind nobody know your impl
BombayOP
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.
tafutada777
is that a dynamic page?
@tafutada777 is that a dynamic page?
BombayOP
yes, inside my app dir, i have 
app/api/modeling/level/[id]/route.ts
Here is what it looks like on localhost
tafutada777
add console.log after 9 to print params.id
BombayOP
and this is on vercel
tafutada777
and hard-code an ID that exists in DB. see the diff
BombayOP
on local I get this when hard coding an id
tafutada777
a u really sure it connects to the same DB?
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.
tafutada777
go to a Vercel Dashboard, check ENV of MongoDB endpoint
BombayOP
I have set my prisma datasource to use the same env variable for the MongoDB connection url on local and vercel
the Vercel MongoDB integration created those other 2 env variables, but i dont know if I need to do something with those.
tafutada777
at line 9 before findUnique(), add insert statement. then findUnique(the inserted doc) to see how it works.
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
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})
  }
}
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.
@tafutada777 and try another way like findFirst(). something wrong with Prisma cache.
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
tafutada777
i mean combination of Vercel and Prisma cache
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.
tafutada777
if i were u, i tried other function like findFirst, findMany to see how it works.
its up to u
@tafutada777 if i were u, i tried other function like findFirst, findMany to see how it works.
BombayOP
K, I will try that and report back. Thanks for your help!