List data entries from Contentful in Gatsby

Instructor: [00:00] Here, I have a Gatsby website running. I am using [inaudible] for styling. We would like to list all the lessons that we stored in Contentful in our website.

[00:11] First, we need to define the GraphQL query that gets all the lessons. To test that, we can use GraphQL before we add the query to our code.

[00:27] In here, we can type all Contentful lesson. Inside of that, we'll have edges. Inside of edges, we have node. Inside the node, this is where we get the fills that we need.

[00:46] For the list, we will need the title. We will need the slug to link to the detailed page of this lesson. We will need the image. Inside of the image, we will get the file property which contains the URL property.

[01:07] Let's test this. You can see here we indeed are getting the data that we want. Let's copy our query and go to the index.js page. Here we need to export the const. We'll call it query. This will be GraphQL. Inside of that, we will paste the query that we already tested.

[01:37] Let's import GraphQL from Gatsby. Once the query is done, Gatsby will pass in the data in the props. Here, we can extract data. Inside of data, we will have all Contentful lesson.

[01:58] We have the data ready. Let's render it. We will have a div with your class names. We will look through all the edges inside of all the Contentful lesson and render this card component.

[02:16] Of course, here, let's import our card component. If we save and go back to our website and scroll down, you can see here we are listing all the lessons.