WordPress Revolution with GraphQL

With Relay, you also get client-side data caching. For example, when you land on a blogroll page, all the data from each blog post will be fetched and stored in a client-side cache, so when you go into a blog post and then back to the blogroll page the server won’t have to fetch any data again – it’s already there!

.. What are your current biggest problems with the implementation of this new methodology?

The biggest criticism is that WordExpress doesn’t work with the majority of WordPress plugins. It’s true – any plugin you use that affects things on the front-end won’t work. You can still use plugins that affect back-end stuff, like Advanced Custom Fields, or WP-Types (which I use). The benefit, though, is that because it’s built using Node, you can use any NPM package you want, so that’s the trade-off.

Also, server-side rendering doesn’t currently work which is a big issue. Right now, you don’t get any SEO because the HTML is rendered on the fly – I’m actively working to get server-side rendering to work with Relay and GraphQL and it’s pretty close. There has been some great work in the GraphQL/Relay community to support this.

Introducing VuePress: WordPress development with Vue and GraphQL.

In this article, I’ll introduce you to VuePress, show you how to create a simple blog, and create a custom layout component.

About two years ago I created WordExpress, which was my first attempt at developing WordPress sites using only JavaScript. It got a decent amount of buzz and currently has around over 1400 stars on GitHub. The number of stars isn’t at all important, but it does highlight one thing: developers want to develop WordPress using JavaScript on the front-end.

One of the most difficult things to overcome at the time was server-side rendering with GraphQL. WordPress sites require search engine optimization, and you can’t begin to do SEO without server-side rendering. A lot has changed in two years, and server-side-rendering with GraphQL is now much easier thanks to Apollo.

In the past month, I’ve revisited WordExpress and I’ve come up with a solution using Vue instead of React. This is totally doable using React (in fact a big piece of the puzzle is the WordExpressSchema which is front-end agnostic) but I’ve been using Vue a lot and they have great documentation on server-side rendering, so I decided to give it a go.

I’ve called this new solution VuePress because I’m very clever with words.

GraphQL is the better REST

Over the past decade, REST has become the standard (yet a fuzzy one) for designing web APIs. It offers some great ideas, such as stateless servers and structured access to resources. However, REST APIs have shown to be too inflexible to keep up with the rapidly changing requirements of the clients that access them.

GraphQL was developed to cope with the need for more flexibility and efficiency! It solves many of the shortcomings and inefficiencies that developers experience when interacting with REST APIs.

To illustrate the major differences between REST and GraphQL when it comes to fetching data from an API, let’s consider a simple example scenario: In a blogging application, an app needs to display the titles of the posts of a specific user. The same screen also displays the names of the last 3 followers of that user. How would that situation be solved with REST and GraphQL?