DEV Community 👩‍💻👨‍💻

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

Posted on • Updated on

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

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.

Top comments (58)

Collapse
 
jkhaui profile image
Jordy Lee • Edited on

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.

Collapse
 
markbloomfield profile image
Markus

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

Collapse
 
jasonbahl profile image
Jason Bahl • Edited on

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/...

Thread Thread
 
jmau111 profile image
jmau111⭐⭐

Hi Jason,

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

Thread Thread
 
jasonbahl profile image
Jason Bahl

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.

Collapse
 
jkhaui profile image
Jordy Lee

Fair enough! Look forward to your series :)

Collapse
 
petecapecod profile image
Peter Cruckshank

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

Collapse
 
leob profile image
leob • Edited on

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

Collapse
 
markbloomfield profile image
Markus

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 :)

Collapse
 
dendihandian profile image
Dendi Handian

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.

Collapse
 
matthewbdaly profile image
Matthew Daly

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.

Collapse
 
dendihandian profile image
Dendi Handian

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.

Collapse
 
catperry profile image
Cat Perry

@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!

Collapse
 
markbloomfield profile image
Markus

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 :)

Collapse
 
catperry profile image
Cat Perry

Awesome, looking forward to it.

Collapse
 
jackharner profile image
Jack Harner 🚀

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.

Collapse
 
markbloomfield profile image
Markus

Stay tuned! It's easier than you think 😊

Collapse
 
nfmohit profile image
Nahid Ferdous Mohit

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.

Collapse
 
brentarias profile image
Brent Arias

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?

Collapse
 
deckchairlabs profile image
James Edmonds

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.

Collapse
 
markbloomfield profile image
Markus

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.

Collapse
 
andercodes profile image
Anderson. J

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.

Collapse
 
spenncerr profile image
Spencer Haizel

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

Collapse
 
markbloomfield profile image
Markus

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

Collapse
 
spenncerr profile image
Spencer Haizel

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

Thread Thread
 
markbloomfield profile image
Markus

Have you been through this ?

Thread Thread
 
sean_smyth profile image
seán smyth

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.

Collapse
 
kylefilegriffin profile image
Kyle Griffin

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.

Collapse
 
markbloomfield profile image
Markus • Edited on

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

Collapse
 
treb0r profile image
Rob Blake

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

Collapse
 
markbloomfield profile image
Markus

Ooh thats very exciting 🙌🏻

Collapse
 
treb0r profile image
Rob Blake

Indeed it is. Particularly incremental builds and previews!

Collapse
 
kalecio profile image
Kalécio • Edited on

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

Collapse
 
dance2die profile image
Sung M. Kim • Edited on

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

Collapse
 
markbloomfield profile image
Markus

I think that URL might be broken though 😬

Collapse
 
kalecio profile image
Kalécio

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.

Collapse
 
inozex profile image
Tiago Marques • Edited on

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

Collapse
 
iamwoodruff profile image
Dr. John Woodruff

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.

Collapse
 
markbloomfield profile image
Markus

You seem like you'd be fun at parties.

Collapse
 
iamwoodruff profile image
Dr. John Woodruff

An adequate burn.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.

Join us at DEV Want to join the conversation?
 

It's easy! Become a DEV member to follow this post, comment, and more.