loading...
Cover image for Finding joy in WordPress again, with React, Gatsby & GraphQL

Finding joy in WordPress again, with React, Gatsby & GraphQL

markbloomfield profile image Markus Updated on ・2 min read

WordPress + Gatsby (2 Part Series)

1) Finding joy in WordPress again, with React, Gatsby & GraphQL 2) A headless & more secure WordPress install with Bedrock

I've worked with WordPress for over 10 years. It's a great platform, and there's no doubt that its come a long way and progressed from a simple blog publishing platform, to a more of a CMS (albeit through the addition of some incredible plugins).

But the way that Automattic steam-rolled the community into adopting Gutenberg, combined with me being bored with WordPress and wanting a new challenge, led to me giving up on the platform and moving onto other things.

Fast-forward 7 months and my new employer tasked me with a WordPress project (meh), but suggested we give Gatsby a try (huzzah). It's only been a couple weeks now, but I'm finding renewed joy and enthusiasm for the stack.

Here's why.

1. It keeps clients happy.

gif of a teenage boy giving a cheesy thumbup

Inspite of it being arguably out-performed by other systems like Laravel or Directus, WordPress is still a great platform. And because of how mainstream it is, it's familiar to end-users and they're comfortable with it.

2. It keeps you happy.

a happy developer, coding and smiling

Stands to reason that if you're working with a fun stack, you're going to enjoy your job more. The combination of WordPress, React, Gatsby and GraphQL is just that - fun.

Over the next couple weeks I will be creating some content around some libraries, tips & tricks, methodologies and systems that I've put to use in this site build, and that have made work fun again.

You can look forward to:

  1. A headless & more secure WordPress install with Bedrock
  2. Extending the REST-API to extract the most from your CMS
  3. Setting up your front-end with Gatsby
  4. Understanding how Gatsby uses WordPress to 'build itself'
  5. Learning some key GraphQL queries to extract what you need
  6. Swapping WordPress plugins, with Gatsby plugins, to do things like:
    • Form handling
    • SEO & XML sitemaps
    • Image optimisation
    • and more...
  7. Deploying a Gatsby site, and triggering builds with WordPress webhooks

Join me on this journey, as I make WordPress development fun again.


PS: This post will be updated with links to the other posts in this series, as they are written.

WordPress + Gatsby (2 Part Series)

1) Finding joy in WordPress again, with React, Gatsby & GraphQL 2) A headless & more secure WordPress install with Bedrock

Posted on by:

Discussion

markdown guide
 

I've been advocating this approach to WordPress for the past year :) thanks for bringing more awareness to this awesome stack, but you missed the most important point of all - the WordPress GraphQL plugin!! github.com/wp-graphql/wp-graphql

With one-click, you have programmatic access to all WordPress' features via GraphQL. What a time we live in.

 

I'm actually not using that plugin at all. I went the route of gatsby-source-wordpress, but more on that in post 4 ;)

 

Definitely check out WPGraphQL (github.com/wp-graphql/wp-graphql)! Gatsby's new WordPress Source plugin will deprecate support for the WP REST API and will use WPGraphQL on the WordPress Server.

You can read more about it here: github.com/gatsbyjs/gatsby/issues/...

Hi Jason,

What's the best way ? wait for the v4 or use the gastby-source-graphql plugin ?

Like most things in tech: "It depends"

If you have something you need to deliver now, I'd probably suggest using WPGraphQL + Gatsby Source GraphQL.

If you're just experimenting and looking for long term structure, I'd probably wait for the new source plugin as that will have a lot of things specifically optimized for the Gatsby + WordPress experience.

 

Fair enough! Look forward to your series :)

 

Oh man you should at least check out the new GraphQL plugin for WordPress! It's made by Gatsby 😍🍻
Either way I love Gatsby

 

Right, so I understand that you basically use Wordpress as a backend (headless CMS)? Never realized that that was remotely possible!

 

Yes, for a while now actually. They have had the REST API for a few years, and you could build a de-coupled front-end that made use of this.

This series will cover the usage of GraphQL instead of the REST API, so stay tuned :)

 

I find Wordpress and Drupal so stressful to code. I can't really stand for its post and postmeta tables self-reference. It also doesnt have routing control and the hooks cycle will confuse anyone. Imagine if they teached at colleges, the student might be quit.

 

I think that to a certain extent the whole meta tables thing that Wordpress does is now potentially problematic.

At the time Wordpress first came about, it made sense, because it was the only way you could easily store arbitrary keys and values about an object.

Now, however, most relational databases support some sort of JSON field which allows for storing and querying that sort of data. However it's difficult to imagine how Wordpress could adopt that without disrupting existing sites.

 

I love how you think Wordpress/Drupal is.

Plus, any structural change made in Wordpress/Drupal mostly stored in database, and it will be hard to track when someone else new to the project.

 

@markbloomfield Does this series assume you're building from scratch, or that you're transitioning an existing WP site to this paradigm? I'm assuming the former. But if you can, consider an addendum article that covers what to think about if you're transitioning from a trad WP site to this stack. Thanks!

 

It'll cover a from-scratch site, but ultimately, you can create a new JS-powered frontend and with just the addition of a few REST-API improvement plugins, your existing site will be good to go.

IE it doesn't need to be a brand new site. You can retrofit an existing one :)

 

Awesome, looking forward to it.

 

I built my personal site (it's still a WIP) to try out the WP + Gatsby stack quite a while ago. I've been working around WordPress for about 6 years now and this new approach was wonderful! I look forward to doing more projects (I have some interesting ideas!) and a blog series about it as well. Good luck with yours!

If anyone's considering deploying it to Netlify, I built Deploy with NetlifyPress, a very simple plugin that helps you set up automatic deployments directly from your WordPress dashboard.

 

I've been using WordPress for a while, then jumped onto Gatsby to redo JackHarner.com and loved it!

Now time to make the connection between WordPress as a CMS and Gatsby as a front end.

 

Stay tuned! It's easier than you think 😊

 

I'm looking forward to the new gatsby-source-wordpress, built with wp-graphql: github.com/gatsbyjs/gatsby/issues/...

 

Ooh thats very exciting 🙌🏻

 

Indeed it is. Particularly incremental builds and previews!

 

I've done it recently, no real content on it (I don't know nothing about gatsby or react yet) but I'm proud of what I've done so far:

kalecio.dev

 

I think that URL might be broken though 😬

 

That's odd, it's working normally here. Could you tell me which error does it appears to you please? Maybe it's some crazy rule on its dns that I'll need to fix.

 

You have a foot in the door. Now you will be hooked :p

 

The only thing I love about the WordPress front-end is the ability to create excellent web sites quickly using the "Elementor" page-builder. If I go headless with Gatsby, I don't mind losing the "wizard" or "drag-and-drop" simplicity of Elementor, but I'd like to know what tool(s) or repositories I could leverage that would optimize the speed of delivering a beautiful site design. I don't want to suddenly spend weeks or months achieving what I could do with Elementor in hours. Any advice?

 

I'm currently playing with this stack and I love it!! Extending the REST-API it's so easy and with help of some back-end WordPress plugins, the process of build a web app it's smooth and fun.

My clients will love this.

 

If WordPress had not added REST API, I don't think it would be in any commanding position in 2019. Any real negative about the platform was undone that day and it's great.

 

Absolutely. With the rise of the JS front-end, not having a REST API to source data from would have left it dead in the water

 

I'm literally just starting to get into Gatsby after building WordPress sites for 6 years. Looking forward to this series dude!

 

Nice! We're on the same journey then 🖤 You're gonna love it :D

 

Indeed! Although my JS knowledge bis really limited so I'm struggling with the basics at the moment!

Yeah, I have done that course too. The course is great but also, because it doesn't use any frameworks, sometimes it's confusing about where to put code or what the correct syntax is.

This stuff is relatively new, whereas there is about 17 years of knowledge to Google with native WordPress issues so it can be hard to find solutions online.

 

I've used, the idea is cool but in the end, shaping Wordpress in order to the platform needs is just PITA (2years ago or so was like that), I switched soon after to Yii2 Framework, nothing beats that in productivity for me (in terms of PHP-based frameworks, because actually Strapi can be even faster to build on, but lacks a "ready-to-use" backoffice).
But I definitely liked Gatsby :) Just not the combo

 

Dude, your grammar is terrible, terrible enough to go through the hassle of registering to point it out. "Inspite" is spelled "in spite" (you are probably confusing with "despite"). Possessive adjectives are used before gerunds ("with my being," not "with me being"). On another note, though, I was pleased to see you take issue with Gutenberg's authoritarian rollout. I hate it. I won't use it.

 

You seem like you'd be fun at parties.

 
 

I've been interested in this approach for a while, even though I despise WordPress. Would really like to work out a way of getting WordPress to be 'serverless' within this stack. That way, the WordPress backend would only be created and running when you need to edit something.

 

You can kinda do that already.

Because gatsby-source-wordpress handles the finding & replacing of URL's when fetching the content, your WP site can live anywhere - even on your localhost.

The caveat here, is that your gatsby build would need to be done locally then too, as online, it wouldn't be able to find 'localhost' as its source.

 

I've purposefully avoided Wordpress projects for awhile. Maybe now i don't have to anymore haha

 

What a timely post! I’ve been using Sage & Bedrock for years for all my Wordpress needs. However I am about to start using a Bedrock, WP, Gatsby & GraphQL setup for my next project... and probably for all the other ones thereafter!

I don’t suppose you have a rough timeframe for the release of said posts? Thanks heaps 🤘

 

Hopefully all within the next 4-6 weeks :) 🤞🏻

 

I have to say, I love the idea of all this but I'm struggling through it. Admittedly, I'm using Vue.js but I don't think it's a Vue problem specifically.

I've been using WordPress for years and you get a lot of things out of the box with it with routing and category pages etc etc. Outputting srcset images out of the box too. Things you take for granted.

I'm working on a friend's portfolio at the moment and, while I'm learning, I'm struggling with doing "simple" things like inserting dynamic data in the title tag.

People keep saying it's "easier" but I think it's an important part of the story to tell that there is a learning curve and there will be struggles a long the way.

 

Oh man, this is going to be great to see! I can relate a lot to your points. I’ve used WordPress for over 6 years now, but have been bored and disappointed at it’s limitations the past 4 without going off to JavaScript frameworks. Last year I learned about Gatsby and others alike and have wondered about trying them to move out of WordPress. This series will be ideal. Bookmarked. Thanks!

 
 

Looking forward to your upcoming content. I just started looking at using Wordpress as a headless CMS so this is very timely.

 

Man I'd like to try these different things on my new build. Where to start!?

 

I slapped like because of that happy programmer gif

 

I actually don't like Wordpress but I'm stan of Gatsby. Next time i have to work with a Wordpress project, I'll suggest this approach.

 

Looking forward to reading these

 

That's so fantastic. I absolutly felt in love with the combo WordpressCLI + Gatsby 😍😍

 

This great! I started learning how to code a couple of years ago and I want to be able to build projects for clients but still have fun in the process as well learning new things

 

Have you found a solution to post and page previews?

 
 

Sweet! Really looking forward to this, Markus. My WP life needs a new spark too.