DEV Community

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

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...
Collapse
 
jkhaui profile image
Jordy Lee • Edited

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

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
 
po0q profile image
pO0q 🦄

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

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

Collapse
 
iaremarkus 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
 
iaremarkus 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
 
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
 
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
 
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
 
iaremarkus profile image
Markus

Stay tuned! It's easier than you think 😊

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
 
iaremarkus 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
 
andersonjoseph 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
 
iaremarkus 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
 
iaremarkus 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
 
iaremarkus profile image
Markus • Edited

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

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

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

Collapse
 
iaremarkus 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

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
 
iaremarkus profile image
Markus

You seem like you'd be fun at parties.

Collapse
 
iamwoodruff profile image
Dr. John Woodruff

An adequate burn.

Collapse
 
sean_smyth profile image
seán smyth

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.

Collapse
 
ojay profile image
Ojay

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 🤘

Collapse
 
iaremarkus profile image
Markus

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

Collapse
 
pedrorvidal profile image
Pedro Vidal

Hello friends, I'm trying to source from WordPress to gatsby, but my WordPress site is only a single page, as a landing page, built with Elementor.
Unfortunately, I didn't find any tutorial or guide showing me how to do this correctly. My gatsby site only gets a home listing one post (the "hello world" post).
How can I source from a WordPress site built with Elementor correctly?

Collapse
 
codenutt profile image
Jared

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

Collapse
 
bretonics profile image
Andrés Bretón • Edited

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!

Collapse
 
mcahornsirup profile image
Steffen Schuler

Nice!

Collapse
 
metruzanca profile image
Samuele Zanca

I slapped like because of that happy programmer gif

Collapse
 
dsgreve profile image
Dale Greve

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

Collapse
 
tommytodd profile image
Tommy Todd

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

Collapse
 
ogaston profile image
Omar Gaston Chalas

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.

Collapse
 
mkubdev profile image
Maxime Kubik

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

Collapse
 
crumdev profile image
Nathan Crum

Looking forward to reading these

Collapse
 
qwertydude profile image
Chris Howard

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

Collapse
 
carlosalfarodev profile image
Carlos Alfaro

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

Collapse
 
orionrush profile image
orionrush

Have you found a solution to post and page previews?

Collapse
 
joelgrodriguez profile image
Joel G. Rodriguez

Looking forward to it