因此，我试图在一个新的Next JS应用程序中从Hygraph中提取一些数据，我收到错误：无法读取未定义的属性（阅读“map”）。
我是这两种技术的新手，找不到解决方案，作为参考，我创建了一个新的Next JS应用程序，并导入了graphql和graphql-request，以下代码位于app文件夹内的page.js文件中。

import styles from './page.module.css'
import { GraphQLClient, gql } from 'graphql-request'

const graphcms = new GraphQLClient(
  "https://api-eu-west-2.hygraph.com/v2/xxxxxxxxxxxxxx/master"
);

const QUERY = gql`
{
  articles {
    createdAt
    id
    publishedAt
    released
    slug
    title
    updatedAt
    coverPhoto {
      url
    }
    content {
      html
    }
  }
}
`;

export async function getStaticProps(){
  const {articles} = await graphcms.request(QUERY);
  return {
    props: {
      articles,
    },
    revalidate: 10,
  }
}

export default function Home({articles}) {
  return (
    <main className={styles.main}>
      {articles.map((article) => (
        <h1>{article.title}</h1>
      ))}
    </main>
  )
}

在这个问题上的任何帮助将不胜感激。
显示错误的屏幕截图如下：Error picture
更新错误输出：New Error Picture