I have object from postgresql:
Need to get id, name and content on NextJS component like that:
export async function getServerSideProps() {
const data = await prisma.note.findFirst()
return {
props: {
userNote: data,
},
}
}
interface INote {
id: number
name: string
content: string
}
const Home = ({ name, content, id }: INote) => {
console.log(name)
return <div>hello world</div>
}
but i got undefined. What's wrong?
The problem is that your props in the Home component are not
{
id: number
name: string
content: string
}
but actually,
{
userNote: {
id: number
name: string
content: string
}
}
You'll either need to change your destructuring and the type:
const Home = ({ userNote: { name, content, id } }: { userNote: INote }) => {
or you could change your getServerSideProps:
export async function getServerSideProps() {
const data = await prisma.note.findFirst()
return {
props: data,
}
}
In my experience it's more idiomatic to go with the first approach and change it to:
export async function getServerSideProps() {
const data = { id: 1, name: 'test', content: 'content' }
return {
props: {
userNote: data,
},
}
}
interface INote {
id: number
name: string
content: string
}
interface HomeProps {
userNote: INote
}
const Home = ({ userNote: { name, content, id } }: HomeProps) => {
console.log(name)
return <div>hello world</div>
}
export default Home
Homecomponent?