Name: List data entries from Contentful in Gatsby
Uploaded: 2019-05-23T17:21:30-05:00
Description: In this lesson, you will learn how to get a list of entries from Contentful and render it in a Gatsby website

Model Content in the Contentful Web App

Model Content programmatically using the contentful-migration tool 

Add Contentful as a data source for Gatsby

List data entries from Contentful in Gatsby

Programmatically create Gatsby pages from Contentful data

Render Contentful rich text in Gatsby

Use Graphql backreference to avoid circular dependencies between Content model

Deploy a Gatsby website on Netlify

Trigger Netlify Builds when content changes in Contentful

Build Content Rich Progressive Web Apps with Gatsby and Contentful

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

https://app.egghead.io/api/v1/lessons/gatsby-list-data-entries-from-contentful-in-gatsby/subtitles

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.

List data entries from Contentful in Gatsby

Share this video with your friends

Course

Build Content Rich Progressive Web Apps with Gatsby and Contentful