how to use my prisma functions in client
Unanswered
West African Lion posted this in #help-forum
West African LionOP
ı created a function in a seperate file to add my prisma data can ı use it in the file marked "use client"?
18 Replies
Northern Wheatear
You can't use it in client components
Prisma will work only in server components
To use it in client components you need to create a route handler and then inside it fetch data using prisma and send it to the client by regular fetch calls
@West African Lion ı created a function in a seperate file to add my prisma data can ı use it in the file marked "use client"?
you can use server action in client component. eg, addCar, deleteCar, updateCar. make sure to put
'use server' on top of the file they defined@Ray you can use server action in client component. eg, addCar, deleteCar, updateCar. make sure to put `'use server'` on top of the file they defined
West African LionOP
Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
@West African Lion Server Functions cannot be called during initial render. This would create a fetch waterfall. Try to use a Server Component to pass data to Client Components instead.
server action can only be used with form/useEffect/event handler
you should call
getAllCars from server component and pass the data down to the client component@Ray server action can only be used with form/useEffect/event handler
West African LionOP
Can you give me an example how can I use it?
@West African Lion Can you give me an example how can I use it?
export default async function Page() {
const cars = await getAllCars()
return <Cars cars={cars} />
}
// functions.ts
'use server'
export async function addCar(formData: FormData) {}
export async function deleteCar(id: string) {}
export async function updateCar() {}
// cars.ts
'use client'
export default function Cars({cars}) {
return (
<div>
....
<form action={addCar}>
<input name='name' />
....
<button>Add car</button>
</form>
<button onClick={() => deleteCar.bind(null, car.id)()}>delete car</button>
</div>
)
}like this
West African LionOP
I gave it as a prop for the get all cars function, so how do I run these functions?
West African LionOP
I think I did it right but it doesn't work
@West African Lion I think I did it right but it doesn't work
no, you shouldn't pass
setMessage to the actionWest African LionOP
"use server";
import { db } from "./prisma";
// araç işlemleri
export async function getAllCars() {
try {
const carsData = await db.Cars.findMany();
return carsData;
} catch (error) {
throw new Error("Araçlar getirilirken bir hata oluştu");
}
}
export async function addCar(formData) {
try {
const { id, created_at, updated_at, ...remainingData } = formData;
await db.Cars.create({
data: {
remainingData,
},
});
// setMessage("Araç eklendi");
} catch (error) {
// setMessage("Araç eklenirken bir hata oluştu: " + error.message);
}
}formData is not an object
West African LionOP
okay thanks