因此,我试图在一个新的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
1条答案
按热度按时间g0czyy6m1#
你需要在你的hygraph中创建一个令牌,它在你的API所在的同一个页面上。确保添加所有权限。那么你的代码应该看起来像这样:
希望这个能帮上忙