Next.js Discord

Discord Forum

Next.js, Prisma DB, Axios API 404 Error :(

Answered
Californian posted this in #help-forum
Open in Discord
CalifornianOP
Hello,

I am working on an e-commerce project using Next.js and Prisma DB. I have implemented the functionality to create a store. I have successfully connected Prisma DB, and the code seems to be correct. However, when I tried to create a store using the Axios API, it resulted in a 404 Error. Please take a look at the screenshot. I need some assistance with this.

Kind regards,
Answered by idan
maybe remove the '
View full answer

66 Replies

CalifornianOP
@Californian Click to see attachment
This is because /app/api/stores doesn’t exist
Likely you meant /api/store instead
But you are fetching /app/api/store
Southern rough shrimp
Fetch(“/api/stores”)
@Southern rough shrimp Fetch(“/api/stores”)
CalifornianOP
i did it
and my file name is was wrong
i changed it store-mdoal.tsx to store-modal.tsx
and new error 🙂
routes.tsx
import { NextResponse } from "next/server";
import { auth } from "@clerk/nextjs";
import prismadb from "@/lib/prismadb";
export async function POST(
    req: Request,
    ) {
        try {
            const { userId } = auth();
            const body = await req.json();

            const { name } = body;


            if (!userId) {
                return new NextResponse("Unauthorized", { status: 401 });
            }

            if (!name) {
                return new NextResponse("Name is required", { status: 400 });
            }

            const store = await prismadb.store.create({
                data: {
                    name,
                    userId
                }
            });

            return NextResponse.json(store);

        }
        catch(error) {
            console.log('[STORES_POST', error);
            return new NextResponse("Internal error", { status: 500 });
        }
    };
store-modal.tsx
const onSubmit = async (values: z.infer<typeof formSchema>) => {
        try {
            setLoading(true);

            const response = await axios.post('/api/stores/', values);
            console.log(values);

            console.log(response.data);
        } catch (error) {
            console.log(error);
        } finally {
            setLoading(false);
        }
    }
There, that is your error, now fix it
You didn’t set up the db connection correctly
@Californian Click to see attachment
Southern rough shrimp
Answer is inside error
@joulev You didn’t set up the db connection correctly
CalifornianOP
// This is your Prisma schema file,
// learn more about it in the docs: https://pris.ly/d/prisma-schema

generator client {
  provider = "prisma-client-js"
}

datasource db {
  provider = "mysql"
  url = env("DATABASE_URL")
  relationMode = "prisma"
}

model Store {
id        String    @id @default(uuid())
name      String
userId    String
createdAt DateTime @default(now())
updatedAt DateTime @updatedAt
}
i think my DATABASE_URL is true
console.log(process.env.DATABASE_URL) from an api route, what do you get?
@Californian undefined
There, so database url is not set correctly
@Californian Click to see attachment
File name and file location?
CalifornianOP
console.log(process.env.DATABASE_URL)
i run this command on app/api/stores/test.ts
@Californian Click to see attachment
So this is inside the .env file?
Weird…
CalifornianOP
hmm
Not sure what’s wrong with it - the issue is as you see, DATABASE_URL is undefined, but I don’t know why
If it’s declared in .env it should work
Sorry can’t help
You can simply use the connection string directly in the schema instead of relying on the environment variable. It's not a long-term solution, but it will work for now.
And with that, exposing the secret string to anyone having access to the git repository
No I wouldn’t do that
@joulev Not sure what’s wrong with it - the issue is as you see, DATABASE_URL is undefined, but I don’t know why
CalifornianOP
.env
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=x
CLERK_SECRET_KEY=x
NEXT_PUBLIC_CLERK_SIGN_IN_URL=/sign-in
NEXT_PUBLIC_CLERK_SIGN_UP_URL=/sign-up
NEXT_PUBLIC_CLERK_AFTER_SIGN_IN_URL=/
NEXT_PUBLIC_CLERK_AFTER_SIGN_UP_URL=/

# This was inserted by `prisma init`:
# Environment variables declared in this file are automatically made available to Prisma.
# See the documentation for more detail: https://pris.ly/d/prisma-schema#accessing-environment-variables-from-the-schema

# Prisma supports the native connection string format for PostgreSQL, MySQL, SQLite, SQL Server, MongoDB and CockroachDB.
# See the documentation for all the connection string options: https://pris.ly/d/connection-strings

DATABASE_URL='mysql://x:x@aws.connect.psdb.cloud/ecommerce-admin?sslaccept=strict'
the other env variables work when you console log them?
@idan the other env variables work when you console log them?
CalifornianOP
yes working
im using clerk app for auth
and clerk is working
is the CLERK_SECRET_KEY works too?
CalifornianOP
yes it works
very weird
maybe remove the '
Answer
@idan maybe remove the '
Yes this
If it doesn’t work I’m out of ideas
i think it should work now
@idan i think it should work now
CalifornianOP
im trying
@idan i think it should work now
CalifornianOP
finally its worked
thanks guys
i'm glad
sure
CalifornianOP
🙂
CalifornianOP
@joulev hi im back
it was worked but
now not working
again error code 500
I didn't make any changes to the code. I just closed the project and reopened the project after eating. It was working before closing the project but now it's getting Error 500
CalifornianOP
:all_the_things:
@Californian Click to see attachment
Well it cannot reach the database, try a different network