Hygraph & Next JS issue pulling data

Question

So I am trying to pull in some data from Hygraph in a new Next JS application, I recieve the error of Error: Cannot read properties of undefined (reading 'map').

I am new to both these technologies and cannot find a solutions, for reference I create a new Next JS application and imported graphql and graphql-request and the following code is inside the page.js file inside the app folder.

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>
  )
}

Any help on this issue would be much appreciated.

Screen shot showing error is here: Error picture

Updated error output: New Error Picture

Answer 1

You need to create a token in your hygraph, its on the same page where your api is. Make sure to add all permissions. Then your code should look like that instead:

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

Hope this helps

Answer 2

Can confirm, as of I'm writing this answer, this issue still persist. I have Next.js website that fetch data from Hygraph (previously known as GraphCMS) and have the website deployed in Vercel. Vercel build error, caused by cannot read properties of undefined (reading 'authors')

I have tried using the Public API Endpoints: Read & Write API and High-Performance API from Hygraph. I also use my Authorization Token from Hygraph.

Possible fix

This advice can be considered as not a good practice when it comes to using API endpoints, but in my other Next.js project (also being deployed on Vercel and using Hygraph), I put the Hygraph API in one javascript file, rather than using env variable.

The file looks something like this. Let's say the file name is hygraph-api.js

export const HYGRAPH_API="https://api-eu-west-2.hygraph.com/v2/xxxxxxxxxxxxxx/master"

then, i import this variable to the function that perform api call. Currently I'm using Next.js 14 App Directory. In the latest version, Next.js has deprecated the getStaticProps and getStaticPath function and encourage developer to use regular async function, since Next.js has extended the functionality of Fetch API. this technique first introduced at Next.js 13 App Directory, so it should be backward compatible)

Let's say i named the function export async function getAuthorsInfo(){} and i want to fetch the name and profile picture of the author of my website, in this case myself (heydar). Authorization headers is optional, but the method must be "POST", because if the method set to "GET", it will be denied by Hygraph

You do not need to replicate this code every time. Feel free to adjust the need of your website

import { HYGRAPH_API } from "./hygraph-api"
export async function getAuthorsInfo(){
   const retrievedAuthorsInfo=await fetch(HYGRAPH_API,{
      method: "POST",
      headers:{
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        query:`query AuthorsInfo{
           authors(where:{name_contains:"heydar"}){
              name
              picture{
                 url
              }
           }
        }`
      })
   })
   .then((responses)=>responses.json())
   .catch((errors)=>console.log(errors))
   return retrievedAuthorsInfo.data.authors
}