Hygraph & Next JS问题拉取数据

6g8kf2rb  于 2023-06-29  发布在  其他
关注(0)|答案(1)|浏览(154)

因此,我试图在一个新的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

g0czyy6m

g0czyy6m1#

你需要在你的hygraph中创建一个令牌,它在你的API所在的同一个页面上。确保添加所有权限。那么你的代码应该看起来像这样:

const graphcms = new GraphQLClient(YOUR_API_LINK, {
headers: {
  Authorization: "Bearer YOUR_TOKEN_VALUE", //make sure your token and Bearer have a space between them
},});

希望这个能帮上忙

相关问题