Set up GraphCMS to Manage Data with a GraphQL API

Colby Fayock
InstructorColby Fayock

Share this video with your friends

Send Tweet
Published a year ago
Updated 10 months ago

To manage my product data, I'm going to use graphCMS which is a content management system that's going to give us a content API backed by GraphQL. You'll need to login, or register an account, with just the free version for this course. I will also run you through the initial setup for graphCMS.

Instructor: [0:00] In order to manage our product data, we're going to use GraphCMS, which is a content management system that's going to give us a content API backed by GraphQL. Once all of that product data is inside GraphCMS, we'll be able to easily query it with GraphQL, where we'll also be able to have complete access to all that structured data.

[0:17] That way, whether it's us or our team members who want to manage that product data, we're going to have an easy way to do that. In later lessons, we'll also learn how we can add localization in GraphCMS, as well as use UI extensions, particularly with Cloudinary, so that we can easily add our assets right into the CMS.

[0:35] In order to get started with GraphCMS, we'll want to start off with a free account. We can go ahead and click Get Started. Once we're on the signup page, we'll want to enter in an email address, a password, and our name. Or alternatively, you can use Facebook, GitHub, or Google to connect your account. Then we'll want to click Agree and we'll want to click Continue.

[0:54] At this point, GraphCMS might ask you to click on a link inside of your email, just to make sure that it can verify that email is legit. Once that link returns you to the login page, we'll want to go ahead and log in with our new account. Now we're ready to create a new project.

[1:07] I'm going to go ahead and click Blank because we're going to start from scratch. Then we want to enter in our project name, which mine's going to be Space Jelly Gear. Optionally, you can enter in a project description.

[1:18] Then we want to select the region where we're going to host our data. Typically, you want to select a region that's close to the place that's requesting that data, but the data is going to be available globally anyway. It probably doesn't matter too much especially for this walkthrough.

[1:33] I'm in US East, so I'm just going to go ahead and click US East. I'm going to go ahead and select Create Project. Once you hit the plans page, we're going to use the free forever plan.

[1:42] We're going to go ahead and scroll down and select that free plan. Now you're given the ability to invite your team members. If you have members for your team for this project, you can go ahead and add them all now and select the role for each of those members.

[1:55] Otherwise, if you don't have any other team members for this particular project like me, I'm going to go ahead and click Invite Later. Now we successfully landed in our new GraphCMS project, where we can get started building our data.

[2:07] Before we dig into that data, we want to do one more thing and that's make our API accessible. Currently, the way that the default project is set up is that all the data is locked down so you can't make API requests.

[2:21] We want to make sure that all of our data that we create is readable when everything is published. That way we can access it inside of our application. To navigate there, you can either select this make your API accessible option right in the dashboard or to get there manually, such as if you want to go there in the future, we want to select the cog in this sidebar or project settings.

[2:41] In the setting's sidebar, we can navigate down to Access and Select API Access. Then we can scroll down until we get to public content API, where we can see that we can create a permission or GraphCMS gives us the ability to initialize the defaults.

[2:57] What it will do is it will give us the ability to read all of our models on published for all locales, which is exactly what we want to do. I'm going to go ahead and click Yes, initialize defaults. Where now we can see that GraphCMS created that permission exactly how we wanted it.

[3:13] Now we have our GraphCMS project. We have our API accessible, and we're ready to start building out our data.