loading...

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

Markus on November 26, 2019

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 blo... [Read Full]
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.

 
 

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

 
 

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'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

 

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

 

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.

 

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.

 

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 looking forward to the new gatsby-source-wordpress, built with wp-graphql: github.com/gatsbyjs/gatsby/issues/...

 
 

Indeed it is. Particularly incremental builds and previews!

 

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.

 
 

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.

 

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

 

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

 

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

 

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've purposefully avoided Wordpress projects for awhile. Maybe now i don't have to anymore haha

 
 

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

 

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

 

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.

 

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

 
 

We already know most of the stuffs you said you going to show us. But still looking forward.

nirvana.netlify.com

 

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

 
 

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

 

Have you found a solution to post and page previews?

code of conduct - report abuse