[Beginner] fetching data via prisma in a component

[digital lily]

Hi, Im trying to fetch some data (an object called "event" ) from prisma from a server and use it in a component:
this is what my code looks like,

events.actions.ts

export async function getEventDetails(id: string) {
   const event = await prisma.event.findUnique({ where: { id: id } });
   return event;
}

[wintry ledge]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[digital lily]

component file (tsx):

"use client";

import eventData from "@/data/eventData";
import { useParams } from "next/navigation";
import { use, useEffect, useState } from "react";
import { getEventDetails } from "@/events.actions";
import Image from "next/image";

export default function EventPhoto() {
    const params = useParams();
    let { id } = params;

    // const event = eventData.find((event) => event.id.toString() === id);
    const [event, setEvent] = useState(null);
    useEffect(() => {
        async function fetchEvent() {
            const event = await getEventDetails(id);
            setEvent(event);
        }
        fetchEvent();
    }

    if (!event) {
        return <div>Event not found</div>;
    }

    const { eventPhotos } = event;

    return (
        <div className="p-5">
            <h1 className="text-center text-4xl md:text-5xl font-bold mb-8">
                {event.title}
            </h1>
            <div className="grid grid-cols-1 lg:px-16 md:grid-cols-3 gap-4">
                {eventPhotos && eventPhotos.length > 0 ? (
                    eventPhotos.map((photo, index) => (
                        <div key={index} className="relative w-full h-64">
                            <Image
                                src={photo}
                                alt={`Event Photo ${index + 1}`}
                                layout="fill"
                                objectFit="cover"
                                className="rounded"
                            />
                        </div>
                    ))
                ) : (
                    <p>No photos available for this event.</p>
                )}
            </div>
        </div>
    );
}

the

    // const event = eventData.find((event) => event.id.toString() === id);
``` is temporary, hardcoded data, i am trying to replace it with the `getEventDetails` function, but there is something wrong with the typescript