How To Make A Blog With React & GraphQL

After hearing all the hype about GraphQL and why developers should start learning it, I finally decided to do some research. I'm not going to go into to much detail, but GraphQL is a query language for your API. If you want to read more about it visit the official link here. So after reading, I came across a headless-cms that uses GraphQL instead of Rest and thought this would be the best chance for me to really try it out. We're going to build a blog with GrapgQL!

Requirements:

create-react-app

GraphCMS account (Free)

Sign up it's free!

Step 1 --- Setup GraphCMS:

GraphCMS Dashboard

Before we start doing any coding, you need to sign up for a free GraphCMS account. We will be using GraphCMS to handle our backend for us. After signing up we're going to make a new project. Click on that project and you'll be greeted with the dashboard page. Don't worry about everything right now, the first thing we need to do is set up a new model. Click "Models" on the side nav bar, then click "Add Content Model" at the top of the page. The only field we need to worry about is display name. Enter "Post" as the display name and the API ID should autofill itself; once your done click save.

Adding Fields:

You should now see a new button that says "Add Field" under your Post Model. We're going to add four fields to make a basic blog: Image, Title, Description, and Slug.

Adding Image:

Click "Add Field"

Click "Asset" then "Asset Grid"

Give it the name "Image"

Click next then save

Adding Title:

Click "Add Field"

Click "Text" then "Single Line"

Give it the name "Title"

Click next then save

Adding Description:

Click "Add Field"

Click "Text" then "Rich Text"

Give it the name "Description"

Click next then save

Adding Slug:

Click "Add Field"

Click "Text" then "Slug"

Give it the name "Slug"

Click next then save

Make sure to click "R" on the main Post model and Asset

Giving API access:

Once we're finished with our model, we need to give our API access to read our fields. Still, inside your Models view go to Post and click on "R". Make sure "R" is clicked for every field and that "connect" is selected for Image. Make sure to do the same for Asset as well.

Creating Dummy Data:

The last step for us inside of our GraphQL is to create some dummy data to show on our front-end. Click on Content then Post on the left side nav bar. You should see a plus icon on the top left. Click it and fill in the data. For the Slug field, you can just put in the Title name with dashes instead of spaces (This is a test = This-is-a-test).

Step 2 --- Create New React Project:

If you do not have creact-react-app installed run this command**

npm i -g create-react-app

Now we can finally code our blog. I did not design this blog to be amazing, so the design is bad, but it gets the job done.

Navigate to where you want to store this project and create a new react project. I'm using create-react-app and I like to keep my projects inside a folder called projects(makes sense). I'm going to call this project "blog". Open up your terminal and type

Step 3 --- Start Coding

Now it's time for the fun part, coding our React project! I'm trying to keep this project as simple as possible, so I'm just going to throw all of my files inside the root of my src folder. Usually, I'll create a new folder for components, and etc, but we're not doing that today because it's a very small App.

So with our project running, let's start creating our components.

Index.js

Open up your Index.js file inside your src folder and change it to this:

For the const variable API, we need to get your GraphCMS API key. Head over back to GraphCMS website and log in. Once logged in scroll down to settings. Inside your settings tab scroll down until you see Endpoints and copy your Simple Endpoint API.

Header Component

Inside your src folder create a new file called Header.js and paste this code:

That was a lot of code so let me explain it a little. We created a new component called Landing and imported a few packages.

react-router-dom (To use the Link to switch between our component views)

react-apollo (Used to get our data from GraphCMS API)

graphql-tag (Used to get our data from GraphCMS API)

The const variable allPosts is where we are calling to our database to get all of our posts and its fields (id, title, description, and slug) in the form of an array, then we're passing that to our Landing.js data object. The if statement for loading is something that Apollo looks for. If the query is not finished "loading" is set to true and we return

//Landing.js

<h2>Loading Posts...</h2>

Once Apollo finishes with the query loading is set to false and then we render all of our blog posts.

Post Component

Our Post Component is going to be the same thing just a little different since we only want the post that we clicked on. How we handle this is from the Landing Component when we click on the "read more" button:

Step 4 --- Styling our App (Sort of)

This is something hopefully everybody knows if you're reading this tutorial, if not stop and go learn the basics first...for real. Again to keep this tutorial simple I just posted everything inside my App.css file.