Add Contentful as a data source for Gatsby
In this lesson, you will learn how to set up your Gatsby project to use Contentful as a data source using the gatsby-source-contentful plugin.
Instructor: [00:00] First, run npx gatsby new and give it the name of the website. Now let's cd to this directory. Let's run npm run develop. If we click on this link, you can see this is the "Hello, World" example provided by Gatsby.
[00:31] Now let's add some Contentful dependency to it. We'll stop our server, and we'll install the gatsby-source-contentful plugin. Now let's open our project in a text editor. We need to go to the gatsby-config and add our new plugin in there.
[01:08] We will need to provide two options -- the spaceId and the accessToken. To get this, we need to go to Contentful and Settings, API Keys. We will click on the first entry here, copy the space ID and copy the Delivery access token.
[01:45] This is a read-only Delivery access token. We paste it in here.
[01:55] This is done from the Gatsby side. We need to add some content to the website. To do that, we can go to Content, click on Add entry.
[02:05] We'll add our first lesson. It will be called "WTF is JAMstack." I would be pasting some text in here.
[02:26] Now let's create an instructor and link it to this lesson. Our instructor name is Mr. Jam. The website will be learnjamstack.com.
[02:48] For the avatar, we need to create an asset and link it. Now we can publish the asset and publish our lesson. Also, we can add an image to our lesson. We publish the asset.
[03:43] Finally, we can create a new reference for SEO and link it. The title will be the same. We add in some description and some keywords. We publish that, and finally, we publish our entire lesson.
[04:13] Let's go back to our command line. Let's run npm run develop. To test if this works, we can go to the GraphQL server that's provided by Gatsby.
[04:28] Then here, we go to blocks, query. We look for some Contentful-related nodes. As you can see here, we have all Contentful content types and Contentful lessons.
[04:44] Here we can simply query for all lessons. Inside of the node, we can get all the fields that we have, so let's get titles. As you can see here, this is the title of our lesson.
One question - is it ok to directly mention the access token inside the gatsby-config.js? Since you might commit this code and share it with others, this could be a security issue. Is it not there any support for environment vars or something in gatsby? Thanks a lot.
My understanding is that it's a "read-only" token, so I'm guessing that's why it's okay to include it in the gatsby-config. I may be wrong, however.
Hi Shripada, That's a great question and a valid concern. as Frank mentioned the delivery token is read-only. But it is always best practice to include credentials in environment variables for extra security especially if your website is open source. For the purpose of this exercise, I decided to add the token directly in the gatsby-config for simplicity reasons.
Cheers, Khaled
Thanks for responses. Frank, Khaled. I understand it is a tutorial and I think we need to warn someone who plans to copy this code as is into their production. I have seen people making this mistake especially when they are new to programming...
Hi, one question, what’s in your cli, that shows like a ghost/autocomplete of what you’re typing?
Hi Alexander, I use zsh with a plugin called zsh-autosuggestions https://github.com/zsh-users/zsh-autosuggestions.
One question - is it ok to directly mention the access token inside the gatsby-config.js? Since you might commit this code and share it with others, this could be a security issue. Is it not there any support for environment vars or something in gatsby? Thanks a lot.