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)
Step 1 — Setup GraphCMS:
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 setup 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
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:
create-react-app blog
then press enter and let create-react-app create our project for us.
- Once it’s finished you need to change directory into your project.
cd blog
- Before we can run our App we need to install a few packages.
npm i react-router-dom react-apollo graphql-tag apollo-client apollo-link-http apollo-cache-inmemory
- Now we can finally start our App!
npm start
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 login. 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:
Landing Component
Make a new file in src folder called Landing.js and paste this code, I’ll explain it later.
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 were 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
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:
If our slug was “first-post” the Link tag would navigate the user to localhost/post/first-post. This is important because later inside of out Post component we’re going to get the slug from the URL.
Create a new file called Post.js and paste this code in:
Like I said before you can see that we are getting the slug params from the variables object. This code is basically saying we are only looking for a post that matches slug param from the URL.
App Component
Open up our App.js file and delete everything and paste this code. Don’t worry if you don’t know what this code is doing, it’s just setting up our routes for us. You can learn more here.
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.
Enjoy your React and GraphQL blog!
You can view the full code here. (I probably will be updating this App later to make it look more appealing and structuring the code)
Follow me on social media:
Twitter
Instagram | Personal
Instagram | Developer
Linkedin
Youtube
Top comments (10)
I am assuming you don't want to change your index.js rather App.js when you start coding since we need a component that will use the ReactDOM.render() :)
Edit: It seems you entered the code for App.js on both index.js and App.js :)
Sorry fixed that. Thanks
graphCMS link is borked
Is it not working for you?
Not when it linked to to dev.to/smithmanny/graphcms.com/
seems like dev.to was doing some relative linking. Whatever you did fixed it though.
I've just seen this relative linking thing on another post...
bug reported
github.com/thepracticaldev/dev.to/...
Could you post a screenshot of the structure in GraphCMS?
When I use your endpoint it works, but the one I created does not work.
Thanks, awesome tutorial!
Make sure you have your permissions set to read for everything and also connect for any assets like images.
I get "Cannot query field "Post" on type "Query". Did you mean "posts" or "post"?" - any idea what might cause that?