Unpacking in TypeScript and Next.js

Question

Unpacking in TypeScript and Next.js

I'm working with data from a PostgreSQL database:

https://i.sstatic.net/3nLrs.png

My goal is to retrieve the id, name, and content in a NextJS component as shown below:

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>
}

However, when I try to access these values, they are coming up as undefined. What could be causing this issue?

typescript next.js prisma

Answer 1

Answer №1

One issue that needs attention is the props structure in the Home component.

{
  id: number
  name: string
  content: string
}

The correct props structure should be as follows:

{
 userNote: {
  id: number
  name: string
  content: string
 }
}

To address this, you have two options:

const Home = ({ userNote: { name, content, id } }: { userNote: INote }) => {

Alternatively, you can adjust your getServerSideProps function:

export async function getServerSideProps() {
  const data = await prisma.note.findFirst()
  return {
    props: data,
  }
}

In my experience, I recommend modifying it as follows:

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

Answer 2

One issue that needs attention is the props structure in the Home component.

{
  id: number
  name: string
  content: string
}

The correct props structure should be as follows:

{
 userNote: {
  id: number
  name: string
  content: string
 }
}

To address this, you have two options:

const Home = ({ userNote: { name, content, id } }: { userNote: INote }) => {

Alternatively, you can adjust your getServerSideProps function:

export async function getServerSideProps() {
  const data = await prisma.note.findFirst()
  return {
    props: data,
  }
}

In my experience, I recommend modifying it as follows:

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

Unpacking in TypeScript and Next.js

Answer №1

Similar questions

Utilize string values as identifiers in type declarations

Jest is experiencing issues with a mocked npm module that is unexpectedly returning empty objects

What is the best way to conduct a component test within the _app file in NextJS?

Having trouble debugging the current TypeScript file in VS Code because the corresponding JavaScript file is missing

How can I use a string variable in Angular 2 to create a dynamic template URL

What could be causing React to generate an error when attempting to utilize my custom hook to retrieve data from Firebase using context?

Mutations are not set up in the schema

Function is not triggered in React component

What is the best method for using template literals in a return statement?

The TypeScript in the React-Native app is lacking certain properties compared to the expected type

The ultimate guide to leveraging the power of Vitejs React TS template

ES6 Setters | warning TS2300: Identical identifier detected

Learn how to utilize ng2-file-upload in Angular for uploading .ply files effortlessly!

Indulging in the fulfillment of my commitment within my Angular element

What makes React Native unique when it comes to handling multiple data inputs?

What guidelines should be followed when naming folders and files in next.js apps according to eslint settings?

Stop unnecessary updating of state in a global context within a Functional Component to avoid re-rendering

Evaluating the functionality of a pipeline that relies on various services

Executing Angular E2E tests using the Protractor-Cucumber-Framework results in an abundance of peculiar cache files being generated

Error: Axios header not refreshing automatically in React. User must manually refresh the page