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 create pages dynamically in Gatsby based on data coming from Contentful

Instructor: [00:00] Here, I have my Gatsby website, and it's listing all the lessons that are coming from Contentful. If we click in one of the lessons, you can see here, Gatsby is giving us a 404 page. That's because we need to create a page for every lesson to show its details.

[00:20] To do that, we need to go to the Gatsby Node.js and write some code here to create the pages. First, we need to export a createPages function. We can then extract the createPage from the actions object. To be able to create a page, we need a path to a template, which is basically a React component.

[00:50] We will create the lesson.js later. Let's import path in here. Now, we can use GraphQL to query the Gatsby data for all the Contentful lessons.

[01:07] The GraphQL function returns a promise that will contain our result, and inside of the result, we need to check for errors. If so, we throw the error. Otherwise, we can create our pages. To do that, we need to loop through all the edges and create a page for every lesson.

[01:33] The createPage will accept the path the component, and a context for additional data. Let's save this and create our lesson template. Let's go to SRC and create a new folder. Call it templates. Inside of templates, we need to create a file called lesson.js.

[01:53] Let's do some imports first. We need React, we need GraphQL from Gatsby, we need the layout component, and the SEO component. Before we render anything, we need to get some additional data for the lesson detail.

[02:09] We need to export a GraphQL query. This will get the lesson query and use the slug that we passed in the component context when you create the page, and get all the data that we need. Once the query is successful, we will get this data object that has all the data, so we can fill in our components.

[02:41] Finally, let's export the lesson component. Let's hit save, and we need to restart our server. Now, if we refresh, go to the one of the lessons, and scroll down, you can see here the title of our lesson. If we check the second one, indeed, we can see its title.

Course

Build Content Rich Progressive Web Apps with Gatsby and Contentful

Programmatically create Gatsby pages from Contentful data

Share this video with your friends