Friday, January 29, 2021

Why we chose to use GraphCMS

Introduction

It has never been more critical to use the right tools for delivering content. We live in the information age where articles, videos, podcasts, and all the other media are available right from the palm of our hands. Our mission is to deliver as much content and knowledge as possible to as many people as possible, and if we are to succeed, we need to use quick and fast tools in doing so.

Where do we start? 🧐

As most of us are developers, we felt it was very natural to start with Markdown files and add them to our Github repository. It would allow us to save new articles and trigger an automatic build, which would display them on our website. The idea sounded fantastic, but in reality, it was a very manual process. Another issue we ran into was, how about those who are not developers? How could non-developers contribute without asking a developer to get the post up and running? So we started a quest in searching for the best content management system (CMS), which would deliver the need for our business.

We quickly found out that the world of CMS was gigantic. Perhaps one of the most confusing ones to some. But that did not frighten us from finding the best one for our needs.

What should the CMS be able to do? 📚

We had a few requirements in mind for what the CMS should be able to do. First of all, we would like one place to rule them all. So no matter if you are a developer, a designer, a salesman, or something entirely different, you should be able to contribute with your knowledge and have an easy-going with the distribution of articles and more. Another essential thing was, how many different platforms can we push the content to? We already knew we would require a way to deliver the content to our apps on other platforms like iOS and Android, and it should also be compatible with our website.

We found out that our website, which is built using the GatsbyJS framework, that it would be easiest if we went with a CMS delivering the content through GraphQL. The last thing was that we wanted a CMS with a very intuitive and easy interface to work with. There is nothing more annoying and time-consuming if you work with an application not suited for the need and speed.

Due to the GraphQL requirement, the options got boiled down very quickly, and we basically had two favorites left, Contentful and GraphCMS. We favorited GraphCMS due to its simplicity and ease of use.

The interface 🔘

Let's start with the interface of GraphCMS. As you recall, we wanted content delivery to be as much effortless as possible, where all can contribute whenever they want. Of course, there will be a learning curve to conquer when things are new, but it was important to us that it wasn't too big of a learning curve.

We started setting up our schema to match our needs, and this was where we had to spend a lot of research to get to a place where we would be able to accommodate our design and information. What is really good about GraphCMS is the fact that you can always add more to the schema without breaking anything.

GraphCMS_Schema.png

You will notice in the image above that our schema is relatively simple as of the time of writing. It contains four models, which are Author, Page, Post, and SEO. If we look at the Post as an example, you will find fields we needed for our project such as Title, Slug, Date, Excerpt, Cover Image, etc. And those were easy to add from the right side of the Schema area, as you can see in the image.

One cool thing about GraphCMS is that you can reference all models, which will make you able to pull data from each one. For example, this article (Schema: Post) has an author, and because we are referencing the author in the Post schema, we can add that to each article we write and display it in the frontend where you are reading from now.

When the schema is set up, you will be able to enter the content tap on the left-hand side and start adding the content, as you can see below:

GraphCMS_Content.png

By implementing the CMS, everyone will be able to contribute, and there is no need for a developer to be involved in adding new content, like this article post, for instance.

The Technical Aspect 🖥

GraphCMS leverage the GraphQL query language, and that is exactly what we want to use to get our content to multiple platforms at once. In our website project, we can pull the data from the CMS using a query like the one below:

We used the inbuilt Playground a lot to learn how our data would be structured in GraphCMS, and how we should query it. There is an example below which shows how GraphCMS Playground looks like:

GraphCMS_Playground.png

Now that we have our query, we will be able to pull the date and use it in a React component like the one below: (Note that it is just an example and the Sandbox is not functioning due to missing configuration)

That is a straightforward example, but you can imagine how fast we can push out content because we invested our time in finding the proper solution. We encourage you to do the same, if you need to deliver content, even if it is a simple blog. Visit www.graphcms.com to learn more about what we think is an all-in-one CMS solution.

In an upcoming course here at Code Shape, you will be able to learn how to incorporate GraphCMS using the GatsbyJS framework.

Let us know how we can help you with your project and turn it into something cool! 🎉

Back to articles