nextjs donst show feched data | Next.js | Page 1

little belfry Dec 11, 2023, 7:14 AM

#

i need some help
so i setup prisma im trayng to fetch data

import { PrismaClient } from "@prisma/client";

const prisma = new PrismaClient();

export async function getServerSideProps() {
const transactions = await prisma.transaction.findMany();
return {
props: {
transactions,
},
};
}

{transactions &&
transactions.map((transaction) => (
<tr
key={transaction.id}
className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
>
<td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{transaction.type}
</td>
<td className="px-6 py-4">{transaction.amount}</td>
<td className="px-6 py-4">{transaction.description}</td>
<td className="px-6 py-4 text-right">
<button className="text-blue-500">Edit</button>
</td>
</tr>
))}
there is no data maped though and i dont know why

tribal blazeBOT Dec 11, 2023, 7:14 AM

#

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)

weary cosmos Dec 11, 2023, 7:51 AM

#

little belfry i need some help so i setup prisma im trayng to fetch data import { PrismaClien...

are you using page router or app router?
is it the full code of the page?

little belfry Dec 11, 2023, 7:51 AM

#

app router

little belfry Dec 11, 2023, 7:51 AM

#

weary cosmos are you using page router or app router? is it the full code of the page?

i re wrote it

weary cosmos Dec 11, 2023, 7:51 AM

#

const transactions = await prisma.transaction.findMany();

#

remove the return there

little belfry Dec 11, 2023, 7:52 AM

#

import React from "react";
import prisma from "../../prisma/client";

export async function getData() {
  const data = await prisma.transaction.findMany({
    select: {
      id: true,
      amount: true,
      description: true,
      type: true,
    },
  });
  return data;
}

// Inside your component
export default function Tables({ transactions }) {
  return (
    <div className="relative overflow-x-auto shadow-md sm:rounded-lg top-20">
      <button
        type="button"
        className="focus:outline-none text-white bg-green-700 hover:bg-green-800 focus:ring-4 focus:ring-green-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-green-600 dark:hover:bg-green-700 dark:focus:ring-green-800"
      >
        +
      </button>
      <table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
        <thead className="text-xs w-full text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
          <tr>
            <th scope="col" className="px-6 py-3">
              Transaction
            </th>
            <th scope="col" className="px-6 py-3">
              <div className="flex items-center">Amount</div>
            </th>
            <th scope="col" className="px-6 py-3">
              <div className="flex items-center">Description</div>
            </th>

#

            <th scope="col" className="px-6 py-3">
              Actions
            </th>
          </tr>
        </thead>
        <tbody>
          {transactions &&
            transactions.map((transaction) => (
              <tr
                key={transaction.id}
                className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
              >
                <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                  {transaction.type}
                </td>
                <td className="px-6 py-4">{transaction.amount}</td>
                <td className="px-6 py-4">{transaction.description}</td>
                <td className="px-6 py-4 text-right">
                  <button type="submit" className="text-blue-500">
                    Edit
                  </button>
                </td>
              </tr>
            ))}
        </tbody>
      </table>
    </div>
  );
}
export async function getServerSideProps() {
  const transactions = await getData();
  return {
    props: {
      transactions,
    },
  };
}```

weary cosmos Dec 11, 2023, 7:52 AM

#

there is no getServerSideProps in app router

little belfry Dec 11, 2023, 7:53 AM

#

this is a component

#

this is app router

#

import React from "react";

import Cards from "../components/ui/cards";
import Tables from "../components/ui/table";

const Page = () => (
  <div className="mx-auto max-w-screen-2xl p-4 md:p-6 2xl:p-10  ">
    <div className="mb-8 flex flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
      <div>
        <h2 className="text-title-sm2 font-bold text-black dark:text-white">
          This Week’s Overview
        </h2>
      </div>

      <div className="flex items-center">
        <p className="font-medium uppercase text-black dark:text-white">
          Short by:
        </p>
        <div className="relative z-20 inline-block">
          <select
            name="#"
            id="#"
            className="relative z-20 inline-flex appearance-none bg-transparent py-1 pl-3 pr-8 font-medium outline-none"
          >
            <option value="">Current Week</option>
            <option value="">Last Week</option>
          </select>
          <span className="absolute top-1/2 right-1 z-10 -translate-y-1/2">
            <svg
              width="18"
              height="18"
              viewBox="0 0 18 18"
              fill="none"
              xmlns="http://www.w3.org/2000/svg"
            >
              <path
                d="M8.99995 12.8249C8.8312 12.8249 8.69058 12.7687 8.54995 12.6562L2.0812 6.2999C1.82808 6.04678 1.82808 5.65303 2.0812 5.3999C2.33433 5.14678 2.72808 5.14678 2.9812 5.3999L8.99995 11.278L15.0187 5.34365C15.2718 5.09053 15.6656 5.09053 15.9187 5.34365C16.1718 5.59678 16.1718 5.99053 15.9187 6.24365L9.44995 12.5999C9.30933 12.7405 9.1687 12.8249 8.99995 12.8249Z"
                fill="#64748B"
              />
            </svg>
          </span>
        </div>
      </div>
    </div>
    <Cards />
    <Tables />
  </div>
);

export default Page;

weary cosmos Dec 11, 2023, 7:53 AM

#

Ok

little belfry Dec 11, 2023, 7:54 AM

#

thanks for helping btw

weary cosmos Dec 11, 2023, 7:54 AM

#

change your table component to this

export default async function Tables() {
  const transactions = await prisma.transaction.findMany({
    select: {
      id: true,
      amount: true,
      description: true,
      type: true,
    },
  });

  return (
    <div className="relative overflow-x-auto shadow-md sm:rounded-lg top-20">
      ...
        <tbody>
          {transactions &&
            transactions.map((transaction) => (
              <tr
                key={transaction.id}
                className="bg-white border-b dark:bg-gray-800 dark:border-gray-700"
              >
                <td className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
                  {transaction.type}
                </td>
                <td className="px-6 py-4">{transaction.amount}</td>
                <td className="px-6 py-4">{transaction.description}</td>
                <td className="px-6 py-4 text-right">
                  <button type="submit" className="text-blue-500">
                    Edit
                  </button>
                </td>
              </tr>
            ))}
        </tbody>
   ...
    </div>
  );
}

#

with server component, we can make it async function and fetch the data directly

#

there is no getServerSideProps in app router and getServerSideProps only work in page component in page router also

little belfry Dec 11, 2023, 7:56 AM

#

that worked

weary cosmos Dec 11, 2023, 7:56 AM

#

cool please mark solution

little belfry Dec 11, 2023, 7:57 AM

#

do you have a video that explains this in more detials?

weary cosmos Dec 11, 2023, 7:57 AM

#

yea wait

little belfry Dec 11, 2023, 7:57 AM

#

thank you.

weary cosmos Dec 11, 2023, 7:58 AM

#

https://www.youtube.com/watch?v=h2BcitZPMn4&t=2115s

YouTube

Lee Robinson

Introduction to Next.js and React

A hands-on introduction to the main Next.js and React concepts by building and deploying a real application.

0:00 – Introduction
0:29 – Requirements
2:24 – Package Managers
4:45 – Running Locally
6:33 – Fast Refresh
6:57 – Routers
7:57 – React
8:44 – JSX
10:14 – Components
11:15 – Props
12:25 – Composing
14:08 – Imports and Exports
15:36 – Exte...

▶ Play video

#nextjs donst show feched data