I am new to working with typescript and next.js. I am using Vercel to deploy a Next.js webapp that will pull data from a heroku postgresSQL db using Prisma. I am trying to render some data on the page using observable/d3, using getStaticProps to fetch the data, then pass it to the Home page component.
export const getStaticProps: GetStaticProps = async () => {
let data: Array<object> = await prisma.test.findMany()
console.log(data)
return { props: { data } }
}
const Home: NextPage = ( data ) => {
console.log(data)
useEffect(() => {
document.body.append(
Plot.barY(data, {x: "letter", y: "frequency"}).plot()
)
}, [])
...
}
The first console log in getStaticProps returns the data in my desired format, an array of objects:
[
{letter: 'A', frequency: 0.0123}
...
{letter: 'Z', frequency: 0.00234}
]
After passing the data to the Home component, data is wrapped in an object and looks like this:
{
data: [
{letter: 'A', frequency: 0.0123}
...
{letter: 'Z', frequency: 0.00234}
]
}
My plotting function wants an array of objects, but after passing data using getStaticProps to the Home component, data gets 'wrapped' in those JS Curley braces and I don't want that. Can someone help me understand why and how to correct this behavior? Using typeof data in both console.log returns object
You should have been destructured the props Home({ data }) instead of Home(data)
import { InferGetStaticPropsType } from 'next'
type Test = {
letter: string
frequency: number
}
export const getStaticProps = async () => {
let data: Test[] = await prisma.test.findMany()
return {
props: {
data
}
}
}
// Destructure the props
const Home: NextPage = ({ data }: InferGetStaticPropsType<typeof getStaticProps>) => {
// will resolve tests to type Test[]
}