I am trying to display data from hygrpaph api , but i am getting TypeError: Images.map is not a function
Here’s my code
import { gql } from '@apollo/client'
import Head from 'next/head'
import Image from 'next/image'
import client from '../appoloClient'
export default function Home({Images}) {
console.log(Images)
return (
<div>
<Head>
<title>flow</title>
<meta name="description" content="Generated by create next app" />
<link rel="icon" href="/favicon.ico" />
</Head>
<ul>
{Images.map(({ id, name }) => (
<li key={id}>{name}</li>
))}
</ul>
</div>
)
}
export async function getStaticProps() {
const {data } = await client.query({
query: gql`
{
images {
id
name
}
}
`
})
const Images = data;
return{
props:{
Images
}
}
}
I am getting the data back from the console
{
images: [
{
__typename: 'Image',
id: 'cl9cu8dbb2wpn0an0j6349kcg',
name: 'test-image2'
},
{
__typename: 'Image',
id: 'cl9cuai0g2xmw0an0c4dd9vjb',
name: 'tes2'
}
]
}
but i get this error when i try to map the data
error when trying to map
What could i be doing wrong?