React Next.js: getServerProps is not returning array from prisma

user_19293506 0
Viewed 135

Background

After learning getServerProps, I tried building a project that returns some data from postgres using prisma, but for some reason, when I try to map the posts array ( See below ), it returns the array as undefined. Enevn I believe I followed syntax rules on the Doc page, no luck so far. I have been stuck for long time and I don't know why and what i did wrong. At least VS code recognize posts as array, but getServerProps function seems it never gets run.Thanks for reading, lemme know your thoughts on this.

Summary of my problem

  • I don't know why the array (posts variable) is undefined when it is recognized inside of the function.
  • I don't know why getServerProps seems to be not called

Note:

Prisma and postgres are working in this project

Posts.js

import { PrismaClient } from '@prisma/client'
function Posts({ posts }) {

return (
  <div>
    <h1 className="text-4xl block text-gray-500 font-bold pt-5 text-center">
      Posts
    </h1>
    <div>
      {posts.map((post) => {
        <h3>{post.title}</h3>;
      })}
    </div>
  </div>
);
}

export const getServerSideProps = async () => {
    const prisma = new PrismaClient()
    const posts = await prisma.post.findMany()

    
    return { props: { posts } }
  }

export default Posts

schema.prisma

// 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 = "postgresql"
  url      = env("DATABASE_URL")
}

model Post {
  id         Int        @id @default(autoincrement())
  title     String
  content   String
}

Error I get:

Error message

Error Message

Prisma Studio

Prisma studio

File structure

FileStructure

After studying the best answer on StackOverflow

enter image description here

prisma next.js reactjs javascript
1 Answers

You cannot use getServerSideProps outside of pages directory. Change your code so that the prisma call is inside your page, and the posts are passed to Posts component using props. For example if you are displaying the posts in pages/index.js:

export const getServerSideProps = async () => {
  const prisma = new PrismaClient()
  const posts = await prisma.post.findMany()
    
  return { props: { posts } }
}

function Home({ posts }) {
  return (
    <Posts posts={posts}/>
  );
}

export default Home

Side note: You should not create a PrismaClient every time getServerSideProps is called. Create a prisma.js file, initialize it there and reuse when you need it:

import { PrismaClient } from '@prisma/client'

let prisma

if (process.env.NODE_ENV === 'production') {
  prisma = new PrismaClient()
} else {
  // Ensure the prisma instance is re-used during hot-reloading
  // Otherwise, a new client will be created on every reload
  globalThis.prisma = globalThis.prisma || new PrismaClient()
  prisma = globalThis.prisma
}

export default prisma
user_13543780
Related