Fetched data from GraphCMS using GraphQL in a NextJS project keeps retuning undefined values

I'm trying to use NextJS and GraphQL to fetch some data from GraphCMS to a page located at pages/writing.js. The problem is, doesn't matter what I do I get errors like TypeError: Cannot read properties of undefined (reading 'title').

I've been trying to fix this nonstop for the past few hours. All guides — both written and video — do things a lot different so I'm feeling kinda lost and without a clear north. I always manage to get to the end of such guides but the error is always there.

When I go to my content API link provided by GraphCMS it works just fine as you can see in the following screenshot.

This is what my package.json dependencies look like just in case it's relevant:

"dependencies": {
    "framer-motion": "^7.3.6",
    "graphql": "^16.6.0",
    "graphql-request": "^5.0.0",
    "html-react-parser": "^3.0.4",
    "moment": "^2.29.4",
    "next": "^12.3.1",
    "react": "^18.2.0",
    "react-dom": "^18.2.0"
  },

And finally this is what the writing.js component looks like:

import Head from "next/head";
import Header from "../components/home/Header";

import { GraphQLClient, gql } from "graphql-request";

const Writing = ({ posts }) => {
  return (
    <>
      <p>{posts.title}</p>
    </>
  );
};

export default Writing;

const url =
  "[my content api]";

const client = new GraphQLClient(url, {
  headers: {
    Authorization: `Bearer [my permanent auth token]`,
  },
});

const query = gql`
  query MyQuery {
    postsConnection {
      edges {
        node {
          date
          id
          slug
          title
        }
      }
    }
  }
`;

export function GraphQLRequest() {
  const getPosts = async () => {
    const variables = { title };
    const response = await client.request(query, variables);
    console.log("RESPONSE FROM GRAPHQL-REQUEST API CALL", response);
  };

  return {
    props: { title },
  };
}

I would appreciate some guidance on how to fix this. Thanks in advance.

Managed to fix get it working by using Apollo and GraphQL. This is the final code. Hopefully this will help someone in the future. I recommend the GraphCMS and GraphQL video from James Q Quick as well.

import client from "../apolloClient";
import { gql } from "@apollo/client";

export default function Writing(posts) {
  return (
    <>

    </>
  );
}

export async function getStaticProps() {
  const { data :posts } = await client.query({
    query: gql `
      query Posts {
        posts {
          id
          slug
          title
        }
        postsConnection {
          edges {
            node {
              content {
                raw
              }
              coverImage {
                url
              }
              date
            }
          }
        }
      }
    `,
  });
  console.log(posts);

  return{
    props: {
      posts
    }
  }
}