Проблема с Hygraph и Next JS при получении данных

Question

Итак, я пытаюсь получить некоторые данные из Hygraph в новом приложении Next JS, я получаю сообщение об ошибке: невозможно прочитать свойства неопределенного значения (чтение «карты»).

Я новичок в обеих этих технологиях и не могу найти решения. Для справки я создаю новое приложение Next JS и импортирую Graphql и Graphql-запрос, а следующий код находится в файле 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>
  )
}

Любая помощь по этому вопросу будет очень признательна.

Снимок экрана, показывающий ошибку, находится здесь:Изображение ошибки

Обновлен вывод ошибок:новое изображение ошибки.

Answer 1

Вам нужно создать токен в своем гиграфе, на той же странице, где находится ваш 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
},});

Надеюсь это поможет