EP04 – Using WPGraphQL With WordPress
Jason Tucker 0:06
Hey what’s up everyone this is Jason Tucker This is dev branch for WP water cooler. We’re gonna talk about WP graph qL with WordPress This episode is brought to you by server press makers desktop server they make local WordPress development easy go check them out over at serverpress.com
Steve Zehngut 0:24
Well, it was all professional and stuff right?
Russell Aaron 0:27
I actually didn’t want to say anything.
Steve Zehngut 0:30
Am I on the right show?
Jason Tucker 0:35
That’s good stuff guys. Come on. So yeah, today we’re gonna be talking about WP graph WP graph QL. And yeah, let’s go around room real quick. Get everyone introduced. Casper. Tell us about yourself.
Jason Cosper 0:50
Hey, everybody on the hood is it’s your boy Jason Casper, aka fat Mullenweg aka Jason Cosper, I’d rather not but
I’m here to talk graphqL here to to get into the zeros and ones. I’m Dev Branch. Awesome.
Jason Tucker 1:08
Good to have you on Casper. Jacob, you’re back. What’s up, bro? Tell us about yourself.
Jacob Arriola 1:13
Back again. Yeah, I got the call. I got the bat call What’s going on?Jacob Arriola from Zeek interactive, all things web development. Happy to be talking about graph qL and WP graph qL and how it all relates to WordPress. So what’s going on?
Jason Tucker 1:30
Awesome. How about you, Russ? Tell us about yourself.
Russell Aaron 1:33
What’s up? I’m Russell Aaron. I’m here in Las Vegas and, you know, API’s I like API’s I’ve never heard of GraphQL. So Jacob, and Jason, I have questions.
Jason Tucker 1:45
Good, good. Steve. How about you tell us about yourself?
Steve Zehngut 1:48
Steve Zehngut. I’m the founder of Zeke interactive, and I run the OC WordPress meetup.
Jason Tucker 1:54
Awesome. Jason, ba ba you tell us about yourself.
Jason Bahl 1:57
Yeah. Can y’all hear me fine? Yeah, I’m sure I can.I was having the audio issues. Yeah, my name’s Jason ball creator maintainer of graph qL, which is a free open source plugin that turns WordPress into a graph qL server
Jason Tucker 2:12
Sweet. I’m Jason Tucker. You can find me over at Jason Tucker on Twitter. My website is Jason Tucker dot blog. I do this show as well as other show called WPblab which is now called The WordPress Marketing Show. If you’re not if you’re not familiar, you can go check that out over a WPwatercooler.com you can go take a look at that and see how that goes.
Steve Zehngut 2:34
Does that look better than WP plan?
Jason Tucker 2:36
No, that it kind of explains what it is right like we’re The WordPress Marketing Show. And we put fun in the beginning of it. So you’re very important. The WordPress Marketing Show. That’s correct. That’s correct.
Steve Zehngut 2:52
It’s not a The WordPress Marketing Show. It’s the Yep. Casper you’re you’re muted.
Jason Cosper 2:58
Oh, If they called it a The WordPress Marketing Show, it’d be first in the telephone book and anybody in the telephone book,
Jason Tucker 3:10
Russell Aaron 3:15
to really bring that point home, you could be an underscore and be all about the coding part of The WordPress Marketing Show and you know, really get that first number one spot organically.
Jason Tucker 3:25
So Jason ball Wait, we brought you in, through Jacob through Steve, we had a little bit of a,
Russell Aaron 3:31
Steve here, you literally know a guy who knows the guy.
Jason Tucker 3:39
Can you can you give us a quick little quick little, like, less than two minute overview of like what WPgraphQL is and how it works with WordPress?
Jason Bahl 3:48
Yeah, sure. So graph qL is a query language API that Facebook open sourced in 2015. It’s got some similarities to REST and that you can To a service and get JSON data in response, it’s different than REST in that rest has endpoints per resource and GraphQL as a single endpoint. And you the consumer, express what you want by writing queries. So in WordPress case, you can say, hey, I want a list of posts, and on each post, I want the ID and the title. And you’ll get back just the ID and the title, or the rest. You say, hey, WordPress, I want posts, and you’re not really sure what you’re going to get back. Like my site, it might be the ID and the title of your site, it might be something else. So with graph qL, you explicitly declare what you want, and you get exactly that in response.
And then you can also follow connections between related data. So in rest, you have like an endpoint for posts and endpoint for authors and endpoint for images. So to get one entire post, you actually have to hit the post endpoint author, endpoint.
The taxonomy and to get ahead three call. Yeah, so it’s multiple things and you have to wait to get the response to one and then follow up with a request to the other with grab, they gotta be apart. Yeah, exactly.
And so with graph qL, you can say, hey, I want the posts and their author name and Avatar and the categories and the name of the category and whatnot, all in a single request.
It’s schema based. So the schema, you register a schema with types and fields types are basically objects, essentially, and you say, these types of these certain fields. So ahead of time, any consumer can see what’s possible to fetch from the API.
And the schema is query able itself. So you can do some really cool stuff.
Jacob Arriola 5:49
But that’s an important point too, in terms of like seeing what’s available, because if I’m, you know, looking at a project for the first time, and I have no idea what that API looks like, and what the data In other relationships, I can through graph qL, you know, explore and figure out Oh, cool, these are different objects, there’s posts, users, there’s, you know, taxonomies. And then these are the different properties in that and these are the different relationships, so that I can quickly get a good lay of the land without really having to look at, you know, any very specific documentation almost kind of self documented, too.
Jason Tucker 6:23
So what does a What does a “Hello World” start with to do this? Like, how would you start off with doing a WPgraphQL implementation?
Jason Bahl 6:33
Sure, um, can I share my screen at all?
Jason Tucker 6:36
Yeah, please go for it.
Jason Bahl 6:37
Okay, cool. I totally was not planning I didn’t even know about this until about 15 months ago, so not like, prepared in Europe, bro. Come on.
Yeah, give me one second though.
Jacob Arriola 6:52
We’ll walk you through that up to like, you know, in terms of graph QL. The nice thing is like when you request data, you you request
To a certain shape, and it comes back in that same shape as well. Right? So if you say, give me post.id You know, you’re gonna get post ID back.
Steve Zehngut 7:07
So there’s another shape like, like, like lucky charms. If I’m looking for, you know, orange stars, I don’t get blue clovers.
Jacob Arriola 7:17
Uh, yeah, something like that.
Russell Aaron 7:19
It sounds for useful, though, like, in the sense of, you know, like, like the WordPress query, like it used to be returned everything in the post. And then you had to say, if it’s not this, and if it’s not this, and it’s not this, it sounds like what you guys are trying to do is say, what did we look at in the past? And how can we improve in graph qL is improving that query?
Steve Zehngut 7:39
Yeah. Well, and and I assume that that also makes the whole system much the load on the database much smaller.
Russell Aaron 7:48
Unknown Speaker 7:49
Jason Tucker 7:51
it’s Feel free to zoom in a little bit too, because it Oh, sure. Sure. It’s a screen with a screen kind of thing. But, but yeah, let’s definitely take a look.
Jason Bahl 7:59
Jason Tucker 8:01
Yeah, looks good.
Jason Bahl 8:02
Okay, so yeah, this is just kind of like a playground for playing around with WPgraphQL playground on WPgraphQL.com.
So yeah, I’ll walk through some basics. This tool on the right side is called graphical. It’s like an IDE for working with graph QL. It’s an open source tool also from Facebook.
So it’s much like JSON itself, or JSON is used in any coding language out there today. Graph qL was intended to be kind of language platform agnostic, and data source agnostic as well. So the data can be a Google
spreadsheet if you want it to be it can be a CSV file or in our case, a SQL database behind WordPress.
And even in some cases, the data is not even in the database like you can query post types which are registered just statically in PHP code, right.
So yeah, one, one a one thing to note. So this tool allows us to explore the schema. So at the root of the schema, we have entry points, called queries and mutations, which mentally translate to like, get requests and put or POST requests, right and a REST API. And we can click into this and like, explore what all is available, or we can search. Like, I know, maybe I want to create posts, I can search all these other ways I can interact with posts, I can click into something and see all the fields that that entity has. And then I can type over here. So yeah, this is kind of a Hello World query.
A query in GraphQL looks essentially like JSON keys without the values.
Russell Aaron 10:07
Jason Bahl 10:07
And then a response when you execute it, actually is JSON keys with the values. So you express to the API, hey, I want these things from General Settings. And in response, I get those things.
Russell Aaron 10:22
What what’s parsing those that don’t see a comma? I don’t see a colon the what’s what’s separating those? Is it Yeah, in a bracket.
Jason Bahl 10:32
Yeah. So uh, yeah, so the graph qL specification has a whole specification on how you write queries.
Basically, any anything in the brackets would be called selection set, and you select fields,
Russell Aaron 10:50
Jason Bahl 10:51
And so anything here would be called the field, if that maps to a type, like if we look in the schema under General Settings,
And this terminology of edges is probably like foreign to anybody who’s looking at this if you haven’t used GraphQL before, the concept with edges and an API. Since we havehere, I have a slide that shows us visually real quick, let me get to
Jason Tucker 12:09
I’ll ask you a quick question when, when you’re when you’re starting out with, with graphs with WPGraph QL Do you have to have graph qL? plugin or do you Oh, do you just install WP graph qL and that plugins what takes care of everything?
Jason Bahl 12:24
Yeah, WP graph qL takes care of it. And then the second, you can install second plug in that brings this graphical interface to your WordPress admin.
Separate plugins at the moment.
Russell Aaron 12:36
And this is cool. This is a plugin that you built.
Jason Bahl 12:40
Russell Aaron 12:41
dude. All right. Yeah. And related question that I assume this works with any WordPress site.
Unknown Speaker 12:47
Any WordPress site, you can upload plugins to so right wordpress.com like free plans or whatever they want. Can’t
Steve Zehngut 12:55
What about what about WooCommerce?
Jason Bahl 12:57
Yeah, there’s WP graph kill for WooCommerce
extension as well. We have a vast custom field extension. Someone’s working on WP graph qL for DNA forms. Yeah.
Unknown Speaker 13:15
Yeah, someone’s got cryo things. Awesome.
Jason Tucker 13:18
That’s really cool.
Russell Aaron 13:19
That’s like I just cancelled the rest of my day. And you know, like now I’m gonna be busy like, Alright, I’ll see you guys later. Yeah.
Jason Bahl 13:28
Yes. So the concept of like, the shape of some of the schema comes from, like this kind of concept we have about at the heart of WordPress, we have things like posts, users, comments, pages, terms, media, and they’re all connected to each other right? Here, this actually just pulled up this earlier, but visually, when you think of a graph, the term graph in our case means like graph data. So like, you take WordPress posts, It has properties or fields like a title, which has a value like hello world. And it might have, you know, connections to other things, these in a graph QL. In the graph qL schema, we call these things nodes, right? They’re individual nodes. So post is a node, a category is a no to images node. These nodes can have properties, but they can also have connections to other nodes, right. And those nodes can have properties, right? And then they have further connections, and so on, and so forth. So the space between two nodes is called an edge. It’s this relational space. Good way to think of this would be like a social network, where I, my user, your user, there’s properties of our context, like the day we became friends, that’s not a property of me, the user and it’s not a property of you, the user. It’s a property of that relationship. So in a schema, we can expose that contextual data on the edge. So that’s it. So that’s where that term comes from, when you see it here. So you can ask for. And that’s important for like caching. If you’re going to request data and you want to cache the data somewhere, you’re going to want to cache the node like, you’re going to want to cache post one, exactly one time, right. But if you if you query some relational data, you don’t want to cache that on the post. Because if you if you come at it from a different direction, that relational data will be different. So you want to expose it somewhere that can be cached in between. So that’s kind of where the shape of the schema comes from. But yeah, we can query like list of posts, and you’ll see we get a list of posts with exactly the fields that we want. I can, you know, change, to just get fewer fields and I’ll get fewer fields. Behind the scenes. It’s only executing like filters and things that we need to so since I’m not asking for the content, we don’t apply filters. The content were like in the REST API, even if you specify in rest that you don’t want, like, I think there’s a fields parameter, you can pass, but it still executes everything. It just filters out the response. So you’re still waiting for filters to be applied and, you know, 700 different plugins to hook into that filter. And then you can also very similar to hitting like a single REST endpoint for a single post, you can make queries like this, where you pass an ID and say, Hey, I just want this one post.
Give me this ID. The ideas, they’re not the database ideas. They’re base 64. encoded,
Russell Aaron 16:41
Jason Bahl 16:41
these to allow them to be global. So you can see this with ID this actually translate to like, post one.
Russell Aaron 16:51
Jason Cosper 16:52
And that’s because a lot of sense.
Jason Bahl 16:54
Yeah. And that’s because a cache like in WordPress, you could have post with ID one a comment like that.
One a user with ID one term of ID one.
Jason Cosper 17:03
And it’s not like a slug, where there were where the slug is unique to the entire system, you needed to have some uniqueness to it. And that’s where that’s where you’re getting that.
Jason Bahl 17:13
Russell Aaron 17:14
Jason Tucker 17:15
Jason Bahl 17:15
so this can be used for caching as well. So then you don’t have like conflicts in your cache with with different nodes.
But in our Doc’s, like if you want to use custom post types, as you register, you just register, you say showing graph qL and then give it a single name and a plural name. And if it’s new, existing post type that you’re not registering like plugin is registering it that you don’t own. You can filter the post type args and just say hey, I want this post to
this other plugin to be exposed to my schema.
So that’s just a few lines of code.
Russell Aaron 18:06
So so you could do that with like Gravity Forms, hey, I want to have all my forms in the in the thing and you can just pass it through.
Jason Bahl 18:13
Yeah, Gravity Forms a little more complex because they use their own database tables instead of post types.
Russell Aaron 18:19
Jason Bahl 18:20
so But yeah, any anything that uses quarter like WordPress?
But yeah, it’s a it’s a very extendable API. We have like register graph qL field functions where you can register a field. I’ll walk through some of that, too,
Russell Aaron 18:40
is is that why your WooCommerce thing is for I mean, first of all, it’s an extension of what you’re doing. So it’s its own separate plugin, but because it’s going to get those tables and woo does its own magic. It made sense to put it in that second plug in and, like, is, is it impossible to put it into graphqL or does it just make more sense to separate it like that?
Jason Bahl 19:03
To me, it makes more sense to be like an opt in decision. Like,
Not nothing against it. I just don’t have the need for e commerce right now.
Russell Aaron 19:18
You just don’t sell anything.
Jason Bahl 19:20
Yeah, exactly. So, uh, and I think there’s a lot of WordPress users that don’t use WooCommerce, right? So why have all this cruft here in your plugins if you’re not using it? So? Yeah, that’s the motto right now is that we have like these bridge plugins for the moment, ideally, over time, if it takes, you know, steam in the community, folks would, you know, build the integrations themselves into their plugins?
Jason Cosper 19:44
I know. I got it. I got that Jason for not kind of “Jetpacking” everything. And one thing,
into your plugin. I gotta I gotta applaud you for that.
Russell Aaron 20:03
Yeah, but installing five plugins, I just have five little UI things that I click in white, it’s so much better.
Jason Bahl 20:10
There’s a trade off. So the rest of our audience
Jason Tucker 20:16
Jason Bahl 20:18
I love it. If there’s trade offs for sure. The development, I could, I could see from a developer perspective why you would bundle them all together, though, things like writing integration tests, for many different plugins becomes a lot more difficult than one plugin. Because you got to bootstrap the environment, the testing environment, many different times. And then you got to maintain the environment, many different places.
So that from a development perspective, there’s a lot of upside to keeping things all together.
Jason Tucker 20:47
So what about this custom database tables? If they do this, for instance, going back to what, what we were asking with Gravity Forms. Can you access that in any way or is there a way you can pull some data from from that
Unknown Speaker 21:00
Or if you’re maybe Russ wants to write the plugin that’s going to pull that data in. How would he start off with that? Yeah. Yeah. So actually a few weeks ago is a
Jason Bahl 21:15
draft. Yo, let me see. I built a plugin to show as an example on probably next week, we’ll publish a blog post about it. Let’s, Joseph we did, Jason Yeah, that yeah, that pulled from like meta, let’s see notifications example. So this is a quick plug in, I was helping somebody in slack a few weeks ago. So we built I built a plugin to kind of showcase how you can do this with custom database tables. So this was the table database table he was working with. So just have it was a table for notifications. And it had these fields ID highlight all the all these fields. So for this plugin, just to showcase it I you know, when you activate the plugin installs to this database table. Wow. Um and then we hook into graph qL in it too. So basically when graph qL is booting up if you’re making a graph qL request this will get called and then you can hook in a modify code if you’re doing anything else in WordPress the graph qL codes knockin execute this scroll, scroll back up a little bit to the custom to the query head. They’re a little bit a little bit more
Unknown Speaker 22:27
I know just the function name. It looks like
Unknown Speaker 22:30
yeah, so it looks like and I commend you on this as well is you’ve built proper hooks into this plug in so that people can do
Jason Bahl 22:39
a lot of plugins don’t do that. And so, so that that’s great news.
Yeah, so this one just looks into the activation of WordPress itself. Yeah, and then this hooks into graph qL initializing in so in our case, what we’re doing, I don’t have this active anywhere to show you like what this is actually doing. And Graph qL sure, but what it is doing, so it creates what’s called the connection resolver. So when we were querying a list of posts, and then the edges and the nodes, that’s what’s called a connection in graph QL. So when when a query is asking for a connection, like a list of items, we have to resolve that somehow, somehow. So I have, I’ve abstracted a lot of that data into a class called abstract connection, resolver pool, which you as a developer can extend. And what you do basically is say, okay, when somebody asked for this connection, a list of posts, for example, or list of pages, what query Should I execute, so you get to define, like the query to execute, and you want to you you as the developer implementing this one, I do the most efficiently possible query to get just the IDs. And then I’ll explain why that is later. But like WP query, for example, If you execute WP query, it gets just the IDS first, and then checks the cache and uses the object from the cache if it’s there, or if it’s not in the cache, it follows up to get the objects from the database. Right? Right. So, graph QL. What this is doing is saying, when you first ask for connection, just get the IDs and it caches it very similar to WP query. And you can actually use WP query here to get the ideas. Yeah, um, and you can define like, based on user permissions, should this execute like, I don’t know, revisions for our require authentication of views. So you could say, you know, based on a certain permission, or role or capability, you can say should execute false for example, and then it’ll still be in the schema, but it won’t execute unless they meet those conditions. And then so so that resolver gets the IDs and then we have a concept called loaders, which loaders take the IDs and they do the most efficient possible way. of getting the full objects. So I’ve abstracted a lot of this as well to make use of caching as much as possible and still use as much WordPress internals as possible here too. But this would get a list of the keys, and then load them once either from the cache or from the database. So you basically write just one function to load keys for your data. So in our case, it’s going to be just a custom SQL query. And most of the cores like actually WP query WP content query WP user query that kind of stuff. So that it can make use of existing plugins like cache plugins that hook into those internals. So yeah, you build a connection, resolver loader, and then, and then you register it to the schema. So we can say, register graph qL object type, you give it a type name, oh, this will be added to the schema as the type notification much like that. post or page or comment or user, now we have notification. And then we have the fields that we define the fields have a type, also that reference an existing registered type. And then when you give a field a type, that’s your, your contract between the server and the front end saying, hey, if you you a consumer, want to ask for something you can guarantee, like I’m promising you, it’s going to come back in the shape. So if I tell you it’s going to be a string, you as a consumer have some safety in building your apps, knowing Hey, this is gonna be a string, like I don’t have to guess. And then it can be more complex objects. Like I can have a field that returns a notification. And then I know when I query notification, it can have these fields. Okay, Jason. Yeah.
Jacob Arriola 26:47
Is this what GraphqL is, or WPGraphQL. In terms of WordPress, this is generally when I’m in a headless WordPress environment, or would I be using it in other contexts?
Jason Bahl 26:59
Jacob Arriola 27:22
Russell Aaron 27:23
but so so like, you’re you’re building PHP
Jason Bahl 27:29
looks like you froze
Russell Aaron 27:31
then you’re okay, storing that in a variable and then just building your page.
Jason Bahl 27:34
Yeah, I if you’ve ever used something like, like twig or whatever, I think it plays kind of nice with that you can you can express the data that you want. And then you have this object of data that you can use flow into your template, and, you know, yeah, so writing like, get the author inside your template. You know, you may Your request for the basically the whole template, pass it down to template parts. Yeah, there’s some there. There’s a lot of stuff of the language that we didn’t even look at. If you guys want, I can show you more.
Jason Tucker 28:13
Yeah, we have about two minutes left until the end of the show. Where can someone get a list of the different the different plugins that you already have integrations with that we can link over to our our show notes so people can kind of get an idea of what they can you know what they can play with with it.
Jason Bahl 28:34
Yeah, I have a it’s not actually on the dock site right now. But I have a poor request right here to add extensions to the docks. So at the moment, you can look in here until it’s docs.
Jason Tucker 28:51
Yeah, no, I think that
would be I think that’d be a great a great way because what’s gonna happen is people are gonna do a do a search for that, you know, for whatever plugin, they’re using. Using that they want to be able to kind of use WP graph qL with and then be able to just kind of pull that in and go, okay, it doesn’t work with this, but it does work with this. And they kind of go,
Jason Cosper 29:10
thank god there’s a dad jokes integration. Yeah.
Jason Bahl 29:15
Yeah. So, yeah, one of the best ways, right? So a lot of this isn’t on the.org repo that another episode if you want to get into it, definitely. So it’s on GitHub. A good way to find this just search GitHub for WP graph qL and hopefully you’ll find extensions that way.
Jason Tucker 29:34
Awesome. Well, hey, I want to say thank you Jason for for hanging out with us over to Jason’s we also have a Ross we also had a Jacob at a Steve so it was Thank you for coming hanging out with us. We really appreciate it. Yeah.
Russell Aaron 29:47
This is really interesting, man. And it seems like that, that this is just the wave of the future. This is gonna be I think, actually, man.
Jason Bahl 29:55
Jason Tucker 29:56
If not already is, but hey, if you want to go find out from Go over to our website over at wpwatercooler.com/subscribe where you can learn how to subscribe to this show as well as all the other shows that are on our network. We now have we also have this particular show is now in, in Apple podcasts as well as Google podcasts. And we just added it as Spotify. Yeah, and if you want to find us you can go over to patreon.com/watercooler. You can find us over there. talk to y’all later. Have a good one. Bye bye