Gato GraphQL Webinar Series #5 – Extending the GraphQL schema

[00:00:03] Nathan Wrigley: This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of manage WordPress hosting that includes free domain, SSL, and 24 7 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% of new purchases. Find out more at go.me/wpbuilds.

Hey. Hey. Hey. How are you doing, Leo?

[00:00:39] Leonardo Losoviz: Hey, very good, thank you. How are you, Nathan?

[00:00:42] Nathan Wrigley: Yeah, good. Back after the holidays, we had a bit of a break. we've done four episodes about the Gato GraphQL plugin, that Leo, who's right there. that Leo has made. We, on the previous episodes, I can't remember exact order 'cause we did jumble it around a bit.

We did an introduction, then we talked about integrating it with Gutenberg and customizing content, duplicating posts, automating tasks, connecting with external services. And this is our final one. And today, Leo's gonna be covering how you can extend the graph GraphQL schema. It's all a bit above my pay grade, Leo, but hopefully, hopefully you've got yourself ready and, are willing to show us how you can extend the GraphQL schema with your fabulous plugin.

[00:01:27] Leonardo Losoviz: Alright, shall we start? Yeah,

[00:01:29] Nathan Wrigley: let's begin. Shall I raise your screen or is it gonna go into that recursive awareness? Okay. You can do it now. Okay. There we go. That's brilliant. Yeah. just before we begin, actually, if you wanna share this, go to wp builds.com/live and share it over there and all the usual things about commenting and what have you apply.

Right? There we go.

[00:01:50] Leonardo Losoviz: can I make some announcement first? Oh,

[00:01:52] Nathan Wrigley: I know what you are gonna say. Well done. if it's what you're gonna say.

[00:01:58] Leonardo Losoviz: Okay. So here we go. So yeah, now my plugin graphic is, finally on the directory, on the WordPress plugin directory. Well done. yeah. it took a long time.

it's, okay. Actually it took a long time because the pla developing the plugin took a long time. Yeah. And then, there's this backlog, that. they were dealing with. I think they, they still have it, but they're actually improving now. I think now it's going faster. So in my case, it took something like three months until it was approved.

Yeah. and even once it was approved, I didn't put it up immediately because I was like, oh, I need to finish something. I need to finish something.

[00:02:39] Nathan Wrigley: Ah, but is that the date? It says last updated one day ago. Is that the date of the first version that's been on the repo? One day old? Yeah.

[00:02:47] Leonardo Losoviz: Oh, which is 1 5 3.

because, I have been developing on publishing on GitHub on Yep. first and so yeah, yesterday I uploaded, I think it was yesterday. That's

[00:02:59] Nathan Wrigley: amazing. Yeah. That's amazing.

[00:03:01] Leonardo Losoviz: I'm so happy. Like it's, your work is out there and I actually, I was mentioning to you that now I need to find out what I'm going to do with the rest of my life,

[00:03:11] Nathan Wrigley: Yeah. Yeah. This has been a five year, five year project, hasn't it? Something along those lines.

[00:03:16] Leonardo Losoviz: Yeah. I run, but it was never fi of course, I never had a five year timeline. It was always six months away from being done. Yeah. and it just kept getting bigger and I just couldn't release it be before I, I did this feature and then that feature, and then this feature I, I took for my, and and my wife, she supporting me.

So I've been like five years, not having a proper job, like working on this. Yeah. Working in here and sunny with there, like writing articles, doing some consultancy, but nothing stable. no, Stable income. and always thinking, yeah. Soon. Yeah. It's almost there. Yeah, it's almost over.

Yeah. Yeah, please. And I promise this time is the last one.

[00:04:05] Nathan Wrigley: Even now you're on version one. you've now got, by the looks of it, you've got 10 active installs, so there's 10 more people that you've got to, you've got to support Yeah. In the days, weeks, and months to come. Yeah. but that's great.

So if anybody has been watching this webinar series, whether you're watching it, more or less at the time that it was recorded, or whether you're watching it a year from now, everything is available on the repo. Now. I know that there are caveats there. It's not like there's, there's different versions, but you at least you can go there.

You'd have to be involved with GitHub or any of that. You can just find Yeah, exactly. The free version is [email protected].

[00:04:46] Leonardo Losoviz: Yeah. And also that the really cool thing is that if I upload an update of the plugin, you. Get the notification, the, on the admin. it just takes care of everything.

So that, that's really cool.

[00:04:58] Nathan Wrigley: bravo, congratulations. I know that it has been a long journey, and I also know that, the anticipation of getting it live is somewhat stifled by having to wait for 90 days. But as you say, hopefully that is being addressed, but well, done. Yeah.

I'm

[00:05:12] Leonardo Losoviz: actually, I'm still very, I'm, very, thankful.

it's such, it's, all of this is contribution. nobody paying any salary to these people who are actually Yeah, that's right. And my plugin had is 9.5 megabytes. it has a lot of call. A lot of call. And of course, they have automated tools that they check your code, but they also have manual, checking of the code.

Yeah. you have to do that. I'm so grateful that someone is doing this for us, Yeah.

[00:05:44] Nathan Wrigley: Yeah. It is amazing. It is amazing that happens. So I know it's the longer wait than most people would wish for, but the project has taken steps to speed that process up during the year 2024.

So let's see. Yeah, see what happens there. Yeah. Okay.

[00:06:00] Leonardo Losoviz: Alright. So this is, yeah. Okay. So now the website ga graph cur, what we're going to see is, how to, extend the GraphQL schema. So what are we talking about with this? We have the WordPress data that you, can query with graph cur. You have the post, you have the users, you have comments, categories, but you might have your own custom post type, with your own fields, right?

Maybe you have a custom post type called portfolio With, information, which is the ear that you publish the portfolio and maybe images attached to the portfolio. So all of this is custom information and what you want to do is to basically make all of this data available through GraphQL.

So when you write a query, you can query all of this data and maybe you can print it on your website using headless or transform it and post it somewhere else, or do anything that you want to do with the data. So this is what we're talking about with extending the GraphQL schema. all the data that is, that belongs to WordPress is part of the plugin.

All the data that is not part of WordPress is not in the plugin, basically. It's as simple as that, right? Yeah. Okay. That's nice and easy. If something belongs to WordPress and it's not in the plugin, like for instance. Querying for plugin data or theme data, you can always say, oh, this should be part of the graph of the gato graphical plugin, and we can work on it.

But if it is not there, basically you, have to do it, as an extension, for your own project. So how to do this, here on gato graphql.com at the very bottom. Let's scroll all the way down. There's this, create your extension link. So I'm going to click here and it takes me to a GitHub repo.

Let's make this a bit bigger.

[00:07:58] Nathan Wrigley: Yeah, that's great. I can see that easily now. Thank

[00:08:00] Leonardo Losoviz: you. Yeah. Yeah. Actually, you know what, Nathan, I apologize. all of my previous videos, they're very small font and it's okay. It's okay. Oh, watching,

[00:08:11] Nathan Wrigley: I shoulda spotted it. I suppose that's very small. Yeah, that's a good point. I maybe should have spotted that, but you've definitely addressed it here, so thank you.

[00:08:18] Leonardo Losoviz: Yeah. Okay, this is a GI card repo. It's called GAAL slash Extension Starter. So I'm going to explain a little bit what this is. okay. it's a template repo. So basically what this means is that you can, from this repo, clone it and applicate it to your own, under your own account, and it will have exactly the same files and the same structure, the same everything.

And that's really cool because this is like a project that is already the graph QL extension. So what you're actually going to do with this by. Using this template is to create a new project on your own GitHub account. Unfortunately, you need to use GitHub for this. If you don't use GitHub. yeah, I'm, sorry about that.

it will create a new, repo on your GitHub account with a duplicate of this project that is already the extension. And then on top of that, you can start coding the changes to the graphical schema. But what we're going to do here is to basically duplicate this, repo and initialize the project and launch like the server in our local host in the development computer to see it working.

And from which we can start, really working on our code. so I need to mention one thing. all of these previous episodes, we were working straight on the WP admin on an actual WordPress site. Yeah, because that's the beauty of Gato, GraphQL that you can use GraphQL, you can compose queries.

On the WP admin, right? you compose the query. You store the query, you execute the query. You're always on the WP admin. There was no PHP involved. Now, that's not because I know PHP in the plugin, of course that is. so when you query the posts and all the posts, you, you get the tile and the author and the URL, everything behind the scenes, there's a PHP function that is fetching all of this data, right?

Once you have coded that function, you don't worry about PHP anymore. Yeah. You just go straight and you use GraphQL. You code the query in the WP admin. So only now for first time in episode number five, we'll be dealing with PHP code. Okay? yeah. So now this is a bit about development. We're going to, we're going to skip the departure development though, because that's not fun.

Okay. yeah. But we'll see how to reach there and how everything works on the overall. Idea of all of this. this report instructions here, we're going to go through this together. but basically they, they explain how to initialize it. So they say, which are the requirements? We need PHP 8.1, and we need Lando and Composer.

So Orlando Lando is this, Docker, based software, which allows us to create a local host, like a development server or on our computers. and that's Mag Magnificent because I, they say a file, let's actually open this, just one second. web servers, graphical extensions. There's this Lando Yml file.

That it has all of the configurations of the web server. this is based on Docker. You basically, you will be able to run a command and the whole web server with all the plugins installed and x the bag and all the configuration, that you need is already installed and working.

Nice. Yeah. and I need to stress this because Okay. because GraphQL is very, opinionated. There's a way to use it, and if you don't follow that way, it may not work. So then you, it was a challenge for me when I was designing all of this, which is I don't want to have to create tons of documentation telling people how to use it, because people don't follow documentations and we, developers don't write documentation.

It always becomes stale. Yeah. Yeah.

So how do you make it in such a way that people can use it and it's very minimal, effort to maintain. So my solution was this one, to create a, an extension starter that has everything configured, and then you only worry about coding the, fields, with the PHP resolvers to fetch all of your data and nothing else.

it's, yeah, as I was saying, if you don't like working like this, that I tell you exactly what you have to do. it's, difficult, but that's how it is. That's what you've decided play. Yeah, exactly. Okay, so le let's do it. Actually, let's start. So use this template, create a new repository.

So I will create one in Leoso, let's call it, Gato for WP. Bills, yeah, let's make it public. and then we click create repository. Okay. Generating my repository. It should only take a few seconds and, okay. Here it is. So now I have this, URLI will copy this, but I, okay. let's actually follow the instructions.

So if you scroll down here on the readme, it will explain what we have to do. So it says, follow the steps, create your report from this GitHub template. So we just did this. So this is the step in which we're now, then it says, clone your Ripple locally. So this is what we're going to do. It says to, do git clone recursive with the URL Of the ripple. So let's do that. I'm switching here. where are we? see. Yeah. Okay. There, WP bills.

Okay. And no, I do clone, ah, sorry. Git clone. Yeah, git clone recursive. And I paste the URL. Yep. So now it's cloning this into my report. I mentioned that here it adds this parameter called recursive maybe, I dunno if you have seen this before. yeah. What this does is to download this repo and also an upstream repo that is linked to it, which is the original Gato GraphQL source code.

And the reason for this is that what I have done is that. When you're developing your extension, you also have access to the code base of the original, because developers then they quite likely need to follow, links into a source code to see how something works. So it's just there, it's automatically there.

That's very convenient and that's also very convenient for the bugging when you don't know what's going on and you want to find that down to the very, source code on the original plugin. So it's already in your project and everything is integrated. So now we go to this folder, gato graph gato for P bills, and we continue the instructions, which is we need to do this.

Okay.

[00:16:11] Nathan Wrigley: Installing a bunch of in

[00:16:13] Leonardo Losoviz: composer. Yeah. So this is what it, this is down doing is, installing the composer dependencies. Okay, let's continue. Let's see what happens next. Initialize the project. So this step will replace all the initial placeholder strings in the extens starter with the values corresponding to your project.

Okay. So basically it says we copy this and we paste it here, and maybe we can, customize this, right? Yeah. my company name. I'm not going to do it now, but yeah, we got, okay. Okay. Just, one. My, let's do this one. hi Nathan. Hi.

[00:17:04] Nathan Wrigley: Yeah, here we are. I've got my very own namespace. Very privileged man.

[00:17:09] Leonardo Losoviz: Alright, and here we go. So what this is doing is it has, added this custom information into the source code of the plugin. Yep. We'll see that in, in a tiny while. So we go, and now what it says is to push all of, to commit and push these changes to the GI have repo.

So let's copy and page this.

Okay, here we go. So now if we go back to this report, let's see what it says. Okay. Here it says my account slash yeah, whatever this is. If I refresh

here now, the project called Hi Nathan. yeah, Great. And it has my information here. Got it. So now we, are ready. That also the, our own configuration is stored on the, on the repository. Nice. So next, let's see what is the next step? Okay. Run the web server for dev. as I was mentioning, we need PHP 8.1.

We need Lando and hopefully X the bag. So now what we do is, oh, we can just, we copy this composter build server and we execute this. And this is going to take a few minutes because it has to download the WordPress, project. It has to install WordPress, it has to install the database, and then it will download some other plugin and install the plugin.

So it will take a couple of minutes. Is there's a fair amount going on there. Yeah. Yeah. So while this is running, we can talk about live.

[00:18:57] Nathan Wrigley: Great. What's your favorite hairspray? Leo.

[00:19:02] Leonardo Losoviz: Why is that? The, is that the, it's, a

[00:19:05] Nathan Wrigley: question where it, I dunno why It's a question that whenever I have nothing else to say, I always say that.

[00:19:12] Leonardo Losoviz: maybe then you can tell us what's your favorite.

[00:19:15] Nathan Wrigley: It was a long, time ago that I used

[00:19:18] Leonardo Losoviz: That's the reason why you're wearing a hat now.

[00:19:20] Nathan Wrigley: Oh. Do you know what? I think the hat has become my thing over the, over the last few years. I've got myself selection of hats and I've decided to, to don these hats and and I might actually just wear them on all the episodes.

Now nobody needs to stare at my gray mop of hair. so I think hats is gonna be the thing so we can see it doing one thing after another. I'll tell you something though. I'll tell you what, something that I've done, I've mentioned this on various other things. One of the most exciting developments in my life of recent years, Leo, happened to me quite recently, and I'm sure I've shown you, but maybe I haven't, is I got myself a rubbish phone.

and I, all I can say, Leo, is if you are looking to have a less cluttered experience in life and you find yourself somewhat addicted to your mobile device. Do that. It's been an absolute transformation in my life. I've absolutely got hours and hours of the day back just by binning the phone. You got your life back.

Yeah. it's crazy. But also, yeah, I've noticed the, the sort of lots of little hidden benefits. I, wake up in the middle of the night and I don't end up doom scrolling through a load of Facebooky stuff or news or whatever it might be. Yeah, that's

[00:20:43] Leonardo Losoviz: great. It might feel awesome, right?

It's

[00:20:46] Nathan Wrigley: different and it's taken me several weeks to realize what the impact has been. But it is, it's actually fairly

[00:20:52] Leonardo Losoviz: profound. but isn't this strange because basically you're recovering your life. this is the life previous mobile phone, which is like what, Which everybody has forever.

15 years ago, I dunno. Yeah. like 10 years ago, right? Yeah. Or five years ago possibly. Yeah. And, it's something that you are used to all your life and suddenly you're re rediscovering your life. Yeah.

[00:21:11] Nathan Wrigley: Rediscovering what it's like. And I'm really happy about it and I, but I can remember a day where that wasn't, my life.

So I'm feeling like I'm getting something back. Whereas I do, I'm slightly concerned about younger generations and whether or not that's gonna be the same for them, because they've been brought up in this environment where this is. Their lives. There's nothing. So

[00:21:33] Leonardo Losoviz: what do your kids think about it?

have you talked? Oh, they

[00:21:35] Nathan Wrigley: think it's hysterical. 'cause I've got this brick of a phone, which does nothing but make phone calls and text messages. it plays podcasts. So that was the important criteria. Yeah. I had to be able play.

[00:21:47] Leonardo Losoviz: Yeah. I hand my phone. The only thing they do is to play podcasts. I, my phone is radio.

It is literally a radio. Yeah.

[00:21:53] Nathan Wrigley: so your phone like radio, my phone basically. But, yeah, they think it's hysterically funny. yeah, it's an object of ridicule. In fact, for a period of time after I'd got this phone, wherever we went, one of the first things my kids would say to them mates was, get my dad to show you his phone.

And they, yeah, they're all like, marveled at it. It was like, oh, what's that? What is that chunk of technology going on? It's like a brick though. You can throw it

[00:22:19] Leonardo Losoviz: against the wall. Yeah. I can tell you, I can tell you something. I'm also a weirdo in that sense. I bought my first, smartphone ever in my life.

Only last year. Yep. Now I know that I didn't have, I had, but it was always a phone that someone else gave me because I didn't use it anymore. yeah. I just use WhatsApp and podcast. Yep. It's the only thing that I have. I don't, actually, the other day I, went to a new restaurant here in town.

Yep. And they gave a discount. It was two for one. If you promoted them on Facebook, you had to share on Facebook and like their Facebook page. And I don't have the Facebook app on my phone, so I just logged in on the browser. for first time ever on, on the mobile phone, I logged in and I had to type all the characters because you have the password.

Yeah. That long string, you have 56 characters one by one, what's going on? And I went to the, I went to the restaurant, And the guy's okay, you have to share. And I was like. Do it for me. I dunno how to, I gave him my phone. He actually did it, and as soon as he did that, this is Dr.

Go browser. It has this fire button that you press and it just deletes everything. I just did that and then Bye bye Facebook. Yeah. So you did it on free mail one side. Yeah. I feel liberated, and whenever I have it, I feel tracked and I, it makes me very uncomfortable. so actually I don't bring my phone unless I really have to.

Yeah.

[00:23:47] Nathan Wrigley: I know that. Yeah, I'm, happy to say that mine is now basically a phone that is really all of it's capable of, and I'm very happy with the way it's transformed my life. But getting back to the Gato GraphQL thing, look, it seems to have done it. Oh, it did a lot there, didn't it? It really did do a lot.

[00:24:03] Leonardo Losoviz: Yeah. Okay. So yeah. So all of this, so basically what this is doing is executing, okay, let's go a bit up. Okay. so what it's doing is installing, GraphQL on a local server. And the server is here. The, is this one, we'll open in now. I want to follow the instructions and then it installs the plugin, here.

Oh, there are all of this, the plugin, one plugin, another plugin that it has to, use. Okay. And then it installs a set of data for, running tests and, doing development is here. Yep. and yeah, it should be ready now. let's, continue and let's see what happen actually. Okay. Okay. So it says the U is sprint on the console.

that's what we're seeing. so basically here we have the URL. Let's go up and, get that URL and see what happens, what we have. Okay, here we go. So the URL is this one. I copy this and let's go to the browser and hopefully that will be a website. Yay. This website,

[00:25:18] Nathan Wrigley: brand new shiny WordPress website.

Yeah. And you've gotta log in somehow. I guess you, you know the, let's see, hopefully the

[00:25:24] Leonardo Losoviz: admin, admin password. let's see what happens. So yeah, WP admin and the password is the, username is admin and the password, if I'm not wrong, it's admin, admin.

[00:25:37] Nathan Wrigley: Admin, yes. Let's,

[00:25:38] Leonardo Losoviz: so admin. very secure.

Very

[00:25:41] Nathan Wrigley: safe. Yeah. Yeah. Luckily it's on a local machine. You're in Good. You're in good hands. Yay. Here we

[00:25:46] Leonardo Losoviz: go. Yeah, you were right. And there's gato there it is installed, which is being brought straight from development, and that's really cool. So I want stress that, that is really cool. Yeah. Yeah. I, want to stress that all the code is installed locally, including gato, GraphQL itself.

maybe I can show, let's just, yeah, you can

[00:26:11] Nathan Wrigley: probably browse the file tree. Can, what's happened? Yeah.

[00:26:21] Leonardo Losoviz: Come on. Oops.

[00:26:24] Nathan Wrigley: It's okay. We can still see it. Yeah, but I want to Oh, you need that? Yeah.

[00:26:29] Leonardo Losoviz: There you go. Ah, okay. What, let's just open this. I know that I, okay. Open using temporary

WP Bills. How's it? Yep. Yep. Okay, here we go. Open there. It all is. And let's see what we have here. So this is the project, right? we had this, oops. We had the folder called, we had the folder called Web servers, which is where the Lando web server is. Yep. There are two web servers. One is call geographical extensions, which is.

this one that we are using here? Yep. Yep. And there's another one called Extensions for pro for production, which is used, which did, which is not linked to the source code on the project. Okay. So this one is to run integration test using the plugin that we have generated. the zip plugin. Yeah.

Yep. and that is also integrated on the GitHub repo. So the GitHub repo has a command to generate the plugin, and basically it creates the zip file, then you download it, and then you install it on the web server and you can run integration test again, the actual plugin that we generated.

Great. Yes. And so here we have, the source code for this plugin source, or, actually it's on layers, plugins. There's a version called Hello Dolly, that I installed by default that, let's actually do this. Hello Dolly. If I run this, actually, let's do this a little bigger. So this is the Hello Dolly, plugin by WordPress, right?

Yep. created by, Matt Milway. what, 15%? No, what,

[00:28:31] Nathan Wrigley: 20 odd years

[00:28:32] Leonardo Losoviz: ago now. Yeah. Yeah. So this is calling that function, the Hello Dolly function. So every time that you press, run, it will give you a different line of those lyrics. of course, this is not on the gato graphical plane. This is Oh, on the extension, right?

Yep. So let's see how this works. this is the name of the field. Hello Dolly. Let's search this on the code base and see how it works. So here it is. So this is the PHP code for the resolver. Let's see. So this is how it looks like. The PHP, this is the name of the field here. It indicates of what type it is.

He's saying that it's type, is a string. It is non new level, so it will never return a new as a value. Here is a description symbol of the hope and enthusiasm of an entire generation. Summed up in two words. What, and here is the resolution. So I say, whenever you receive this field, you execute this function and this is what it returns.

Got it. So this is how it works. you have to create a custom, a custom post type, and every one of your pieces of, your data will be resolved somehow from either a property of, say, of the post or as a function. In this case, it's a function, but in this case, the object. That I'm receiving. This is the query object.

Yeah. When I'm calling for posts, they will be a post. When I'm calling for users, they will be a user. So then I can say, this is a post. And then you gimme the post tile like straight as a property. And this is what it returns. I'll show you an example for that. for instance, tile, actually let's search for the tile.

Okay. Style.

Oh, okay. Here it equals. Okay. A function called guest cat tile and get tile. let's search for this. And here it is. So basically you receive the object and then you return the property from the object. And that's what the field will produce. And this thing that I'm searching for right now, the, this.

Title field that is on the Gato GraphQL plugin. So this is what I was saying, that this is something that I, think is actually quite cool, that when you install the project, this extension starter under, there's a folder here called Zoom modules slash gato graph ql. Okay. That it has all the source code from the plugin.

Oh, wow. Yeah. So then you can browse, you can see how everything works upstream on the plugin and copy paste and applicate. And that's actually important. That also, that's what I, was mentioning, Nathan, how to create a starter project that I don't need to add documentation. And part of the solution is the code is its own documentation.

let's go back here to the repo. Okay. Let's go down. Yeah. Here it says, this is what you've been doing.

[00:31:53] Nathan Wrigley: Yeah.

[00:32:05] Leonardo Losoviz: okay, here we are. So here we go with extending the graph cur schema. Okay, so we, what can we extend the graph cur schema. We can create types. So for now we have the post type, we have the user type, we have the comments type, we have the tag and category type. We can create our own types like product portfolio, client, et cetera.

That's one thing that we can create. Okay, so how do we do that? Okay, what I'm actually telling you is this is a source code. Copy that file based it on your project and edit it. So what I'm saying here is, for instance, the user type is this file. So what I have to do is I copy this. I go to the project and I open the file and here is the file that implements the user type.

So it here is the type name user. It is the, description, then it has to resolve the id. Yep. that will be basically will be user, arrow id. Yep. Yep. And then, here is a, an object that basically knows how to fetch the information from the database. It's called a data loader. And if I click on this file, actually let's click here and I click here and I follow.

Then I have this other file I have to copy into my project. And here it, it demonstrates how to, Result for this, which is I had to produce a query that given a list of IDs, this is the id. Basically what the graph server is doing is using IDs to identify objects. yep. And then it says the Resolver, I have these IDs, what do I do with them?

Yeah. And what it will do is basically I return a query that says, include id, this is how it is for the get users function. and the, and then there's the function called execute query that calls this, here, this get user type API. yep. I get it. That's a bit of indirection that I'm doing because I just want to be able to override this if anyone wants to create a different implementation that is not just straight get users, but it does something else.

Got it. you can you can override that. Yeah. but if I actually follow this, user type API, let's open this. get users. Here you go. So the implementation of the function receives the query and it executes get users right. And then it returns that, that response.

So this is basically how do we transform a type to its, corresponding object in WordPress. So the type user, whenever you get a list of IDs, will be resolved by calling it users. That's pretty much what it is. Okay. yeah, so this, is boring, maybe. I dunno.

[00:35:21] Nathan Wrigley: no, it's, actually quite fascinating seeing under the hood of how it's all done.

Yeah, because in the parks we've only seen the, we've only seen the ui.

[00:35:28] Leonardo Losoviz: Really? Yeah. It's very straightforward actually. and this graph fuel has a, particularity that is that, you don't need to worry about. this is what I was telling you before that is very opinionated. Yeah. I long like you follow these instructions, everything is taken care of for you.

So let's see. Okay. Field resolver, I was, so for instance, examples are the username, the display name. So here I give an example, so I copy this, that one again. Okay. Let's open this one. And here. And this is a a. Resolver. Let's go. That is the results. All of the fields, the url, all these things. Got it.

Yeah. Yeah. The past Slack. Username name, display name, first name, okay. And here it says of what type they are, username. Name, display name, they're all string. Then they have the email is of a custom type called email. And the website URL is of a custom type called uur L. So you could say that it could, they could be string also, because at the end of the day, an email is a string.

But by making it an email, you can also validate that. The validate the, yeah, see if it's got any, and whenever it not valid, and if it's an input, GraphQL will give you an error saying This is not a valid email. Nice. Okay. and here we go to the resolution resolve value. So this object is a user, sir.

And then basically, okay, username will call the function, but basically it's the calling all of the properties from, the user. and it's very simple, right? You receive the object, you receive the name of the field, and all you have to do is say, okay, this is how it result by calling the corresponding, function from WordPress.

Or from whatever logic you have, if it is a custom post type, it might be a custom property. If it is an extension for WooCommerce, will be an WooCommerce, function and, so on and so forth. You just add 'em in there? Yeah. Yeah. Okay. Then mutation resolver. So mutation is when you go to modify data.

So in this case, one mutation is called, is create post, which is to add post to the site. So if I copy this, let's just see a bit. it basically the same, but with the difference, mutation type get field mu with the difference that they also have a field mutation resolver, which is another resolver that, yeah, basically mutates data.

So in this case, this one. Is create post mutation resolver. okay, it comes here.

Update, custom execute. what is this being called? oops. Oh, here we go. no update. Who is calling? Update, evaluate. Update. Okay. So basically here you have the logic that once again, you receive the field here in in this object. It says release field. And you will execute some logic to, mutate data.

And then you return the results. In this case, I'm calling create, update, custom post, or something else. Oh, here execute. Okay, here it goes. Yep. And this function, let's call this, let's see, how is it resolved? Here we go. So this function to update the post will eventually call WP update post and it returns dating.

So yeah, that's what it's, there's a lot going

[00:39:27] Nathan Wrigley: on there.

[00:39:29] Leonardo Losoviz: Okay. Yeah. No. Okay. The thing is, this is a bit here. the code that I'm showing is a bit more complicated than what people will implement. Yeah. Because, yeah, because I, try to do it

[00:39:43] Nathan Wrigley: you've gotta do it quickly for a thing like this, haven't you?

But the point is, it's all there. You can inspect it all. Yeah. And there's instructions here. Yeah. at the point of creating the repo where you can, yeah. Just go at your own pace and see how it's all built up.

[00:39:58] Leonardo Losoviz: Okay? Yeah. Now I'm not going to show everything. There's a, some other stuff going on, but things that you can create are a customs color resolver.

Okay? So custom like acal is like a string. Yep. Bullion, float. And then, an id. And outside that you have custom scholars, for instance, email. It is a custom scholar that have been implemented by Gato GraphQL. But you will have, a custom scholar called an, I don't know, negative int because you only need, negative integrals for some reason.

Then you can create a custom scholar. Then you have enumeration, which is, values which are predefined and it's only a set of values and no other. So for instance, with the, post status, you have draft pending, published, and a few others. So all of those are. Enumeration. So you can do any, anything like that with an enum resolver.

Then you have interfaces, you have union types. Yeah. Union type is when you can return more than one type. on the same field. For instance, custom post. A custom post can return a post and a page. Yeah. And there are two different types. So then you need a union type solver. Then you have input types, which is when you need to provide data to the field.

you pass data. For instance, when you create a user, you pass the username, the email, the name, et cetera. All of these are through properties which are resolved through an input. And then one of inputs is like an input. Yeah. And directives. Directives allow you to modify the fields. So when we were translating data, we are translating content using, the Google translate, API that we saw in, second episode, I think, or third.

I think so, yeah. Yeah. So that is, that was a directive called Translate that you applied on a field and you will call the Google Translate API and modify the value of the field. So it's basically it like a hook that given the field that you already have, it can apply some other functionality? Yeah. Yep, To the hook that there is a directive and then a few other things. So here, there are examples for everything. it's a matter of copying, copying this, file, and then you open it and you basically applicate it and you bring it to your project.

[00:42:25] Nathan Wrigley: Okay. There's so many, it's amazing.

[00:42:28] Leonardo Losoviz: Yeah. Okay. And one thing, maybe one last thing that I will show, we have the chance, which is.

What I we're, have been showing here, on Gato GraphQL is this Hello? Dolly Extension. Sorry. This Hello? Dolly Field. Yep. So when you install the extension, let's go back to searching for Hello Dolly. Here we are. So we see the code

is layers slash gato GraphQL for WP packages. Hello Dolly schema. and here is where the field is resolved. And there's also this folder called plugins slash hello dolly. which has the, extension. So this is not your extension, this is just an example for you to visualize what you will be doing.

So let's create our own extension. Oh, here we go. Here we go. Yeah. so here, okay. Let's here. So creating an extension plugin. This section explains all the if needed to all your own extension, basically. and basically is this, if it is your own extension or if you want to install it with a third party plugin, like for instance, e-commerce Yeah.

Is like this. So this actually I'll see it. Yeah. And here it says, what is the name of the plugin? What is the main plugin file? And what is the constraint? So maybe this works only for WooCommerce, 8.4. So then you can actually add that, constraint. So let's, let's, oh, I can just copy here. Yeah, I was

[00:44:07] Nathan Wrigley: gonna say, that's a bit quicker.

[00:44:09] Leonardo Losoviz: Okay. So we're back here.

[00:44:12] Nathan Wrigley: Let's back in the command line. Here we go. WooCommerce

[00:44:14] Leonardo Losoviz: coming off. Yes. Have that. Let's see what happens. Oh, what happened here? What is this? Oh, I haven't updated this. haha. I know what, why this is, Ooh, okay. I cannot show this. I have to update something. Yeah,

[00:44:34] Nathan Wrigley: I see. That's okay.

That's the way it goes. these live demos, Leo?

[00:44:40] Leonardo Losoviz: Yeah. Actually, we can do something quick and easy, just to have it. Let me do something. Let me do a hug just to have this, hopefully working. 1.6. Ah, no, I don't want to do this.

[00:45:02] Nathan Wrigley: It's at this point your cat arrives and meows at you.

[00:45:05] Leonardo Losoviz: Yeah. yo.

Okay. I gotta show you this. I have to update something on the repo. I forgot to, to update this. It's okay. It's all right. okay. So basically what happens is that this is doing some validation that. That we are referencing the same libraries here. Yeah. And they said dis similarity.

One guy's doing version one to one and I'm doing 1.6 because I Oh, pop schema comment, because I forgot to update this reference.

[00:45:38] Nathan Wrigley: Nevermind. Yeah. We know how it goes. There's been plenty of other stuff in this episode. Oh,

[00:45:43] Leonardo Losoviz: no, actually no. actually, let's see if it works. Alright. It say, but I really, let's see if we, I just downgrade this and see, let's see what happens.

Let's see what happens.

[00:45:57] Nathan Wrigley: Okay. Repeat.

[00:45:59] Leonardo Losoviz: Okay. oh yeah. But this is hard. You don't do this at home. Don't do this

[00:46:04] Nathan Wrigley: at home. That's

[00:46:05] Leonardo Losoviz: right. Yeah. So after, so then he says, okay, here it says, that it has. Done a bunch of stuff. Please execute the following command to complete the process.

Okay? I will first show you what happened in the project, plugins. Here we go. so the folder plugins now has a folder called E-Commerce, and with this plugin file SQL version, yeah. Commerce and it will have the dependency on, e-commerce. It will also download the e-commerce plugin locally, so you can actually install it.

So le let's do this next. we are here. It says, okay, after. So we copy this to push the new project to the repo.

Okay. So after I did this, if we go back here.

Create the extension, eCommerce and layers, GraphQL plugins, e-commerce. Now it is on the repo. Okay. And what is the next step? Oh, we need to rebuild the, Lando server. Okay. They will take, also a few minutes, Nathan.

[00:47:42] Nathan Wrigley: Oh, we need to talk about our mobile phones again, Leo. Yeah.

[00:47:45] Leonardo Losoviz: Yeah.

[00:47:48] Nathan Wrigley: just for context, what is it doing right now that's taking those few minutes?

what's it going out and fetching and downloading and,

[00:47:56] Leonardo Losoviz: yeah, so we have the Lando Observer Uhhuh, and what I'm, what he's doing now is, going to update all the mappings. Inside of the configuration for Lando because the, the web server is using the source code straight from the plugin, from the source code.

So here it actually showing there like that, it's taking the new one from e-commerce. Basically I'm regenerating the configuration because now there is a new item, which is a plugin for e-commerce. That's the first thing that it does to rebuild the web server. And the next thing that I will do is to also download and install the dependencies.

In this case it will be the e-commerce plugin. Yep.

[00:48:39] Nathan Wrigley: So there's a lot.

[00:48:40] Leonardo Losoviz: Yeah. yeah, and this is all automated basically. So when we declare that's why there, there are these, the instructions to create your own custom extension or an extension for some third party plugin, because in this case it's doing a lot more stuff.

[00:49:01] Nathan Wrigley: If, if people are trying to tackle this at home, how, how do you now, especially now that you're on the repo, I imagine that as the install base goes up, your support is gonna go up as well. how do you manage all of that? If somebody's watching this and thinking, hang on a minute, I'm really outta my depth.

how can I do all of this? do you respond to email or do you have a contact form somewhere? Or how does that work? Yeah,

[00:49:28] Leonardo Losoviz: absolutely. I'll, show you, I'll show you, but let me finish. I'll start running the other one because the other one will also take Okay. A couple of minutes.

Okay. I think, actually what is it? The other one, oh, did that one finish? yeah, that was another instruction. did one finish. Okay, let's go up. And that was a final step to do. You're trying

[00:49:49] Nathan Wrigley: to find it there?

[00:49:51] Leonardo Losoviz: No. Where is it? Where is it? Where is it? you've

[00:49:56] Nathan Wrigley: got a lot going on there now. Okay,

[00:49:58] Leonardo Losoviz: here we go.

oh, and the last one is this one. Okay. I copy this and I paste this. And what this is going, what this is going to do is to download, e-commerce and install eCommerce. okay. Hopefully. Okay. Let's see. Yeah, once, yeah. oh. There we go. Installing eCommerce. so going back to your question, yeah. you can contact me.

There's a contact us link on the website on gado graphql.com on the very bottom. And I replied to all of these inquiries. Of course, the report if there's any issue. I always also, I'm active on, on, on the GI, have report. yeah, actually, I'm very, easygoing. Yeah, I've

[00:50:50] Nathan Wrigley: noticed. It's, it's great.

but if, yeah, I feel that especially for people who are beginning down the journey of using your plugin, there's so much, you've spent five years building it, and I guess you're in your own wheelhouse there, aren't you? And you've built things and it's all in your head, but I guess, you're gonna have to support people through it and Yeah.

Knowing, knowing how to contact you will be, will be important to that process. Yeah.

[00:51:17] Leonardo Losoviz: Okay. Here we're, it's done.

[00:51:19] Nathan Wrigley: that

[00:51:19] Leonardo Losoviz: wasn't so bad. Yeah. Okay, so let's go back here and I will refresh. And something that it should have happened is that e-commerce should be installed. Here we are. E-commerce is installed.

Yay. Yay. And if we go here, let's see. Graphical modules.

we go down. Okay, here we go. this, okay here. This screen modules is showing you all of the modules installed on Gato GraphQL. So we created a new plugin called E-Commerce, and it has installed the plugin. And here on the modules it shows here there's a module called e-Commerce Schema, which is where we're going to implement the logic to map the e-commerce schema, the fields and the types and the everything.

so from now on we are ready. We, can just start coding this. Everything is ready and, oh, and I'm sure I, know that we don't have a lot of time, Nathan, but I'm going to show one last thing that this is actually, truly nice.

So we have, so let's assume that we have coded a field for e-commerce. We have added a product type, with the price field and we want to release it. We want to create the actual zip file. Oh, okay.

Huh. So we, it's after doing, so extending the graph care schema. Yeah. We're looking over this down. So after we have coded this, which we're going to skip this, we can release the

[00:53:10] Nathan Wrigley: extension. Oh, look at that. To production.

[00:53:12] Leonardo Losoviz: yeah,

yeah, we can release it. Let, we can release it at 0 0 1 or 0 1 0 or 1 0 0.

And for each of them there's, this command. So let's release it as one zero. So

[00:53:25] Nathan Wrigley: you're gonna straight in at version one. Okay.

[00:53:27] Leonardo Losoviz: Yay. Because I'm so I do composer release major. And what this is going to do is to up change the code to reflect the new version 1 0 0 here this, and upload it to GitHub.

Good. So now

[00:53:52] Nathan Wrigley: grief. That's

[00:53:53] Leonardo Losoviz: cool. So now we go to GitHub and okay, it has opened this thing and it says two tags. And do you see now there say 1 0 0 with the code. Yeah. And so we come to this tag and we say create release from tag. So 1 0 0. Hi Nathan.

[00:54:19] Nathan Wrigley: it's worse than Hello Dolly. We polish

[00:54:23] Leonardo Losoviz: and now just from doing, this is generating, it will be generating the plugin, the C file that then you can download.

it's already the c file. And this file is downgraded to PHP 7.2, but the code that we are using to develop the plugin is WordPress 8.1. Yeah. Okay. So yeah, here it is actually working. let's see. this is doing okay here. You, it is generating, yeah, generate plug data, graphical eCommerce.

So here is, okay, let's just go back to summary. We don't need to see this. so I'm going to repeat that because it's something that, that's pretty cool. Pretty cool. Yeah. You use PHP 8.1 to code? yeah. here all the code. This one, it has private properties. it has, mar it uses all the types, it has all the features from eight, 8.1, but when it produces the C file, all the code is downgraded to PHP 7.2.

That's pretty remarkable. So that means that you can still target. Yeah. Okay. Something failed there, but this is the other one. I'll, tell you later. What's going on here? No, no need to, pay attention to it. so you, you can still, you

[00:55:52] Nathan Wrigley: target a bigger audience,

[00:55:54] Leonardo Losoviz: basically. Yeah, exactly. Yeah.

Because Page, war host the, went down to 7.0. 7.4 I think is 5%. Yeah. Yeah. Happened here. What's going on there?

[00:56:05] Nathan Wrigley: Oh, it's live. Leah. What the heck? It never works. Live does it? by integration.

[00:56:14] Leonardo Losoviz: What is This, this is something new. I need to check on this, but this, I think

[00:56:20] Nathan Wrigley: this is a new feature in GitHub.

Is it? That you,

[00:56:23] Leonardo Losoviz: yeah. I don't know. It's a other library. Why do you. Oh, you got, and

[00:56:28] Nathan Wrigley: you suddenly got more work to do drugs.

[00:56:31] Leonardo Losoviz: Oh, no. HT DP. Yeah. I swear I think that is not my problem. I think this might be a GitHubs problem. Yeah. this, honestly, you

[00:56:39] Nathan Wrigley: cannot make it up, but, there's more work for you, Leo.

You've got other things to explore now. So

[00:56:44] Leonardo Losoviz: sadly, at the end of this, what will happen is the same that I have on my own repo, GitHub, gato, GraphQL, gato, GraphQL, because I run the same process basically. so when you go to the release, this, is my license release, it will attach here the file.

Got it. And with all your code downgraded to, PHP 7.2. And if you need scoping because you have dependencies, it will also scope it. So basically what I want to say is, other than coding the fields for your, for the graph, your schema, I. You don't have to do anything. Everything is done for you. Yeah.

[00:57:25] Nathan Wrigley: A yay, yay. I feel you've squeezed a lot into this hour, but also into the other four hours. a fairly well, fairly impressive walkthrough of all of the different pieces that you've built, but, really, truly, what a remarkable piece of work. It's been five years in the making. The, the free version is now out on the repo.

Yay. You can go and check it out. And, and as Leo said, he's totally open to, feedback, comments, support requests. You can find it all on the website. Oh, there you go. yeah, plugins at, I can read that. wordpress.org/plugins/as you'd expect. Gato GraphQL, absolutely no hyphens or anything weird like that.

And, yeah, let's get that install base up from fewer than 10 to

[00:58:20] Leonardo Losoviz: hundreds and hundreds. More than 10. Yeah. Yeah. More than 10. A few more than 10. A couple more than 20. And yeah. Yeah.

[00:58:27] Nathan Wrigley: Yeah. it's funny how these things work, right? You'll be, don't, wish your life away. As they say. Suddenly you'll be like, ah, I got too many support requests.

It's too popular. All I can say, Leo, is I really appreciate it and so popular. I'm making so much money. that's right. Oh, no, that's right. Yeah. What a nightmare. That'll be, for all your hard work. But thank you, sincere, thanks for staying with us. I know that we've had a bit of backwards and forwards about dates and things like that, but a real pleasure to connect with you, and, learn a little bit more about your project and all the hard work that you've put into it.

Are you going to, you're gonna be at Word

[00:59:05] Leonardo Losoviz: Camp Asia. I'll switch. Can you not share my screen? Because I want to switch to, yeah. So I can see you again. Yeah.

[00:59:13] Nathan Wrigley: Oh, I see you've been staring at that screen. yeah.

[00:59:16] Leonardo Losoviz: Yeah. I haven't, I don't see you. yeah, of course. Yeah. Yeah. yeah, I've been working on page.

We're going to meet there. I'm so excited I've decided

[00:59:23] Nathan Wrigley: to go. Yeah. So I shall, I shall be there. I think I'm getting in on the sixth. I think it is. I think the thing starts on the seventh or something. So I'll be there for a day before and then I'm hanging around for a couple of days afterwards.

Oh,

[00:59:34] Leonardo Losoviz: you as well. you should certainly try to be before, one night before, because they always have some party, right?

[00:59:40] Nathan Wrigley: Yeah, exactly. Yeah. it was a question of booking the flights that would actually work for where I live. 'cause I live in the middle of nowhere and, trying to find a flight which connects with a train, which blah, blah.

but I've done it and I'm I'll, be there. So I will see you. Oh, you bought

[00:59:55] Leonardo Losoviz: the ticket until when you're staying again.

[00:59:58] Nathan Wrigley: so it finishes on the ninth. I think I'm there till the 12th.

[01:00:01] Leonardo Losoviz: Oh, great. Okay. You have plans for I've

[01:00:03] Nathan Wrigley: got more time at the end than I have at the beginning.

[01:00:05] Leonardo Losoviz: you know what you're going to do?

[01:00:08] Nathan Wrigley: no. Not a clue. Okay. I haven't a clue. I always.

[01:00:12] Leonardo Losoviz: Just one recommendation. They have Chinese cuisine is, magnificent, right? they thing called hotpot, in Chinese it, it is called, Hogo. And in Taiwan they have wonderful hotpot. And the hotpot is a boiling, it is a soup that they place on the middle of the table and you buy stuff.

You buy like cat meats. You ca you buy to food, you buy veggies noodle, and then you slowly, all the time you add more into the soup and you eat. And the thing is, the more people, the more thing you can order and hopefully they eat great. Oh, so you can start because you are popular and you know everyone, you can start organizing now.

Tell them on the 10th we all go to eh, nice restaurant, hot pot restaurant. And we order and then, you have the best meal ever. Like the, a hundred people just yeah. Go with, if you can get 10 people and go and have hotpot, it will be an amazing experience. Okay.

[01:01:12] Nathan Wrigley: Alright. I'll say, let's reconnect on that.

That sounds like a really good idea. Honestly, I'm, I have no idea what I'm gonna do yet, but by the time that comes around that sounds like a solid Yeah. Way of spending an evening. That sounds really great. we probably should stop this, recording at this point because time is up, but just again, once again from me, thank you so much Leo, for joining us over the last five episodes.

It's probably been about two months in the making now, maybe a bit more, but I really appreciate it. I wish you well for your project. Wish you all the success in the world for the plugin and yeah. You never know. We'll connect in some other way at some point. I am sure. Take it easy.

[01:01:54] Leonardo Losoviz: Leo. Thanks so much, Nathan.

You're welcome. See you. See you

[01:01:58] Nathan Wrigley: soon. See you in Tyler, Taiwan even. Bye.