Next.js, Prisma DB, Axios API 404 Error :(
Answered
Californian posted this in #help-forum
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,
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,
66 Replies
CalifornianOP
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â€)
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
Southern rough shrimp
Answer is inside error
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?
CalifornianOP
let me try
undefined
There, so database url is not set correctly
File name and file location?
CalifornianOP
console.log(process.env.DATABASE_URL)
i run this command on app/api/stores/test.ts
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
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?
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
i think it should work now
CalifornianOP
im trying
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
Well it cannot reach the database, try a different network
CalifornianOP
okay