Going headless with Wordpress, Graphql and React

Twan kruiswijk
Nov 4 · 4 min read

When considering a stack for one of our new projects, we always try to incorporate learning new things into the process. We could take the safe route and choose our favorite CMS WordPress and create a theme for it, but that’s no fun. After reading some blogs about going headless, we decided to try it out.

What is a headless CMS?

Usually, a CMS would take care of every aspect of your data; how you create it, edit it, delete it, store it and last but not least how you display it to your users. Going headless means that you will no longer use your CMS for displaying your content to your end-user.

For example, we are still editing and storing our content in WordPress, but we are not creating a WordPress theme for it. We use the WordPress API to fetch our posts and use React to display our posts to the user.

Going headless doesn’t only mean that you could use any fancy framework and ditch your CMS’s view layer. It also allows you to use your data for multiple purposes. Want to create an app? Now you can! Want to hack your smart fridge, so it shouts out your latest post title when you open it? Go for it and send us a video! The possibilities are endless.

Getting the data and ending up with GraphQl

One thing you’ll always deal with when working with a headless CMS is an API. A common problem is the sheer amount of data you receive in a response from that API. Even if you only need specific data, chances are the API will give you bit more data than you actually need. Not a very big deal from a developer happiness perspective, but those extra bytes will add up to the speed of your website (and that is a big deal).

When I started using the WordPress API I had the same problem; I wanted to get the title, the featured image, and the post content but ended up with all the other metadata of the post. So I did what every developer would do; I read the F-ing manual. I dove into the documentation and started doing some research on how to filter the things out that I don’t need. That’s when it struck me; “Isn’t this a great opportunity to try out GraphQL?”.

Within a few searches, I found WordPress GraphQl, an awesome (but experimental) plugin that brings the power of GraphQL to WordPress. Instead of fetching every piece of WordPress data separately, having a GraphQl API allows you to fetch all the data you need in a single request, and it will respond with only the data that you’ll use.

We used Apollo to fetch the data in our React application. If you want to fetch data from a Graphql server, I highly recommend checking out Apollo. It only took us a couple of minutes to set up and we were good to go!

Please note that WordPress GraphQl is still in active development. Currently, we only fetch posts so if a breaking change is being introduced, we could fix it rather quickly. If you want to do more complex fetching and posting, you might want to read the documentation thoroughly first.

I also came across this documentation that might be useful if you would like to incorporate Apollo into your existing React application that uses Redux.

Redirecting traffic via a blank theme

What do you do when users still encounter your CMS/API server? Well, redirect everything but the back-end to your application via a 301 redirect.

You can create this redirect by creating a theme that only has a single index.php file and style.css. The PHP file redirects the user to your headless website and the style.css only contains the metadata about your blank theme.

// blankTheme/index.php
<?php
header("Location: <https://headless.site>", true, 301);
exit();
?>
// blankTheme/style.css
/*
Theme Name: Blank
Author: Moij
Description: Blank theme to use for your headless WordPress.
Version: 1.0
License: GNU General Public License v2 or later
License URI: <http://www.gnu.org/licenses/gpl-2.0.html>
Text Domain: blank
*/

You might rather create the redirect via Nginx or the .htaccess file, and be aware that the use of HTML meta refreshes is discouraged by W3C.

Deployment

You could deploy both your WordPress and React application on one server. But we chose to deploy them both to two different servers. This gives us the flexibility to switch either our WordPress or React application server whenever we feel like it or tweak one of them without harming the other.

For instance, we host our WordPress on Digital Ocean but choose to host our React application on Heroku. I can see us switching to a managed WordPress hosting and I can also imagine us trying out Zeit or Netlify for our React application. It may cost us some time and effort, but at least we have the option to play around with this.

Looking back on the process the reason to switch to a headless CMS became obvious; freedom. You don’t only have the freedom to choose any front-end stack you like, but with a little bit of work, you also have the option to switch to a completely different CMS. Keep one thing in mind while creating your next headless website; be as flexible as you can be.

moij

group of people building things.

Twan kruiswijk

Written by

Create ~ Code, stream and music twankruiswijk.nl

moij

moij

group of people building things.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade