Join egghead, unlock knowledge.

Want more egghead?

This lesson is for members. Join us? Get access to all 3,000+ tutorials + a community with expert developers around the world.

Unlock This Lesson
1×
Become a member
to unlock all features

Level Up!

Access all courses & lessons on egghead today and lock-in your price for life.

Autoplay

    List data entries from Contentful in Gatsby

    Khaled GarbayaKhaled Garbaya
    gatsbyGatsby
    ^2.5.7

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

    Code

    Code

    Become a Member to view code

    You must be a Member to view code

    Access all courses and lessons, track your progress, gain confidence and expertise.

    Become a Member
    and unlock code for this lesson
    Discuss

    Discuss

    Transcript

    Transcript

    Instructor: 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.

    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.

    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.

    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.

    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.

    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.

    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.

    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.