Let me introduce you to a new friend
So, I mentioned that I built this and other sites using a mixture of WordPress, VueJs, and GraphQL. The hardest thing for me to grasp coming from a traditional API environment was GraphQL.
So it’s a little weird…
I’m not kidding. Instead of a traditional endpoint where you are served a pre-set query, GraphQL allows us to customize our queries based on data that’s available. That and the organization is a little odd. Node, Edges, why the f*ck is my data being nested into these subfolders. It’s so much cleaner on the WP-API with ACF exposed and traditional queries!!!
Your data’s been abstracted
One huge advantage of GraphQL is that it’s a graph-ready abstraction of the data in your WordPress database (I’m using WP-GraphQL to help me convert the WP database into a quick, easy to navigate document with my data). #winning
Why is this good?
One word: speed. I’m not going to go into the old-school vs. modern data-structure debate. I see validity in certain aspects of either argument. The truly beautiful thing about GraphQL is the speed in which is converts your relational database data into a very usable JSON format without the bullsh*t of traditional SQL queries. This is speed you see in how fast your site content loads when called using AJAX.
Not to mention this keeps WordPress developers from being stuck in the Stone Age. With the advent of headless CMS’s and Google’s usual antics focused on site speed that isn’t necessarily tied to the actual page load speed, developers generally need all the help they can get.
This helps in 2 ways:
- It allows data to load asynchronously, but a little quicker. Your page load is not affected by how fast or slow your content loads on the site. It’s loading along side the site.
- It cuts down on the individual endpoints you need to maintain. GraphQL allows you to query the data directly, which allows for a high degree of customization on the front end.
Help Making Sense of a New Syntax
Enter GraphiQL. It’s a nice little WordPress plugin that provides you a GUI allowing you to write those GraphQL queries based on WPGraphQL’s data structure.
Once uploaded, you can select an available GraphQL query type and target your data accordingly…from there, you just need to add it to your code.
Where to get it:
WPGraphQL and GraphiQL reside on the same GitHub, found here. Next post, I’ll dive into incorporating WPGraphQL into Axios.