Gato GraphQL Webinar Series #2 – Integrating with Gutenberg, Customizing content for users, Duplicating posts

This episode of the WPBuilds podcast is brought to you by GoDaddy Pro, the home of managed WordPress hosting that includes free domain, SSL, and 24x7 support. Bundle that with The Hub by GoDaddy Pro to unlock more free benefits to manage multiple sites in one place, invoice clients, and get 30 percent off new purchases. Find out more at go. me forward slash WP Builds.

Hello there, Leo. How are you doing? Hello, Nathan. I'm doing very well. Thank you. How are you? Yeah, great. It's episode number two. We did an episode last week in which Leo this is Leo. You can probably tell because it says Leo under his face. Leonardo Lozoviz, he's the founder, the developer.

Creator of a fabulous plugin called Gato GraphQL. Unfortunately, the Gato has disappeared from the window ledge about two minutes ago before we started the call. Gato means cat apparently, and there was a cat perched on the window ledge, but it's gone. But we're going to talk today. About the we're gonna begin the journey into the complexities of what Gato, GraphQL that plugin can do.

Last week we did an episode in which Leo just explained the UI a bit and showed you around and what the options are and what have you. And this week we're gonna get into I'll just summarize it at the beginning for those people who are watching it after the fact integrating with Gutenberg, customizing content for users, duplicating posts, and so on.

And then Leo's going to do six or seven different tasks during this episode, and we'll find out what they are. But is there anything you wanted to say before we kicked off and shared your screen? Or are you happy for, to do that right away, Leo? Yes, let's say that we have a discount. If you want to purchase the plugin that I'm going to show 30 percent discount just for you, for WP Builds attendees.

So I'm going to show you now which is the landing page. But it's basically gato graph ql dot com slash WP Builds. And if you click there on the on the button, the 30 percent discount is already included. Oh, that's really you. Thank you for doing that. I should say that we are gonna be posting all of the videos as we produce them the following day or something like that.

I will put them on the WPBuilds website. And the easiest way probably to discover where they are, if you go to WPBuilds. com, and then at the top is a menu called Archives. And if you go to the Demos archive you could just go to wpbuilds. com forward slash demos dash archive, and you'll get there and Leo's are the most recent ones they're mixed up with all sorts of things that we've done over the years, but yeah, thank you for that.

That's brilliant. Nice discount for WP Builds users. The posts will be there and I will also link to the pages on Leo's website so that you can go and avail yourself of that. If you'd like just a couple of bits of housekeeping. If you are watching this live that's great. Thank you so much. We'd love to have your comments.

The easiest way probably to do that, depending on where you are, if you're on YouTube or something like that's fine. You can just comment there. We'll get those. If you're on WP Builds. com forward slash live. You will need to be logged in to a Google account because we use face sorry, we use YouTube comments in the little box on the side.

That's great. Alternatively, if you do go to that page there's a slightly new thing, which is, I think this is the first week we've actually been doing this. You'll notice that inside the video is a little live chat box. It's in the very top right hand corner. And if you don't want to be logged into anything.

Then you can just type your message in there. So that's the URL that you can see on the screen. WP Builds. com forward slash live. And then yeah, just log into the little bit at the top or you'd have to log in, just write your name and you can post us a comment there. But I think that's probably it.

So let me remove that. And shall I share your screen? Leo, are you ready for that? Yes, let's go for it. Okay, here we go. Whoa, yeah, feeling a bit seasick there. Okay, let's carry on from last week. Yeah. So a bit of housekeeping, if you go to gotographical. com and you browse here all the way down, you can click on this button to test the plugin.

And I just changed, I just upgraded my InstaWP account. So now you can play with it for seven days. So nice. Yeah, next episode will be on seven days from now. So now you have your homework. Yeah, basically today you watch what we're doing. Actually, if you want, you can do it right now. Click here and you create a new sandbox site and you can copy paste all of the same examples, play with them.

You have any problem, you let me know. And the next week, one week later. You have to show me the homework. Nice. So yeah, this is a the housekeeping that I wanted to mention. So let's start today. We're going to have fun. I promise because last week it was an introduction to the plugin how it works, what it's supposed to do.

But today we're actually going to see the things that it does. So this is the plugin and there's here a section called recipes here and basically is. Recipes on GraphQL queries that you can copy paste to do the tasks that that we want to do. And I myself, let's, I will make the screen a bit bigger.

I myself use this recipe section, so now I will browse down to the recipe, copy the query. Past it. See that it works. Hopefully it will work. And then I will explain how it works and hopefully Nathan, if you have any doubt anything calls your attention you can ask me to. Yeah, I will do.

Yeah. Thanks. Yeah. But basically that I'm going to give you a copy, paste presentation. It's a bit lazy, but it's the best way to do it. So no, not here. This is a program for today. We have from last week. The three items that we didn't have time to do it. So let's start with this. So the first one is searching WordPress data, like finding posts or users by metadata.

This is the first item that we're going to do that. So here on the recipe section, there is this recipe called search WordPress data. I click there, and it basically explains what it can do. And so it's, there is a query here that says, this query retrieves all posts that have a thumbnail and those that do not.

So let's copy this query. And here I click on the graphical client. Let me, I have it open. I just close it here. Let's close this. And I paste the query. I run it. And okay, we will see the response. But what is this? So here we are fetching all the posts. And I'm filtering them by the, I want to retrieve the post where there's a key, a meta key called thumbnail ID that it exists.

And for all of those, you give me these fields, the ID title, and then the feature image, which is basically the thumbnail, right? And then I also query all the posts where the thumbnail ID does not exist. And for them, as you can see, we're not querying the feature image because there's no feature image, right?

So here on the response, we have. The post with thumbnail on one side and then the post without thumbnail. So this is something that we can query. It's very powerful in querying by metadata. So let's keep scrolling down. I will copy another query. This one will retrieve all the users where they have the locale being from Argentina.

Spanish from Argentina. All of my compatriotas. So if I run this query, we can see here. The locale in this case is ES underscore AR. So I'm filtering all the users with the meta locale with this value.

Let's now do a bit more complex. You can have two different. Conditions and then add them with an and or with an, or, so this is the same functionality that you have in WordPress in the backend to filter by metadata that now this is available through GraphQL. So in this case, I'm asking all of the posts here, all of the posts, which have a thumbnail ID meta and a to do action.

I don't have any in this case, so as you can see, this is empty, but if I change this relation from and. Yes to or, and now I run it again. This works once again, these are all the posts which have a thumbnail. We keep scrolling down and then we can combine also with more ways to filter the data. So this query is going to filter the posts which do not have a thumbnail.

Do not have yeah. They, that were created after this date, the 20th the 1st of July, 2020. And they have a tag WordPress. If I run this, actually, I should actually say which is the date. Show me the date. And we can see that this fulfills all of the conditions. If I say here if I said here after this other date, there's nothing because that one did not fulfill the condition.

So you can combine a lot of different conditions and fetch data very granularly. And this is the last one that we will see in the moment that you can also use regular expressions. To fetch by metadata. So before we saw all of the users with locale from Argentina, ES underscore AR. In this case, I'm saying all of the users from Spanish language for any locale.

So if I run this, I have this user, which is from Argentina, and this other one, which is from Spain. So this is very powerful that you can bring data by regular expression. Wow. Yeah. Yeah. Okay. So this was the first recipe that we saw. Second one is querying dynamic data. Let's go back up. Querying dynamic data.

Okay. If you're using the plugin and you click on the recipes, you will see this that it says extensions, references in this recipe, show details, and it talks about the extensions. So this is. You need to have the pro version of the plugin, like some of the commercial extensions to run the full functionality that we will see in this example, some of them that require some of them they do not require.

You can use the plugin, download the plugin and access all of the WordPress data and some more special functionality that we're going to see now. You do need the the commercial version of the play the extensions, basically. Okay. Okay. So what we're going to see now is something that is quite specific to Gato GraphQL.

This is GraphQL It's something that GraphQL, if you're used to using GraphQL from other frameworks or... Other providers they will not have this. Okay? I'm quite keen on this. I'm very proud of yourself. Very well done. Yeah. Yeah I'm sorry. But yeah, why not? Yeah. So what this is that you can run dynamic fields.

So you can see this one, this field called time. That basically is bringing the time right now. If I click, if I run this again, And again, it gives me a different time, right? Yeah. But then you have this other field called int substract, that it takes an integer, and then another integer, and it computes the subtraction, right?

The difference between the two. The difference between the two. So in this case, I'm calculating yesterday by getting today, and subtracting from it the seconds equivalent to one day. So then this is the time for yesterday, time 24 hours ago. Given that I can create a date and then I can filter all the comments in the last 24 hours.

So just now we saw that we could filter a post by after, and then you give a date and that date was hardcoded in the query, right? I am, I was saying 2020. 0701, like 1st of July 2020, but now I can say, whatever day it is today, give me the comments that were added since the last 24 hours ago. Now, in this case, I don't have any, but I do make that significantly bigger.

Yeah. Now you've got 23 comments from. Starting from 1996. Okay, so this field, it's It's global. It can be used anywhere. And the reason is that this deep product functionality. So in GraphQL, normally, when you fetch data, you do something like this. You say, okay, posts. And for all the posts, give me the tile and the author with... The name you run it.

So this is data. Every post has a data field, the title and the author and author has a name. This is data. So in this case, the title can only belong to posts. That's how GraphQL always works. You have a type. Which is the post and all the fields, the tile and the author. In this case, the author is a type user and it has a field name.

They belong, the field belongs to the type. But this one, time, it does not belong to post and it does not belong to user. It belongs everywhere. So I can also do. I can do this, and I can do this. Oh, okay. It goes in any subset of anything. Got it. Yes. And this is very practical for reasons that we're going to see next.

But so basically, we have, what I have done in Gato GraphQL is to map all of the different functionalities that you have in PHP and brought them as fields. So you have the field called array item, array join, date, equals, in array is empty, is null, et cetera. This is going to be very powerful because now we are going to be able to compose a GraphQL query that it receives an input, it processes some logic, if you were PHP, and it gives you the response, but now you don't need to deploy any code, you don't need to modify your functions of PHP in your theme, you don't need to create the plugin, you just come to the WP admin, to the graphical client, you copy the query, paste the query, run it, and you have the functionality in like I don't know.

One minute. Yeah. Let's copy this. So to to show how this is functionality here, we have the post that is returning the excerpt. And then here we have this field is empty. That is basically saying is the excerpt empty. And this one is saying, give me the opposite of this value. So if I run this here, this one post has an excerpt.

It's empty, except false is not empty, except true. Got it. You can actually compose functionality with this. So now this, yeah, this query is basically the same that we saw earlier. But what I'm basically doing is I'm getting the comments added in different periods. I can say, give me all the comments out in the last 24 hours, other in the last one year since the beginning of the month or since the beginning of this year.

And so basically you can. You can create a functionality here in within the same GraphQL query that computes a date and then it performs the query with that input that we just created dynamically. Got it. So just to be clear the bit over to the right there that you just showed us that was in green at the end of the query that you've just.

It's hidden. It's hidden. Yeah. Yeah. Yeah. That this is, are these queries that you've created or are these where you're referencing there where the mouse is where the cursor is hovering at the moment? Is that something that you've written or is underscore time beg of month?

Is that of this month? Did you write that query or is that part of GraphQL? Okay. This is a variable. Time, big of this month, which actually comes from this one. Okay. This is that's what I thought, right? Yeah. Okay. I'm sorry. I should actually explain this. Let me put a bit of order here because it doesn't look very good.

Nice. It's not on the screen, right? Let's do the timestamp. Here we go. This is something else that we have in Gato GraphQL that is not standard GraphQL, but it's so useful that I just had to do it. You have here, yeah, it's really like that. So you have here this field, make time, that I have, I created an alias for this.

This is something from GraphQL that you can, if I remove this, Let me remove this alias and I run this query, but okay, I need to comment everything is this field is called make time and the response will be under make time by doing by putting an alias. Now the response will be under this alias. And you can use that again elsewhere later in this query.

Yes. So they say a functionality that I have created, which is that the field, the value of the field that you just queried is available as a variable. Got it. With the variable being the name of the field and then these two underscore right before. Okay. Got it. So then basically what I'm doing here is I'm computing dynamically a value, the time beginning of this month.

And I'm using this value as input to another field on the same query, in this case, date. This is something that you cannot do in GraphQL otherwise. GraphQL is not it was not thought for dynamic queries. It was thought mostly for static queries. So the, if you use variables in, in GraphQL, you will always see that the variable has to be defined on the operation.

It will be something like this query. Get comments and then here you define the variable, like time of type string or whatever. And you have to provide this variable in advance as part of the query through a query variable here. You will then say, okay, time. And then whatever, something.

Okay. This is different let's remove all of this. In that the variable, in this case, the variable called underscore time beginning of this month comes from the query itself. It is dynamic. Yeah, that's amazing. So you can just stack them on one, on top of one another.

Basically, what you can, Yeah, so what you can do is, you fetch data once again, you get posts.

And here you have, and then you can do something with the title here. I would just repeat it. Yeah.

So I'm just doing an echo of the same value, but once again, I could say is it, is empty. And it will say false. So you're fetching data and adapting the data to some state that you need, and then you do something with this, right? We will see this time and again on, on the upcoming examples.

Nice. Yeah. That's great. That's so powerful. Let's continue here. I have this, the same query as before, actually I will show the first here we're inputting this string with the format of the date, format, year, month, day to create PHP. If you do, if you go to PHP, this is how you can do it, but in PHP, this string is a constant is called date underscore.

ISO 8601. You can also access this value through this field called underscore m. So now if I run this query, you can see here on the response that this is the alias, right? This value of that, of this constant that comes from PHP. Nice. So I'm retrieving this constant from PHP, and then I can. Here, reference it as a dynamic variable.

Ha. You're formatting the date in there it is. Date 24 hours ago is in year, month, day. Great.

That's neat. Okay, end of this recipe. Next one. Okay. And this is where it starts getting like very useful complimenting WPCLI, for instance, selecting on which resources to apply a command. So let's go to the recipe on WPCLI. So WPCLI is very powerful. I think that we all agree on that. We use it all the time because we can automate tasks.

We have a command WPCLI command. That you can update the post or create a new post or select information or add comments or connect remotely to a server and do all of these things. And you can also concatenate commands in such a way that you execute a command with WP CLI to fetch the ID of a resource.

And then having this ID, you execute another WPCLI command on that resource. So this is the example here. I have a WPCLI instance here. So let's run it. If I do this. I have it running with Lando, that's why it shows up all of this. So here it gives me the ID of the post with name hello world. Okay, number one.

This is because I added this parameter format IDs. So showing you the ID of that post, got it. So then in WPCLI, we can do something like this. That I execute a command. This one first, and this will be input into another command. So now I'm basically fetching the ID with, which is one, and then it will execute an operation on that.

Okay. It updated the custom field. So here in this part where we're inputting the inner command, instead of using WPCLI. Now we can use GraphQL. We can query data very granularly, get the ID of whatever resource we need and then call WPCLI with it. So we will see one or two examples with this.

So this is something that we saw before that is very powerful to Fetch data, searching by metadata. In this case I'm searching for all users from Argentina with a regular expression. Sorry. This is all users from a Spanish language, just limited to only one. I would say two. So now if I go to the terminal, this is the same query, but it's written like this in just one line for the terminal.

It's basically the same one. And I copy this query here.

I need to change the endpoint to my server. Yep. Yep. And now if I run this, here we have the response from the GraphQL server. Okay? Now, you can see this is still not very useful, right? Because the ID... is this one. It's not, it has not been extracted that yet, but we can extract it using another like a command from bash.

So what I do is that same thing, I will assign it to a variable GraphQL response and environment variable in, In the terminal. I need to change this again. Yeah, one more time.

So if I echo this variable,

now we have the same response as before. Yep. And now, I can extract, this is, oops, what's going on? Oh dear. I can extract the ID with some other command. Let's see what is here.

Echo, there it 3, got it yep. So then there we go. Now we can execute this command.

And now I have updated the user who was from our, let's run this query again. This guy from Argentina is gone because he doesn't have French. Yeah, he's now French. This guy is French. I don't like it. Sorry, let's go. He wants to get back, yeah. So now he's back to being Argentinian again. There we go. There he is.

Perfect. Okay, so now we... Yep. Great. Yeah, so we are basically using, sorry, we're basically using Gato GraphQL on the inner, for the, to retrieve the data. And injecting that into the WP CLI. That's so powerful. And then here I'm going to skip this because we don't have a lot of time. Okay. But basically this is not very elegant that you had to input the query like this.

It's not very nice. So one thing that you can do, you can still write it like properly here. Or you can also store it as a gql file that basically then you have the syntax. You have highlighting the syntax and then you can read that file. So in a way it's you're good to go with one way or another.

Got it. Got it. And there's another example with WP CLI, which is very useful, which is to select multiple resources at the same time. So this uses a feature from Gato GraphQL called multiple query execution. And I'm going to show you what this is. Okay. Thanks for joining. Okay, so in the previous examples that I was demonstrating, there was always one query.

Here is a query, something, and that's it. Now I have two queries, query retrieve data, and query format and print data. I will run the first query first, retrieve data. This is doing exactly what it was doing before. Wait, you had an option there to pick one or the other. What did you do? Right click on the...

Okay, yeah, exactly. This... Okay, so this is called... Whoa, let's... Let's close this. This is called a GraphQL document. And in a GraphQL document, you have operations. An operation can be a query or it can be a mutation. You can create a post, update a user. Anything that mutates the data. And you can have as many as you want, but you will always execute only one.

You have to specify which is the one that you're executing. So this is what the graphical client is telling you. You have two queries in your document, retrieve data and format and print data. Which one do you want to execute? Got it. So if I execute retrieve data, I'm getting exactly what I was getting before.

Now, I was saying that I want to extract the IDs of the users and inject that into WPCLI, but I cannot use bash like I was doing before because this is more difficult. How do I extract these three from this ID and these two from this ID? My, my bash knowledge is not good enough for this. So what you can do is you create another query that We'll modify, we'll extract these IDs and print it on a more convenient format.

Let's do that. The space between them. Got it. Yeah. Yes. Here we are. So what this guy is doing is. It is obtaining a dynamic variable that is called user IDs that it comes from here. This is exporting the IDs of the resources that we just selected. So in this case, we are selecting users and we are selecting the ID from the user.

And I'm saying, export the ID. If I actually, I can print the data, what it is, we call value. User IDs. I run this and I can see what that dynamic variable has in the moment are the IDs three and two. Yeah, they come from here. And then this is the PHP function that I was saying how useful is going to be.

I do an array join of this. Array separating them with a space. So then this is a different bash command, but it's pretty similar and the response will be that three, two. And once you have these, then you can execute WPCLI on those multiple

IDs in just one operation, or maybe with a four. Like in this case. Yeah. Yeah. Yeah. Yeah. So then this is so powerful because you can do bulk operations combining, you can extract. Plenty of resources and call WP CLI for all of them do an operation on all of them in just one with one query.

That is neat. It's so powerful. Okay, this one is done. So this is the end of the previous episode. And today we're starting this episode. We're halfway through this one. Yeah, let's see. I might need to speed up or maybe next. Okay. If we run it if today's runs into next week, it's fine. It doesn't matter.

It's all good. All right. So next one is feeding data to custom blocks from your application. Here we are. So this, I'm not going to demonstrate any code here. I'm just going to explain the idea. Blocks Gutenberg blocks. If you want to fetch data for your Gutenberg blocks right now, you have the WP rest API, you have to create a controller.

Expose your data, fetch it. If you can use GraphQL, why not? You don't have to create any controller and you can see. You operate everything from the WP admin. So the plugin, the graph, geographical plugin gives you an endpoint already that you can point to ba to get the data and the way that it works.

Then in your block it, it will be typical JavaScript that you connect to your endpoint. In this case, the endpoint is under a variable, it's called Graphical Block Editor Admin endpoint, and you provide the query here, and when you run this. Eventually you will have the JSON response with the data. So all I want to say with this is, you can use the REST API as you are doing right now, most likely, or you can use GraphQL.

Now, why would you, Oh one thing that I want to mention is that one of the cool things of building a plugin on GraphQL is that it has GraphQL enabled. So I'm using GraphQL to power the Gato GraphQL plugin itself. And I'm going to show you how it works actually. On the previous episode, we saw schema configurations.

Yeah, we did. Yeah. Which is a way to configure the, all of these endpoints, the different, the custom endpoints and the persistent queries. And here you have all the options to configure. So there's one option here called access control, and I'm going to show you what happens. scenes, let's go to the network tab.

Let's make this a bit bigger.

I have here a tab called GraphQL network. So when I click here on access control, what is doing is it is executing a GraphQL query here, it is that it gets all of the items, all of the access control items, which are all of these. That is just fetching the response is this one. Okay. So what I want to, yeah, what I want to say is if you want an example of this actually working on an actual plugin, you can download the source code of the Gato GraphQL plugin is on GitHub is here on, on Gato GraphQL slash Gato GraphQL.

And on the recipe, it, there's a link here below on to the source code. So it demonstrates how this works. Got it. Now I'm not saying that GraphQL is better than REST. Okay. I want to be clear on this. It's different. Some people like it more. Some people like REST more. They know. They know right and wrong, but on the next recipe, retrieving data for blocks for both client side rendering and server side rendering using dry logic, we will see why GraphQL is superior in some aspect, which is when you're building dynamic blocks, you need to render the block twice, once on the front, on the client side on Gutenberg, and once on the PHP side to render the block to print it on the page.

One with JavaScript, one with PHP. And that is unavoidable. Actually, there are many experiments going on to try to make this less painful. That's a good way of describing it. Yeah, it's unavoidable. Because, yeah, it's how it is. Yeah. But with Gato GraphQL, what you can do is you have, you can have the same logic just to fetch the data.

So the GraphQL query that we saw before in the JavaScript. Instead of passing it inside of the JavaScript logic, we can extract it into a GraphQL query, okay? And then we can execute on the Gutenberg block. We can import the query from the file and retrieve its data same as before. But now that we have this file, a graphql file with the query, we can also execute it from the back, from the backend.

So they say a function called execute query in file that I provide with the, with one of the extensions. The extension is called internal GraphQL server and it allows you to execute a GraphQL query against an internal server in this case. And you're passing here, which is the file with the GraphQL query.

There's no endpoint here. They know they no need to expose any data. It's all internal to the PHP. Then you retrieve the content here and then under data, you have the response. So this is nice because now instead of having to fetch data with the REST API on one side and then using PHP functions on the other side.

Now you have only one, one thing to do, right? Yeah. So this is very useful. Again, all of this is linked. It's inside the plugin. If you look at the plugin, all of this is there. You can see it's on the recipes section. Yeah. Yeah. Actually let me mention something. If you don't have the plugin installed on gattographql.

com, you also have the recipes section, it's all there as well. Nice. It's exactly the same. And I'm actually adding recipes all the time. I created one recipe today. With WP to automatically submit my a newsletter subscription to my MailChimp account. and that, yeah, I just create, I can show you.

It's actually quite cool blog. Here it is. Let's do this a bit bigger. So I'll mention that I'm using WP to collect. To allow people to test the plugin and people can say, and subscribe to the newsletter. And what actually happened here, subscribe to the newsletter. What actually happens at instant WP doesn't give you the email.

You have to I don't know, it's a bit, it's a bit it gives you the chance to put a webhook and then you have to go to some no code platform and export this data to a Google sheet. And from the Google sheet, you copy the value and then you go to your MailChimp account and you paste it. It's like It was a big process.

Yeah. Yeah. Too much trouble. So instead of doing that. I can have the webhook being my own plugin with a persisted query that I copy. I created the GraphQL query and I paste it there and this query will call MailChimp and add the user automatically. So here it is InstaWP and that's where I enter my webhook URL, which is a persisted query with a GraphQL query.

And the query, okay, the query the web hook will be something like this

and the query that I store inside looks like this. This is what we were looking at just now that it has two operations. It has this query to check if the user has subscribed to the newsletter. Basically I get the payload. Hold it against your already subscriber list. Yeah. It's called marketing opt in and I, I can check if this marketing opt in was true, but InstaWP doesn't tell me it's true.

It says if it is false, it gives me the. Okay. Not applicable. Not who knows. So here we can see that I can collect this field from the body of the web or the payload. Oh, sorry. With this one, I check if it exists, if the parameter exists. With this one, I get the value. With this one, I get if the value does not equal NA.

Then you want to keep going. Yeah. And then I do an AND. If the value exists.

And that means that the user subscribed to the newsletter. And if that happened, then execute this other query that it connects to MailChimp with what value it gets a subscriber email from the payload. I get my credentials and I call the MailChimp API. And we are ready to go and it's all automated.

So now that is so neat. I got it. I did this yesterday , you should you should tell that the folks at NCAA WP about this is great. I did I, because I told him today, and let's see if he shares it on with his social media. Let's see. Let's see. Oh, there's your cat. It's back. Your cat's back.

There we go. Yeah. Nice. Yeah. Okay. So that's brilliant. Yeah. Sorry. We got sidetracked. Yeah. This recipe is not on the list I just created today. And all of the recipes are solving a use case that we have here. All of them exist for a reason. Just come here and explore all of them because it's actually really good.

But anyway, I think that I got too carried away with this. Let's go back to the program. This one you will like, Nathan, because this one involves Gutenberg. Lovely injecting. Yeah. So what are we doing? Retrieving and exposing structured data from blocks. Nice. Okay. Yes. Okay, so here we go to this item called, we'll see this one next, but I will just copy this query from here.

Oops.

I copy this query. Oh, let's close this. We don't need this anymore. This I have a variable here. This is a static variable that is the post id. And I should have, yeah, here I already have it, a post ID with ID 40. So if I run this I'm fetching the post with this ID, with the title. Yep. There we go.

Ooh, a block data item. And there's a field called block data items. Yeah. That it retrieves all of the attributes. For all of the blocks in the post. So here we have a paragraph with the content, drop cap, false. Then we have a heading with the content and the level of the heading. Another paragraph.

In this case, it has a style. A separator block with the opacity CSS, core image block, it gives me all the properties, align wide, the URL of the image, the alt, and so on, and so forth. Wow! There it is. So that's every block with all of the different bits and pieces that are associated with that block and its settings.

Not just the content, but all of the different settings as well. Yes. Nice! And it's easy. You can also there's this, there are different fields to get this data. Okay, so let's go back a bit to theory. GraphQL, it's about types, strict types, that basically you have all of the different entities on the schema.

You have the post, you have the user, you have the comment. And supposedly, when you're dealing with post, you're dealing with post. When you're dealing with user, you're dealing with users. And you shouldn't mix them up, okay? It's the same with blocks. You have the core paragraph block. You have the core image block.

You have the separator block, and etc. And all of these blocks, they have different properties. In a typical GraphQL world, You need to have a different type for each of these blocks, and then you need to fetch individually the properties for each of them. So basically, instead of these blocks data items, there's another field called blocks.

And then there on the blocks you'll say, is a block is of some type. Then you give me some properties. If it is of another type, you give me some other properties and so on. But you have twenty hundred or twenty thousand blocks. You don't want to be dealing with one by one.

Then, Gato GraphQL, you have the two options. You can fetch the blocks and then specify type by type what attributes you want to fetch. That is very proper, but very annoying. Or you have this other one called block data items, that it just gives you all of the properties, whichever they are, and then you can have some logic on the client side, here with the name.

Then you can say, if the name is core paragraph, You will need these attributes. If it is core heading, you will need these attributes. And this is the way that you normally work with WordPress. What I want to say with this is when I was designing Gatto GraphQL percent pure GraphQL because it needs to be adapted to the reality of WordPress.

When you have 2000 blocks. You cannot do strict typing. You can still do it if you are, if you really want to do it, I give you the option, but it's not saying you, you will get crazy. So then you can also do this the easy way with this other field called blog data items. And you have all the data that you need.

So what can you do now that you have all the data from Gutenberg and it's not a properties in a Jason object. What can you do with this? So this is the next recipe that you can now map individual JavaScript components to blocks. For instance, if you are building a headless site or you have some dynamic functionality, instead of rendering on the backend, the block, you can now do it on the client side and fetch all the properties.

Customize your block with a JavaScript component. So let's do that, that in this same recipe, do that is here an HTM L. Yep. I will copy all of this. HTML.

Here we go. I will paste it here. Let's save it as some H tmm l blocks. ml. Save. I need to change the.

Yeah, whatever it was. Yeah. And I give here on, on the recipes, you can check that I give alerts here. It says configuration alert. You need to have this configuration. This is where it's this is what is really powerful. The idea of having custom endpoints that you have on this plugin that you can customize every endpoint to a specific.

Origin, for instance, so for this example to work, I will need this configuration. So I have created a custom endpoint. Let's open this on a new window which is this one. So I need the custom endpoint, which is this one. Now you can paste that in. I will put this in

here and let's load this blocks HTML here and let's see what happens. There we go. So I'm basically rendering on the... Sorry, it's just the pictures. That's great. Sorry, carry on.

More. No, stop. Stop. This only goes one way. I don't have any more. So this is the type, this is the header. Yep. What's the name? Yeah. Is this the H2 or something like that? Yeah, exactly. Yeah. This is a paragraph block. Yeah. This is the image block. Yeah. This is all now fetching all the data. We can, I'll show you once again, let's see what is happening behind the scenes.

I will refresh network as we're here.

So what this thing is doing is calling the. The GraphQL, the endpoint that I just provided. Yeah. This one, this is a request that is passing this query that I just showed you. And this is a response that we get blog data items. Yep. There it all is. Yeah. With all of the blocks. And so basically then I can render the page on the client side.

Let's close this. Bye bye. Bye bye. Oh, cute little dogs. That's amazing. Let's continue sending personalized emails. This is one of my favorite ones. I'm trying to imagine what's going to happen here. Okay.

Okay. Oh yeah. So we're noticing there's a lot more, there's way, way more recipes than Oh yeah. That, that will come in the next episode. Okay. As I was mentioning, we have queries and we have mutations. So there's a mutation called send email. That basically sends emails. It uses the functionality for, from WordPress.

So whatever you do, whatever you configure in WordPress, when you said that the SMTP provider, this one will use all of that. So you can send an email as text as HTML. I have here the mailhook. Mailhook is this client that consumes emails without sending them. Yeah. Yes. So now I'm going to. I executed the mutation.

And if you go here, oops. Oh, there we go. I can see that I just sent two emails. One email with HTML content. Yeah, and one with the HTML. One with text. Oh, sorry, the other way around. Yeah, nice. Let's just delete this. Okay let's continue. Now Here I'm composing this as plain text. Yep. And this one I'm composing with HTML.

But who likes writing HTML? No one, we all love Markdown. So now let's send an email, but composing the email with Markdown. So here I have a function, a field slash function called string convert Markdown to HTML. So I provide Markdown. I would just execute this first query. And what it retrieves is the HTML.

So now I can basically compose the email. Markdown and send it as HTML. Let's do that. Send email. Go back. If I go here, refresh great news. Yeah. It is. And you can see how it is. And you got that. Yeah. The bold is in there. Nice. It has the links. It has the. The italic, bye bye.

And here it gets really cool. We're going to make this dynamic. I'm going to select data. That's the golden goose, isn't it? That's the one, yeah. This is the reason why you want to use this. I get data from the database. The post that I'm providing the ID. And I get the title, the excerpt, the URL, the author.

And I'm going to inject this data dynamically. Into the body of the email. Exactly. So what I do is I create here this query with this string like this and this string like this. And then I have a field called string replace multiple that then you provide that same string to search and how you replace it.

And this post author name comes from here. It's a dynamic variable. It's what we were looking at before. I'm fetching a value in this case, the author name, and I'm exporting this value as a dynamic variable under the name post author name. So now in the next query, I can reference that. Let's see what happens when I'll just execute, I execute this step by step first, get post data.

So this is the data. There's the email. Yep. Sorry. No, that's the post data. Got it. Yep. Get email data. It retrieves that data. It has here the template and then it replaces the values and this is what I will get as the message. Yup. Yup. And having that, I just have to send the email. So let's execute the whole thing.

Send email. And if I come here, now you can see that this data. The editor Smith is the author name and a link to the author profile. This is the title of the post. This is the excerpt of the post and then a link to the post online.

This is where it starts to get really interesting, isn't it? When you start injecting all the dynamic stuff. Yeah. Yeah. I cannot stress enough how useful this is because we, I think that we all have some plugin that you can compose Email, and then you can replace certain variables and then you send the email.

What happens if you don't have that variable? What happens if you need to retrieve the POST tile and it doesn't give you the POST tile? What do you do? You go crazy. Here you have everything. Yeah, in here you could write the logic just to, I don't know, just bypass that all together. If it's null, then just move on.

Leave it blank or yeah. Yeah. Yeah. Yeah. And this example, we will send an email to the admin of the site. So basically you can send a notification to yourself and you can see the email. Yep. Instead of hard coding the, before I was the tool here, I will hard code in the email. I was saying, whatever, Leo at my email.

com. Okay. Now I don't want to do that. I want to get the email, oops. From the which is the admin email options. Yep. From the WP options table under admin email. So export data. It is telling me my email on the system is this one. So now I can send an email to me, whoever I am.

Here it is, it, send it to me. Perfect.

Oh, it's staying around.

Okay. Oh, and this one is a final one sending personalized emails. So basically I will fetch a bunch of users and I will send an email to every one of them being customized to them with their own data. So you're going to, you're going to stick in. So this is going to cycle through a bunch of emails, swap out the email address and the name and give them something bespoke.

Got it. Yes. Now this one, if I run it here, it will not work. I will just run it and show you that it doesn't work. So you have confidence in me. Yeah, perfect. It doesn't work. This one doesn't work because this is also something that we have in Gato, GraphQL that is not standard GraphQL. Some providers, they have it.

Most of them they do not. That is called nested mutations. So a mutation is something that mutates data. Yep. Send email in mutating data. So it is a mutation. In standard GraphQL, the mutations are always on the root type. Which is this mutation type. But what I want to do here is I want to iterate the list of users.

And for each of them, I will compose, I will get the data, the email, the name, and some meta value with the credits that they have on my website. I will calculate if they have credits or not. What is the number of remaining credits that they have? I will compose a query, sorry, a message saying, hi, you have these many credits in your account.

Would you like to buy more? And I will send the email. So this is the mutation and the mutation is nested inside of these users. Yeah. So what I will do is I have a custom endpoint once again, with this feature enabled this just now the graphical client didn't have it enabled. Here I have one that is called nested mutations that we have these nested mutation feature enabled.

So we'll click here on graphical. And now this is a graphical client that allows that. So then let's copy the query here

and now I run it and let's see what happened. I go back to Mailhug. Now it iterated all of the, okay, let's go back to the query one second and then to the results. Gets all the users in my website, gets the data for them and composes a message for them. And sends an email. If I come back here, I see that this one was sent to admin at example and say, Hello, admin, you have zero remaining credits.

Now, the next one, it goes to blogger. Hello, blogger. He's also got none. Yeah. Because everyone is poor. Everybody's got none. No one pays. No one wants to buy a subscriber, zero. What else? This guy, contributor Johnson nobody's buying anything, but all of these emails are personalized.

And all it took is one GraphQL query. Could you write a, could you write a sort of like a wait condition in there just to not go like through 3, 000 emails in 12 seconds, you could, I don't know, send a hundred and then wait for 10 minutes and then send a hundred more so that your SMTP provider doesn't go bananas.

Yeah, we have that. We have I think that we will see it in one of the. Actually, I'm not so sure who will see it. I don't remember, but in the recipes, whoops,

there's one called updating large sets of data. Ah, neat. Okay. And it basically says that what happens if you have 3000 posts, what do you do? So here he gives you a couple of strategies. The first one is, okay. So one thing that I didn't mention, we can go back here. They will not work. It will fail here, but it's okay that you can but, oh sorry.

He will not, let's just change this to query. Let's delete all of this other stuff. This will not work anymore. So here we are back to fetching all of the users. But you can paginate the results. You can say pagination. Limit. Now you will only get three results. Got it. So instead, facing your 2000 users on the website, you can say, gimme 20.

Yeah. And you, and then you give an offset and then you keep iterating, right? Yeah. Yep. Okay, I see. Okay, nice. Perfect answer, . So being that the case, then you have. You can actually paginate it and execute the same GraphQL query that we saw before with the bash that you can input this in bash.

And you get the number of, in this case, the number of comments that you have on the website. And you have a few commands here to calculate how to paginate it how many pagination count you need to call. And then you call, you do a slip. As you were saying, Oh, there we go. Sleep. We do a sleep and then you get a pagination number and then it executes the query. Okay. And it is iterating. Goes through page one. Sleeps. Goes through page two. Sleeps. Yeah. Yeah. Yeah. Limit how many items to process and then offset. The imagination number, not number right times interest. Yeah. So then you can do that.

That's the first strategy. And the second strategy that is something that you can only do with GraphQL, is that the GraphQL query can be recursive. It can call itself. This is a bit crazy. I don't know if we should look at this because God, you've opened it up. Now , you have a graph code query.

Okay. That why do I'm trying to imagine a scenario. Why do I pay attention to you, Nathan? There's a field here called HTTP request full URL, which is myself. Okay. You have requested me. This is a URL. Also, what method you have used to invoke me, the headers that you have provided you also can get the cookies, you have the URL params, you have all the stuff from the request.

So having all of these, you can recreate a call to yourself passing parameters. So then, where is it? Execute euros. So then you can okay. I will execute conditioning. One query. If this condition, if execute query is true, I dunno where the execute query is. We have to find it. If execute query is true right at the top, it is, it, oh, okay.

Here we go. Okay. The condition is at the very beginning if you're providing the offset. Variable, then execute query will be true. If you're not providing this, it will be false. That means that when you call it the first time, you do not provide the offset, and it will basically calculate all of the different pagination numbers to call itself passing the offset.

And when it does that, it will execute itself. Only then it will execute the query. What, which query will do. The one here, which is to send the HTTP request against this new URL that you have done. And then in, in there, it will execute this other, the actual query that we want to in this case is not doing anything, but here is where you, in the logic, you'll say update post or send email to users or anything.

Yeah, it's, this is a recursive GraphQL query. Only for those with a very high nerd value may attempt this one. Okay. This is very useful, we're on episode two. Yeah. Yeah. We've got in deep. We've got in deep. Yeah, listen, Leo, I think given that we're at. 68 minutes.

I think we should probably stop there. Let's just have a look at your list. How many have we got to carry over for next week? Oh, only two. Only two. That's all right. We can keep going into next week. Not much in the way of comments. We've got a silly spam comment. And then Max, who had to clear off, just said he thoroughly enjoyed it.

He's stepping out cause he's got family things going on, but he'll catch the rest later, as I'm sure most of you will. Are we back next week? I can't remember whether we put that one in the diary. Yeah. So we'll be back. What will that be? That will be something like the 1st of November or something.

Can't exactly remember off the top of my head. Let me stop sharing that screen. Yeah, thank you. Buh let's have a look at the calendar. Do. Yeah, it looks like it will be the 1st of November. That'll be episode three. And during episode three, we'll be finishing off obviously what Leo didn't manage to get to there, but then updating bulk content in bulk and automating all sorts of different things.

So getting really into the weeds of it. Now we've. So I've seen a glimpse of the things that you can do with it this week. And we'll get stuck into more of it next week. Leo. Thank you. That's absolutely brilliant. I will post this on the WP Builds website for all to see, but don't forget. Leo mentioned at the top of the show and I'll put it in the show notes.

The opportunity for you to avail yourself of a coupon code to get quite a lot of money off the plugin. And if you've had a, if your interest has been peaked thus far, that might very well be worth doing. That's it. We're all done. I will see you next week, Leo. Thank you, Nathan. See you next week.

Take it easy. Bye. Bye bye.