Blaze is the official Wapuu for WPGatsby
At first, when I read about how the gatsby-source-wordpress-plugin was having such a huge update, I was slightly annoyed. I had just finalised my blog and wanted to move on to something different. I was worried (wrongly) that it would somewhat undo what I had learnt using the gatsby-source-wordpress@v3.
Today, I feel more than a little guilty admitting to this annoyance! I think a part of my recalcitrance is that WordPress is highly configurable by nature and what a huge undertaking it would be to get it playing well with static site generators.
WPGraphQL
Enter the WPGraphQL WordPress Plugin. This Plugin exposes a www.example.com/graphql at your WordPress site. Previously the gatsby-wordpress-source@V3 was responsible for doing this at build. It also required some extra WordPress plugins to be installed to reveal specific endpoints on the Rest-API, notably Navigation Menus and Custom post types.
Gatsby-source-wordpress-v4
The new gatsby plugin, gatsby-source-wordpress-@v4 utilises the Schema provided from the WPGraphQL Plugin. Allowing for a much more efficient build process as it can cache the source and rebuild what, where and when necessary—obliterating build times by orders of magnitude. The Plugin also provides a beautiful development experience, managing images and internal links, which is something that could be tricky in the previous version. Hot-module-replacement when project source and when WordPress content changes, it’s magnificent!
😁😍All of this, straight out of the box! 😁😊
Do you see the emojis above?! 😀
Previously, using version3, any changes to the backend would require a complete rebuild to update the GraphQL Schema. Whereas now as the site is cached effectively, all this happens behind the scenes. It’s also remarkably configurable, such as limiting posts during development and provides a great deal of supporting features for debugging—many of which I have not had the chance to use yet.
WPGraphQL Extensions
Alongside WPGraphQL, there are many supporting WordPress WPGraphQL plugins to configure extra features provided by other commonly used WordPress plugins. Such as Advanced Custom Fields, Yoast SEO, Custom-Post-Type-UI and JWT Authentication.
https://www.wpgraphql.com/extensions
WPGatsby
The WPGatsby is WordPress Plugin and works alongside the new gatsby-source-wordpress-plugin and allows WebHooks to initiate automatic rebuilds of the site when content is updated. This Plugin can even be configured with Gatsby Cloud so that the WordPress Backend preview links show the Gatsby Preview as the Frontend!
I suppose this is all the more impressive when you’ve had the experience of wrestling with previous versions of the gatsby-wordpress-source-plugin. I don’t intend to be mean regarding the old version as it’s a necessary step and I learned a lot from using it, but it opened my eyes to just how complicated building a static site from even a simple WordPress installation is. It makes me truly appreciate the advances made by those developing, gatsby-wordpress-source-v4, WPGraphQL Plugin and the broader WPGraphQL architecture. I still find myself having wow moments and I’ve spent a considerable amount of time using it over the past few months.
In my opinion, these new tools that connect Gatsby and WordPress are a game-changing. I’ve rebuilt this blog using them, and the process has been an excellent development experience.
Gatsby Cloud
My early experiences with Gatsby Cloud are also very encouraging. This site is quite large as it contains lots of the WP unit-test data, images, authors and various categories and taxonomies so that I could experiment using Gutenberg as a page builder and have traditional WordPress archive pages. Clearing the cache and building from scratch took around four minutes. Then, using the incremental build features, updates could take as little as 4 seconds! It just wasn’t possible to do this before, updating a spelling mistake or an image required a total rebuild of the Gatsby site. You even get the Lighthouse testing results at build time.
I think the concept of Static WordPress still needs to be discussed and explained with clients as there are a few differences to a “classic” WordPress setup, mainly concerning how quickly content is updated and the nature of Static sites. Still, the pros and cons are straightforward and fairly easy to explain. I’m a little unsure about the overheads as my free two-week preview of Gatsby-Cloud has ended, but my overall experience so far is one of amazement.
The Future?
It’s a prelude to a WordPress Pagebuilder like backend for highly configurable, easily maintainable, Static React sites. It doesn’t take a great leap of the imagination to see how this could be configured alongside the WordPress Customizer, giving content creators an almost identical experience to what they’re currently used to with a typical WordPress setup.
I’ll end by thanking all those who those responsible for making all this possible. Particularly to Jason Bahl and Tyler Barnes for leading the development pf WPGraphQL and gatsby-source-wordpress-version4 respectively. I’m sure many others deserve huge credit too. Thanks for creating such a magical development experience.
I’d also like to thank Imran Sayed for his YouTube videos, they helped in putting together this blog. His instruction is very clear so if you want to learn more about Gatsby, WordPress, and much more on the topic of web development in general check out his youtube tutorials.