Next.js Discord

Discord Forum

Prisma error map...

Answered
Cuckoo wasp posted this in #help-forum
Open in Discord
Cuckoo waspOP
Hi, I'm beginning with NextJS and Prisma and I'm sure is a
little mistake.

I can't do a map on my "products" to display on my page...

This is my schema.prisma :
model Product { id Int @id @default(autoincrement()) title String describe String price Int createAt DateTime @default(now()) }

This is my page.tsx :

type Props = {}; type Product = { id: number; title: string; describe: string; price: number; createAt: Date; }; export default async function page({}: Props) { const products: Object = await getProducts(); return ( <div className="container"> <div className="flex flex-col gap-3 mt-3.5"> <table className="table -z-50"> {/* head */} <thead> <tr> <th>Identifiant</th> <th>Produit</th> <th>Prix</th> <th>Date de Création</th> </tr> </thead> <tbody> {products.map((product: Product) => ( <tr className="bg-base-200 hover:bg-yellow-400"> <th>{product.id}</th> <td>{product.title}</td> <td>{product.price}</td> <td>Beug</td> </tr> ))} </tbody> </table> </div> </div> ); }

And this is the function getProducts() :
"use server"; export async function getProducts() { const products = await prisma.product.findMany({ orderBy: { createAt: "asc", }, }); return products; }

Pls help me to become a better developper !
Answered by Ray
1. remove 'use server' which is for server action and you don't need that when you are fetching in server component.
2. you cast the type Object to products. you shouldn't need to that since prisma will generate the type for you.
3. the component name should be capitalize
export default async function Page({}: Props) {
    const products = await getProducts();

    return (
        <div className="container">

            <div className="flex flex-col gap-3 mt-3.5">
                <table className="table -z-50">
                    {/* head */}
                    <thead>
                        <tr>
                            <th>Identifiant</th>
                            <th>Produit</th>
                            <th>Prix</th>
                            <th>Date de Création</th>
                        </tr>
                    </thead>
                    <tbody>
                        {products.map((product: Product) => (
                            <tr className="bg-base-200 hover:bg-yellow-400">
                                <th>{product.id}</th>
                                <td>{product.title}</td>
                                <td>{product.price}</td>
                                <td>Beug</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}


export async function getProducts() {
    const products = await prisma.product.findMany({
        orderBy: {
            createAt: "asc",
        },
    });

    return products;
}
View full answer

4 Replies

@Cuckoo wasp Hi, I'm beginning with NextJS and Prisma and I'm sure is a little mistake. I can't do a map on my "products" to display on my page... This is my schema.prisma : `model Product { id Int @id @default(autoincrement()) title String describe String price Int createAt DateTime @default(now()) }` This is my page.tsx : ` type Props = {}; type Product = { id: number; title: string; describe: string; price: number; createAt: Date; }; export default async function page({}: Props) { const products: Object = await getProducts(); return ( <div className="container"> <div className="flex flex-col gap-3 mt-3.5"> <table className="table -z-50"> {/* head */} <thead> <tr> <th>Identifiant</th> <th>Produit</th> <th>Prix</th> <th>Date de Création</th> </tr> </thead> <tbody> {products.map((product: Product) => ( <tr className="bg-base-200 hover:bg-yellow-400"> <th>{product.id}</th> <td>{product.title}</td> <td>{product.price}</td> <td>Beug</td> </tr> ))} </tbody> </table> </div> </div> ); }` And this is the function getProducts() : `"use server"; export async function getProducts() { const products = await prisma.product.findMany({ orderBy: { createAt: "asc", }, }); return products; }` Pls help me to become a better developper !
Ray
1. remove 'use server' which is for server action and you don't need that when you are fetching in server component.
2. you cast the type Object to products. you shouldn't need to that since prisma will generate the type for you.
3. the component name should be capitalize
export default async function Page({}: Props) {
    const products = await getProducts();

    return (
        <div className="container">

            <div className="flex flex-col gap-3 mt-3.5">
                <table className="table -z-50">
                    {/* head */}
                    <thead>
                        <tr>
                            <th>Identifiant</th>
                            <th>Produit</th>
                            <th>Prix</th>
                            <th>Date de Création</th>
                        </tr>
                    </thead>
                    <tbody>
                        {products.map((product: Product) => (
                            <tr className="bg-base-200 hover:bg-yellow-400">
                                <th>{product.id}</th>
                                <td>{product.title}</td>
                                <td>{product.price}</td>
                                <td>Beug</td>
                            </tr>
                        ))}
                    </tbody>
                </table>
            </div>
        </div>
    );
}


export async function getProducts() {
    const products = await prisma.product.findMany({
        orderBy: {
            createAt: "asc",
        },
    });

    return products;
}
Answer
Cuckoo waspOP
Thank you 🙂
One other question in fact this function getProduct is in one other file for better lisibility ; it's a good method ? And so I must to use "user server" on this file, no ? @Ray
Cuckoo waspOP
OK thanks 🙂