Recently, I have started delving into the world of typescript and next.js. My current project involves deploying a Next.js web application on Vercel, which will be fetching data from a Heroku PostgreSQL database using Prisma. My goal is to display this data on the page using observable/d3. I am utilizing getStaticProps to retrieve the data and then passing 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()
)
}, [])
...
}
When I check the data format in the first console log inside getStaticProps, it appears as I want it to be - an array of objects:
[
{letter: 'A', frequency: 0.0123}
...
{letter: 'Z', frequency: 0.00234}
]
However, after passing the data to the Home component, the data seems to be nested within an object structure like this:
{
data: [
{letter: 'A', frequency: 0.0123}
...
{letter: 'Z', frequency: 0.00234}
]
}
My plotting function requires an array of objects, and this wrapping of data inside curly braces is causing an issue. I am puzzled by this behavior and would appreciate some guidance on why this is happening and how to resolve it. Interestingly, when I check the typeof data in both console.log statements, it shows object.