How to get data from GraphQL CMS

Question

I am trying to follow this tutorial.

I am stuck at 1:02.

Ania is able to generate the thumbnails, but I get an error that says:

TypeError: Cannot read properties of undefined (reading 'thumbnail')

It points to the image tag on the index.js page.

I tried to clear the error that is generated because Next.js wants to use its Image tag instead of img src - but the error still appears. The image block now looks as follows:

I get the same error when I comment the thumbnail line and just try to use title.

I can't make sense of the advice generated when I google this error - such as the note in this post, which I think is suggesting that the code is trying to run before the graphql connection has been made and loaded, for it to be able to retrieve the data. If that understanding is correct, then I think I need to put await somewhere to ask for graphql to load before the results are returned, but I don't know how to do that.

I'm not sure that I've understood the error or advice on how to resolve it correctly.

I have also seen this post, which suggests that problems could be because there are components in the pages folder that are not pages. Is it possible that the [slug].js file being in the pages folder is a source of the problem? If so, where can I move it to solve for that (and why didn't Ania have to do this)?

When I try to console.log randomVideo(videos) beneath the definition of that const (above the return statement), I get two instances of undefined. When I try to console log (randomVideo(videos)).title}, I get the same form of error as posted in the title.

I tried not using the randomVideo const in the return statement, so that the Image tag has:

> <Image 
>           src={videos.videos[0].thumbnail.url}
>           width={400}
>           height={400}  
>           alt={videos.videos[0].title}
>         />

When I try this, I get an error that says:

Error: Invalid src prop (https://media.graphassets.com/NLX6ICjoR5Wt6zYOoLYO) on next/image, hostname "media.graphassets.com" is not configured under images in your next.config.js See more info: https://nextjs.org/docs/messages/next-image-unconfigured-host

I tried amending the next.config.js to the following, but I still get the same error:

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: true,
}

module.exports = {
  nextConfig,
  images: {
    domains: ['assets.example.com'],
  },
}

For reference, videos is defined as follows:

const data = await graphQLClient.request(videosQuery)
const videos = data.videos
return {
  props: {
    videos
  }
}

I don't understand why the error messages are different, when I use a different means of getting a video in the return statement.

I have tried console logging all versions of randomVideo inside and outside the return statement, but keep getting undefined.

I've run out of things to try to try and get data in the app.