CODEWITHSUNDEEP
javascriptreactjsnext.jsprisma
kawa
kawa

Reputation: 611

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

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

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

Upvotes: 2

Views: 1070

Answers (1)

Idrizi.A
Idrizi.A

Reputation: 12010

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

Upvotes: 2

Related Questions