List data entries from Contentful in Gatsby

Khaled Garbaya
InstructorKhaled Garbaya

Share this video with your friends

Send Tweet
Published 2 years ago
Updated 7 months ago

In this lesson, you will learn how to get a list of entries from Contentful and render it in a Gatsby website

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.

Adrian Yong
Adrian Yong
~ 2 years ago

Is it me or is the code snippet at 01:58 missing a few lines?

Adrian Yong
Adrian Yong
~ 2 years ago

And where do we get the import Card from "../components/card" Card component from?

Khaled Garbaya
Khaled Garbayainstructor
~ 2 years ago

Hi Adrian, the card component is included in the project. It contains the markup and styles to render a lesson entry which was not the focus of the lesson