Getting posts undefined in headless wp with graphQl Next.js

The graphQL query is working https://trialtest1.local/graphql?query={%20posts%20{%20nodes%20{%20slug%20title%20}%20}}

But when I ask for posts in next.js it shows undefined. Can anyone see what Im doing wrong?

import Link from 'next/link'

export default function Home( {posts}){
console.log({posts})
  return(
    <div>
      <h1>Hello From The Home Page!</h1>
      {
        posts?.nodes?.map(post => {
          return(
            <ul key={post.slug}>
              <li>
                <Link href={`/posts/${post.slug}`}>{post.title}</Link>
              </li>
            </ul>
          )
        })
      }
    </div>
  )

}

export async function getInitialProps(){

  const res = await fetch('https://trialtest1.local/graphql', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
          query: `
          query HomePageQuery {
            posts {
              nodes {
                slug
                title
              }
            }
          }
          `,
      })
  })

  const json = await res.json()

  return {
    props: {
        posts: json.data.posts,
    },
  }

}