Gato GraphQL Webinar Series #1 – Introduction, Running Queries in the Admin, Creating API Endpoints, Access Control, Caching

[00:00:03] Nathan Wrigley: This episode of the WP Builds podcast is brought to you by GoDaddy Pro, the home of managed 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 percent off new purchases. Find out more at go. me forward slash WP Builds.

Hello! Hello there, wherever you are in the world. Very nice to have you with us. It's WP Builds. It's one of our webinar shows. We're starting a brand new series with this fine gentleman. It's Leonardo Lozovic. How you doing,

[00:00:50] Leonardo Losoviz: Leonardo? I'm doing very well. Thanks for this invitation, Nathan. Oh,

[00:00:54] Nathan Wrigley: you're so welcome.

I love stuff like this. This is my bread and butter. This is what I love to do. Talk with clever people like you. We're going to be, we're going to be discovering an awful lot over the next five sessions. I would say five weeks, but I think at some point in the calendar, we've got a little break, but. The idea is to do five sessions.

Leo has very kindly put a lot of work into figuring out what those five sessions are going to involve. But broadly speaking, it is all about a plugin that he has created. And it's a plugin, which will allow you to do a. Surprisingly large amount of stuff in your WordPress website. I'm going to more or less guarantee that unless you are a super duper GraphQL nerd, that there's going to be some surprising, interesting stuff over the next five weeks.

But probably the best thing to do, Leo, this being our first episode, we won't do this each time, but I wonder if you wouldn't mind just introducing yourself to our audience, just let us know who you are, where you are, how you came, became curious about WordPress and GraphQL,

[00:02:00] Leonardo Losoviz: all right. Yeah.

My name is Leonardo Losoviz. I'm from Argentina. But I live in Malaysia, so it's night now here. That's why it's so dark in my place, and I've been involved with WordPress since 2012. I was helping a friend to no, not to be his side, but to check what's going on with his side. And then I saw the dashboard and so the themes and the place like, Hey, I like the thing.

And that was like more. Yeah, more than 10 I am still at it.

[00:02:34] Nathan Wrigley: Yeah, but you really have built something really remarkable. This whole webinar series came about, I don't exactly remember because my memory is awful, but Leonardo and I have had, I'm going to call you Leo, if that's all right.

Can I go for that? Yeah, thank you. Leo and I have been emailing for a fairly lengthy period of time. And and I just thought this was the best way to explain. What is a very difficult thing to explain by me. So Leo's going to take the helm in a moment. Just a couple of bits of housekeeping. If you are joining us live during this show, that's lovely.

We would love your comments. One of the things that we're doing this for really is just to create a piece of video content. So it will be available on the WP builds website. But, that's lovely. But if you happen to be here live and you want to ask Leo a question, that, that'd be nice as well.

The best place to do that would be to head to this URL. It's WP builds. com forward slash live. If you're over there, you've got a couple of options in terms of commenting on the right hand side. So separate from the video is a YouTube comment box. So that would obviously require you to be logged into some Google account.

And then you'll be able to. Write a comment in there. Alternatively, if you look at the video player, there's a little button at the top right hand corner. It goes over the WP builds logo. And you can pop out a live chat actually embedded inside the video. It's got nothing to do with YouTube.

We're embedding from the webinar platform that we're using. So there's a couple of options for you there. I know that some people like to join us from Facebook. And if that's the case, if you happen to be joining us from Facebook today, we won't know who you are. Facebook, keep your avatar and face.

They keep that secret and we don't know who you are. You just come across as, I don't know, some sort of Facebook user or something, it says like that. If you want to de anonymize yourself, go to this URL, wave. video forward slash lives forward slash Facebook. I guess you need to be logged into Facebook at that moment and you can give your approval for those comments to come through once again, though, if you're joining us and you think your friends relations, cats, dogs, cats.

In particular you'll see why in a minute. If you want them to be involved and you think that they might get some benefit out of this, why not go and share it? WPBuilds. com forward slash live. Okay, I think that's enough commentary from me. I will take those comments away and we'll hand it straight over to Leo.

I will interrupt you, Leo, if I get confused or if I think something needs clarifying. Also, if I think a comment comes in that's pertinent that might be of use for us to share. Actually I'll just quickly say hello. There's a couple of people saying Atif Riaz saying hello. WP Builds and Leo, thank you so much.

And Patrick Posen who did a series just like this a little while ago. He's saying, hi, much success, Leo. I see other people with fairly technical products taking the time to explain all the details in the WP Builds show, including you Patrick, thank you for that. Okay. So keep those comments coming in.

So Leo, it's over to you. Would you like me to share your screen right away?

[00:05:44] Leonardo Losoviz: Yeah, please. Go ahead. All right. Over to you. Thanks. Thanks, Nathan. Okay. Hello, everyone. This is a demo for Gatto GraphQL. It's a new plugin. It's not in the WP repo yet because, yeah, it's in the backlog. It's waiting for approval.

But hopefully it should be there quite soon because it's been over two months and I submitted around two months ago. Sorry. And they told me when I submit that it will take around two months. So I'm hopeful that it will be the light of day in the, in wp in the WordPress org slash playing directory quite soon.

But for the time being, if you want to use the plane, you can still use it already. So there's a website which is, this website is called Gato GraphQL.com. The. The logo is this beautiful cat that actually is my cat, which is there. Maybe I show it to you actually during this presentation, one of these five sessions, and you can download the plugin from here.

So it's going to be two versions. I'm going to show you. The, all the features, all the whistles and bells that we have in this plugin. So many of the things that I will be showing are the pro version, which is of course paid, but there's a lot that you can do with the free plugin. So I will encourage you to download it and check it out and you don't have to download it straight.

You can also play with it. If you come down here. On the homepage, they say link that he says, take got the graph here. Plus all the extensions for a test drive. So if you click there, it's a instant WP sandbox so that you can open this and play with it without having to download it yet. Yeah, so I'm going to show, so we have a very.

Itinerary, not just for today, but for the five sessions, because there's a lot that we can do with this. The idea for Gato GraphQL for me came from a couple of places. The first one is that I was building a website for myself long time ago, actually, like around 10, 10 years ago, they were before we had before all of these shiny dynamic technologies that we have nowadays, but in that moment, I started like noticing this idea of creating websites using components and needing to feed data to components.

So actually the base code for what now is my product called Gato GraphQL, I actually started around 10 years ago, even before GraphQL. When I started this project itself, there was no GraphQL. It was maybe there on the minds. of these engineers in Facebook, they were working on it and I was working on a similar idea.

Eventually I decided to actually merge it with GraphQL because the GraphQL, I'm going to explain what GraphQL is, but it's a beautiful thing. It's a really beautiful thing that they have actually built. And I decided to go all in, into GraphQL and to also... Extend GraphQL. I'm going to show you features that you can do with this plugin, which are custom features that they are not part of GraphQL, but they still use the GraphQL syntax and they can take you to.

incredible places. So for today, for the first session, I'm going to show you a bit about the plugin, what it is all of the different screens that it has and what things it can actually do. Okay. So let's start. So this is my usual WordPress dashboard, right? So you can see here, there is a link called goto GraphQL.

If we click here we enter this. Screen, it's a client for executing GraphQL queries. So here on the central part is where one can compose the query. I just do this quickly now, and then maybe I will go into more detail. But here I can say, give me all the posts, and for all the posts give me the ID and the title.

And then I execute the query and it brings all the data. I can fetch also the author, and the author with the name. Then it brings all the data. So basically what GraphQL is an a p i, it's an alternative to the rest. A p i. You have the rest, a p i in WordPress. It's already baked in Core when you're using Ember.

Ember is well, or the WordPress editor, right? It's communicating from the client. From the Gutenberg client to the WordPress site on the backend through an API, through the REST API, this is basically a similar concept that you have a query. You compose a query. In this case, this is a query here and you say, give me the post, the title, the author, and then you bring the data and then you do something with the data.

In the case of Gutenberg, you will render the block for instance. So this is how it looks like. Now. GraphQL has something called the schema. I'm going, I'm clicking here on this item on the left. And the schema is basically all of the entities that you have on your database, all the data that you can access.

This is how the schema looks like. Let's. Let's zoom in. So for instance, here you have the entity of the post.

Here we go. And then you have all of the properties that you can access from the post. You can see it says our comments open, the author, block data items blocks, categories, category count, et cetera. And when you click on one connection, in this case, the blocks, it takes you to a different entity.

Ooh, we'll arrive there. Yeah. It's a long,

[00:11:44] Nathan Wrigley: you've a long journey, .

[00:11:45] Leonardo Losoviz: It's very, yeah, very. I should zoom out a bit. . Yeah, it's okay. Yeah. And then from there you can actually go to different entities. So basically what this is the WordPress database. But that is accessible through the GraphQL schema.

So basically what this is that, the tables on the WordPress database, that you go to the MySQL table and then you have WP underscore post meta, WP underscore users, and you have the same tables. What you have is the representation of the entity. You have the post, you have users, you have tags You have comments, you have custom posts, and then from each of these elements, you can go from one to the other.

The post has comments. So then you can say, give me all the comments. Then the comment has an author. So then in, when you're in the comment, you can say, okay, give me the author. And the author has posts. Then on the author, you can say, give me all the posts and so on. So this is the, what is called the GraphQL schema.

If this is not clear, you can ask me about this. I know that it's basically like the WordPress database, but in GraphQL.

[00:13:03] Nathan Wrigley: Terms. So can I just ask a quick question? So this is everything that's available on your. So on my website, where I may very well have some different things configured in different ways, this is going to be slightly different to me.

Broadly speaking, everything on a vanilla install will be the same, but if I was to have a modified website, I don't know, different custom post types or something like that, then I would see a slightly different variation here.

[00:13:31] Leonardo Losoviz: Yes. Yes, actually. Yes. You're right. In the sense that he has to replicate.

Whatever environment you have. So if you have e-commerce, for instance as a good example. Yeah. Yes. Then you'll expect to have the product entity and the coupon and the shop and the order entities, and then all of this. They have relationships with each other. For that though, you will need to have an extension that adds support for e-commerce.

[00:14:00] Nathan Wrigley: Okay, we could probably leave it there, but okay, I get it that there's ways to do that, but we're not at that point yet. That's later in the journey. All

[00:14:09] Leonardo Losoviz: Yeah. But no, but that is still a very important question, actually, Nathan, because the important thing with GraphQL is that it is not fixed.

You can extend the schema, actually, more importantly, what happens if you have your own custom post type, then your question is, Oh, but that is not in your plugin. No, but you can extend it. You can if it is a custom post type, it is possibly already mapped. You have to check a box, say yes, please show it on the GraphQL schema, enable it.

Or if it is a custom post type with custom properties that they have their own resolution. That you need to create some PHP code to fetch the data. Then you have to extend the schema through PHP code. Got it. And that is an extension. So anyone can do it. And at the same time I was mentioning how the Gatto GraphQL plugin.

It has two versions. It's free on one side, the free version, it's all of the WordPress core. So whatever you have in WordPress comments, users, posts tags, categories, all of that blocks, also blocks it's already included. That's part of the plugin. And then extensions for commercial plugins.

Or also like maybe not necessarily like commercial plugins like WooCommerce. Those will be commercial extensions that you can download and install separate. And then you'll start having the representation of WooCommerce and all the other plugins. Got it.

[00:15:35] Nathan Wrigley: Okay. No, I think you've covered that out perfectly.

Thank you.

[00:15:40] Leonardo Losoviz: Okay. One thing that you can see here on the left is that is a graphic, graphical private, schema private. And now it says graphical public and schema public. GraphQL, let's go back first to the client that I was showing you at the very beginning. As I was saying, here you compose the query, right?

And you fetch data. Give me what? Give me your users. And then the users, I want the name on, I want the email that we fetch the data. And you might actually say, should I publish the email? Should I allow users like visitors to my website to query the email? Should this information be public? On my API, like the email is a rather private piece of information.

You don't want to expose everything. So this is tricky in general terms for any API, the rest API also has this thing that you had to mention, which is the context in which you access the rest API, right? Depending on the context, there's information like the email field, which might be available or not.

And this is a very important for GraphQL, particularly for GraphQL. GraphQL, the way that it works. Usually that it has what is called a single endpoint, which is a URL from which you fetch all of your data. So imagine that you have, possibly you have heard the term a headless application, right?

A headless website. Actually, if you listen to WP builds for sure, you will know because I know that yeah, we've covered that. We have covered that. Quite interesting and quite endless topic. Yeah. But what it the commonality from doing headless is that you're decoupling WordPress on the backend and a framework to build your website on the client side.

You can use React, you can use Vue. And you basically fetch the data using the client. You call the WordPress site, the API say, give me all these data that I need. And then you render on your render on the client with GraphQL. You have one single endpoint where you fetch the data, what data, whatever you need, but what happens if someone else, which is not you also accesses that endpoint, right?

And freely explores the data that you have there. Because, once again, the GraphQL schema is a mapping of the WordPress database. Not everything should be accessible. The user email... May not you may not want to publish that, or possibly the user as an entity. Maybe you just show a list of posts in your website, but you don't want to show the users who are creating those posts.

So you, you just want to expose the post entity and not the user entity. So that's why here you. The graphical and the schema private, and then you have the public version. So this client that we're accessing here, you can see it's on my WP admin. But at the same time, there's a graphical that I'm opening here on a new tab, which is public.

This is on the internet and which is accessible to everyone. So this is the same client that we saw just now. Post, whatever tile. Okay, here we go. But now everyone can access it. Now, the important thing is that this, the schema for the private and the schema for the public one are decoupled. They don't have to be the same.

So that means that you have complete, absolute access to everything for your own needs on the backend, on your, on the WP admin and you can limit What people can access on the public side of GraphQL. So now if I check the schema, in this case, it might be the same or not, but I had a chance to actually make them different giving you less, less data.

So basically the idea is to not publish stuff that people should not be able to access in first place. Because, security issues. You're careless and then someone accesses your data and that can lead to big trouble. So you should avoid that. By not exposing the data in first place.

So can

[00:20:10] Nathan Wrigley: I just, can I just make sure that I've understood. So you've got these two different strands, if you like, of the plugin, you've got the private side and the public side will be available from outside on the internet, anybody with a web browser will be able to query that data should they figure out.

You know what the URLs are for that. And presumably if the plugin grows in popularity, that will become more commonly known on the other hand, if you would like to have things only available to you whilst you're in the WP admin. So as an example, email, if you want that to be available for the things that you're going to explain that you can do later, you can do that.

It won't be available publicly, but it will be available through GraphQL on the private side to you on the, because you're logged in and you have the permissions to do that. Is that

[00:20:57] Leonardo Losoviz: right? Exactly. You got it absolutely right. Perfect. Great. And actually I'm showing you the public GraphQL client now, but by default it's not enabled.

I'm going to show you. So the plugin has modules and these modules are basically functionality that you can enable or disable as you wish. Right now, I think it is end point. Let's see. Yeah, here we are. So there's one module called the single endpoint. When you first install the plugin, this single endpoint is actually disabled.

Now, if you see here, there's no more public side. Got it. There's only the private side. So you actually have to you actually have to enable it to be able to publish, to expose your data on the internet. And only then... Once you enable it, people can actually access your data. It's all about the security, right?

Oh, the

[00:21:55] Nathan Wrigley: default is private. You have to enable public. Got it. Exactly.

[00:22:00] Leonardo Losoviz: Okay. The private is always enabled because, if for you, nothing can go wrong. But the public one, you have to enable it. Okay. And for the purpose of this presentation I don't need the public one. Actually, yeah, let's talk about that.

Why even, why private and public? GraphQL, as we were talking just now, is for headless, right? If it's headless, there are two different ways of doing headless. The first one is with a static site.

So basically you can build your WordPress site and export it as static, like HTML, CSS and JavaScript, right? So when you do that. You have these frameworks for doing that. Actually you, you have starter frameworks started like projects with next JS, for instance, that you can have your WordPress on your laptop, like on, on your local host.

And you get all the data and you build your site. And you export it statically. So in that case, your site is you're fetching the data from the single endpoint and everything's fine because the website is on your local host. It never goes to the internet in first place. So that, that, that's fine. They know no security issue there.

But what happens if you want to build a dynamic website, say like facebook. com and GraphQL for that matter was invented by Facebook actually was released by Facebook engineers and it is powering facebook. com. So basically. When you use Facebook, you're using GraphQL and say that you want to do something like GraphQL is like facebook.

com, right? You want to build a website as interactive like that, then you need to have your single endpoint public and render the HTML on the dynamic site, like it's not static anymore. This is the, this isn't dynamic. So in that case you do need the same the single endpoint, and you need to worry about all the security issues, but.

Something that I haven't mentioned yet is that I have another use for GraphQL, which is not just building websites. It's not just headless, but it is doing all of the admin tasks that you might need to do on your WordPress site anyway. Ah, my cat. Ah, the cat.

[00:24:28] Nathan Wrigley: Here's Gato.

[00:24:29] Leonardo Losoviz: Yeah. This is the other cat.

Gato go away. Sorry.

[00:24:33] Nathan Wrigley: Sorry. I should say Gato in, in which language is cat?

[00:24:38] Leonardo Losoviz: Yeah, this is Spanish.

[00:24:39] Nathan Wrigley: Oh, thank you, .

[00:24:42] Leonardo Losoviz: Okay, take it away. Sorry. Someone is taking in the cat. Yeah, take the cat. Take the cat. The cutaway. Yeah. Okay. GraphQL, it's much more powerful than just building WordPress like sites in general.

You can send emails, you can create posts. You can call an external service. You can interact with external APIs, fetch data. You can post to Twitter. You can post to Facebook, et cetera. So these are things that you have plugins nowadays in, in WordPress, like social media share, you publish a blog post and it automatically connects to Facebook and it adds that to your field or it sends a tweet, right?

But that action of connecting to Twitter or connecting to Facebook, you can do it with GraphQL, right? Or you send a notification to yourself oh, there's a new post or someone bought your product and then you send an email to yourself, right? That's, that email sending is just something that you can do with GraphQL.

So what I want to say with all of this is that GraphQL The way that I envisioned this for Gato GraphQL is that just the private side of GraphQL on your WP admin. It's amazing for you to take care of your site and to create scripts that take care of everything. Something that you can do, right?

We haven't seen a lot here, but you can also do mutations, you can query data, you can create, you can post data. So you can create a post. You can pass the parameters, input title, you say. Hello, Nathan.

[00:26:32] Nathan Wrigley: It's the best post.

[00:26:35] Leonardo Losoviz: Content Okay, something. Shut up.

[00:26:43] Nathan Wrigley: Ideal. This is the best post.

Oh, shut up, Kat. I thought it was, Hello, Nathan. Shut up. No,

[00:26:52] Leonardo Losoviz: Shut up. They couldn't take it away. And then, Oh, yes, the post ID. If this goes right, I have the status and then I can see which are the results of this ID, status title and content. So now I can execute this and this has, it says that it has created a blog post.

Now let's actually go to the post section. And here it is. Hello, Nathan. So I just created this using GraphQL and it took me like, what, 10 seconds to craft the query, right? So these tasks you have to create a post and you know what the post is going to be. You can just do it through GraphQL.

You need to send yourself a query, an email. Same

[00:27:44] Nathan Wrigley: thing. You can do that.

[00:27:45] Leonardo Losoviz: Okay. Yeah. You can send email and all of these things. It's a script that you can store and you can then automate and it takes a lot of pain away from repetitive. It takes a lot of pain away. First from repetitive tasks and second one, and that this is something that is the one of the most important things.

It does everything because this is just data. So I was saying that you have applying for sharing on social media. Then you might have another applying for duplicating blog posts and another applying for this and another applying for that. What you can do is to have one single plugin and then you compose a query.

And you run the query and that, that's what it is. Oh, it's

[00:28:27] Nathan Wrigley: so clever. We will obviously, as the time goes on, you highlight exactly what it can do, but that's a nice little teaser. So post to social media, send out emails. Basically the sky is the limit. If you can imagine it. Yeah, you can do it anyway.

Sorry. I interrupted just a quick thing. Firstly, the first one is to say first of all, Max is saying he likes the look of this. He said, it looks great. That's great. But he also has a question. The private one referring, to what we were talking about a moment ago with an API key secret in a server to server context.

Correct. Now, do you? Are you able to understand and answer that question?

[00:29:05] Leonardo Losoviz: Or does to I assume that, yeah, I assume that the response is no, in that sense, because when you're in the WP admin the authentication is based on cookies. So that's a bit of a problem. So then you'll need to access the public endpoint.

I guess one thing that is possible to do, It's to access with the application passwords. Now, this is not done but it is doable. It's actually part of one of the ideas that I want to do in the future.

[00:29:37] Nathan Wrigley: Okay. Okay. Max, if that doesn't answer your question, please feel free to rephrase it and ask it again.

And Patrick's still here. He's saying GraphQL, Gato GraphQL plus simply static equals, and then he's done the. The heart icon. So that's nice as well. Anyway. Perfect. Carry on

[00:29:53] Leonardo Losoviz: Leo. Okay. I'm running a bit out of time. Now this is amazing. This is a lot of power. And this is the best of.

WordPress and GraphQL what I'm going to show you now. So I was telling you, I was saying that you can automate tasks. You, if you have a query that you need to run, like for instance, when you publish a blog post, share it on Twitter and you already crafted the query. You don't want to manually copy the query into the the client as I was doing just now.

You can store it on the server. So there's something called a persistent query. I'm clicking here a new, which is basically the WordPress editor. And now here you have this client here, which is once again, what we were looking at right now. So now you can actually do the crowd query. Actually you can also click on the fields.

[00:30:48] Nathan Wrigley: Oh, okay. So everything's on the left that you, that is available. If you don't know, hopefully it'll be,

[00:30:53] Leonardo Losoviz: I'm sorry. I actually, this is my problem because I have experience. I just type the query straight. No,

[00:30:58] Nathan Wrigley: that's okay. Basically on the left is a repository of everything that you can type. You don't have to type it.

You can click on it instead, but it's all there. It's like your encyclopedia. For GraphQL. Yeah. Got it. Yeah.

[00:31:10] Leonardo Losoviz: So this query, for instance, I'm fetching the block data. Oh, all of it.

[00:31:15] Nathan Wrigley: One query gets you all of that. Wow. Okay. Yes.

[00:31:17] Leonardo Losoviz: You can do all of that. Okay. And say that you need to access this all the time.

Then you create here this entry, and then you say block data and you publish it. What this will give you is an endpoint on that. URL that gives you all the data.

[00:31:45] Nathan Wrigley: Nice. Neat.

[00:31:47] Leonardo Losoviz: So why is this cool? This is so cool for several reasons. The first one is now this query is stored in your database, right?

Blocked data. You go away, you come back and it will be. Block data is somewhere there. It's in there somewhere. Yeah, it's at the end. Okay. It's somewhere.

[00:32:10] Nathan Wrigley: Yeah, but it's there. We get it.

[00:32:13] Leonardo Losoviz: Okay. There you go. Okay. And you can run it again. You can run it as many times as you want. Okay. I know. So it's a URL.

Now, the fact that this is a URL that you load here and that it executes, basically I'm giving you the rest API, but this is the rest API without having to the, to publish a. A controller, normally the way that it works, the recipe is that if you need a new endpoint, you go to PHP you code it, and then you deploy it on your plugin.

And then it is available here. It took me like, three seconds to do it. So this is actually, I like to say, actually, this is the best of three of the intersection of three entities, WordPress, GraphQL, and the rest API WordPress, because I'm using the visual interface of the WordPress editor.

It's a game changer that you come and then you edit everything you publish in five seconds. You have a new endpoint ready.

[00:33:16] Nathan Wrigley: Can I just ask a question? So in the example of this particular query, this block data query, which we've seen, you ran it. Is that run once and it's stored like that?

Or will it, can you run it on a, I don't know, can you force it to be run like with cron or something like that? So that it runs periodically or in fact just gets, I guess you could have another. thing, which says when a blog post is posted or published or updated or whatever, deleted, run again, something along those lines.

[00:33:47] Leonardo Losoviz: Absolutely. You can actually on maybe on the second or the third episode, we will see how to automate all of this. Lovely. Okay. You can run it with clone but this is also a URL, you can actually copy this URL and give it to your friends and tell your friends. Just call this URL whenever you want to ping me or do whatever it is that, that your query is doing.

That is

[00:34:12] Nathan Wrigley: truly cool. Yeah. Yeah. Brilliant. Brilliant. Keep going. Keep going. Okay. Keep

[00:34:17] Leonardo Losoviz: going. There's another thing that is that this plugin offers that is called custom endpoints. And also this deviates a bit from the idea of GraphQL having the single endpoint. Why is that? Okay. Let me actually first create a custom endpoint to show you what it is.

It doesn't have a lot here. It's just a title. Okay. Endpoint for Nathan. Oh, the best. And I published this. Okay. Published. Here we go. Now, once this is published what I have in this endpoint is it has its own URL and it has its own client and it has its own schema. So let me open this tab

and under this URL slash GraphQL slash endpoint for Nathan. Now you have once again, GraphQL, okay, and you can run your queries. Okay. There we go. Once again, this is now available on the internet. But. Why would we want to do that? Why do we have, why can't we have many end points? Because you might want to have different users accessing different data.

Got it. So this is, once again, this is WordPress. When I was building that the GraphQL. I was thinking this is not GraphQL, for WordPress. Who uses WordPress? I don't know. You might have an agency and you have a single source of truth for a lot of content, for a lot of clients, and you want to give them access to their data and not to all the data.

So how can you have a measure for them to access only their data? So what you can do, for instance, one thing that you can do is to make this is a custom endpoint. You can make it So here are the visibility. Oh yeah,

[00:36:15] Nathan Wrigley: Yeah. Just using the WordPress. Oh, yay.

[00:36:18] Leonardo Losoviz: No, actually let's do this one that I love.

You can make it password protected. Okay.

[00:36:27] Nathan Wrigley: It's a very complicated password, but yeah, we get the point.

[00:36:30] Leonardo Losoviz: Okay. And I update. Now I go back here and I refresh this and now it says, Hey, you cannot access this anymore is password protected. And once I access this. Nathan, now I can access the client. So now you can give an endpoint just for this one client and say you can access your client.

Sorry I'm confused. There are two clients here. Yep. Yep. Your client who pays you money. Yeah. The

[00:37:03] Nathan Wrigley: client and your client and

[00:37:05] Leonardo Losoviz: the GraphQL client to access the data. Yeah. So you can tell your client this is your client. Yes. Yes. Okay. And you can also. Enforce access control. So there's the thing here called schema configuration.

And the schema configuration is a set of rules or constraints to apply on that endpoint. So let's see what that is, how that looks like. Okay. the schema configurations and I create one new schema configuration.

[00:37:41] Nathan Wrigley: Okay, so the ones that we saw just then, they come bundled with the plugin out of the box today, but no.

No. The plugin

[00:37:48] Leonardo Losoviz: Okay. Yeah, the plugin is empty. All of this is. Actually, this is a testing site. If you actually, if you the, if you open the The test drive from the homepage that goes to InstaWP. It has all of this data because, I didn't want people to have an empty site okay, what do I do now?

So I created many custom endpoints and I created many persistent queries, but when you install the plugin, no, it's all empty. It's empty in there. Okay. Yes. Okay. So this is. All the data that you can input to customize your end point names. Namespacing is similar to PHP namespacing.

That is basically a way to have different entities, sorry, different plugins have the same entity name. For instance, WooCommerce has a product. Yep. Okay. And EDD easy digital downloads. It also has a product. What happens if both plugins are installed on the same website at the same time, then both of them are installing the product entity.

Yeah. So there is a conflict. With this, you can enable namespacing that what it will do is to Like to pretend That's right. Yep. Yep. A name like e d, d or Ooh. Just before the name of the product. And only in that case then the entity will become, Ooh, product and e d, D product. Then you avoid all of these conflicts.

Yeah, avoid

[00:39:23] Nathan Wrigley: all the collisions that you might have. Yeah.

[00:39:25] Leonardo Losoviz: Response headers. This is for course. You can set the course headers. So then you can actually access the website without the issues for course. Mutation scheme. We're going to see this maybe on the second session. There's something called nested mutations, which is basically you can say, give me all the posts.

And then for each post, update this property of itself. The idea is that you can do bulk edits. You can query a bunch of posts, and as a property, instead of querying a property, you modify a property on all of them. That will be a... Boy,

[00:40:08] Nathan Wrigley: that's powerful.

Wow. That's

[00:40:09] Leonardo Losoviz: so powerful. Yeah. And, oh, multiple query execution. We're going to see that we should see it today if we have time and a bunch of other things. And the one that I wanted to show you concerning the the security is access control. Access control is a list of rules to say who can access the schema.

And here it shows the ones that you have created on the website. You can select this, whatever. This is another custom post type that I'm going to show you now. Let's go there. Access control lists. So I'm going to create I'm not going to create because we don't have a lot of time. I'm going to open one that, one that I have already created.

So I have here one access control list that is called power users. That it says the field. Posts, and then these are the two fields we will show you, I'll show you later what it is. Only the logged in users can access this. These comments field, only the admin, only the administrator or editor role, a user with those, any of those roles can access it.

The custom post only the author can access and so on and so forth. Okay.

[00:41:38] Nathan Wrigley: Okay. So this is a table. We've got things on the left, what you can access things on the right, who can access. Okay. So all of that the one title power users. Got it. Yes.

[00:41:48] Leonardo Losoviz: Let me add a new entry. So here, basically you say the fields.

Okay. This field. Okay. So these are, will be the fields containing the private data for that specific client. Yep. And then you can say, okay, if it is public or private, I'm going to show you soon what that is. And then who can access this? You can say nobody can access this, or you could, you can say by user capability.

[00:42:15] Nathan Wrigley: This is such a neat implementation of Gutenberg.

[00:42:17] Leonardo Losoviz: Or by user role

or by user state, which is logged in or not logged in or by IP. And this is the one that I really liked the most because you can say, okay. Client of mine, which is your IP. And then you can say, okay, you, you type that IP here, whatever it is. You can also do a regex. You can do this or something like that.

I'm not the best with regex. And then you can say only this guy will be allowed. Let's see that actually because this is very powerful. I have a few persistent queries here which have this validation by IP. So I execute the query and it says the client IP address must not satisfy constraint blah, blah, blah.

Hence, I am not allowed to access the, that field, the field approved. Yeah. And so here I have it as, as null, it doesn't give me the data. Actually, let me show you another one do I know that I'm, So really

[00:43:36] Nathan Wrigley: don't worry, it always happens, but it's amazing, like it's actually once like you, once you've got familiar with the UI and you figured out what the permission UI looks like in the UX for that is you can go in, drill down and set up really granular control of.

Almost anything. There's probably some limitations, but more or less anything can be allowed, disallowed, on an IP, on a logged in status, on a username, on whatever it may be. It's remarkable.

[00:44:08] Leonardo Losoviz: Let's see. Oh, it's okay. Actually, there's something that I want to show here. I forgot to mention that we were looking at persisted queries and you Nathan asked about the data, if the data is stored or if you can refresh it, if you can access it again, and one thing that I forgot to mention, here we are, so we'll do it now, is that the query is stored in the server, but it can still be made dynamic through parameters.

So this one, for instance, right now it is showing two entries. Of posts, but if I say limit equals let's say one, now it shows only one.

[00:44:45] Nathan Wrigley: Oh, neat. Okay. So there's a whole load of URL parameters that you can apply, not just take the, okay k, k. Yes.

[00:44:51] Leonardo Losoviz: And actually, let's actually look at that because that's super powerful.

Ha, he's thought of everything. You have here the you, basically you, you are the parameters in the query itself, yep. You say limit, okay, you had to pass this. And by default, It gives you this. And you also say should I accept the variable as URL params? You can say yes or you can say no.

[00:45:16] Nathan Wrigley: Okay, so you can disable that if you wish. Okay.

[00:45:19] Leonardo Losoviz: Yes. Yes. Exactly. Okay, I'm back to the... Let's see this. Is it this one? Severly running out of time.

[00:45:42] Nathan Wrigley: Don't worry. It's okay. We can either extend it, we can either keep talking for a little bit, or we can punt things onto another episode. Don't you worry. Either way, we'll get it covered.

[00:45:54] Leonardo Losoviz: Yeah. Okay. Okay. That's good. But basically if you access, Oh power users, which one was it?

Oh I know what I will do. I know what I will do. What's up, cat? Yeah, cat's back.

[00:46:11] Nathan Wrigley: He wants

[00:46:12] Leonardo Losoviz: to be near its plugin. We create a new persisted query. Users, name, display name. Okay. So this is working here and I schema configuration. I think maybe. Let's see if this one works. Okay. I publish this. So now I have the persistent query.

I open this. Okay. So in this case, the name has been disabled for this user. And let me see.

Okay, perfect. Do you see my screen here?

[00:46:53] Nathan Wrigley: I see. Yes, I do. I see. Yes, basically, I can see your mouse

[00:46:58] Leonardo Losoviz: moving around. Yeah, that it says you must be logged into access field. Whatever. Oh, no. If

[00:47:02] Nathan Wrigley: you okay. So if you have some sort of pop up. Oh, okay. Sorry. No, we do not see that. I apologize. Oh

[00:47:08] Leonardo Losoviz: let me. Oh, that's okay.

[00:47:10] Nathan Wrigley: So is this is this a browser

[00:47:12] Leonardo Losoviz: pop up? Yeah, because no, I'm in an incognito. Let me switch to to my window share.

[00:47:22] Nathan Wrigley: Okay. Let me, do you want me to swap you over to the other one?

[00:47:25] Leonardo Losoviz: No. Oh yeah. You had the other one, right? Yeah. I've got that

[00:47:28] Nathan Wrigley: available if we want to do that instead.

Yep. So what I've just done is Max was using Firefox and so we were looking entirely at Firefox only. And now we've gone to Max's desktop. So hopefully whatever appears will appear. So you could run that again and see, there are some things that the the operating system Mac in particular, they just don't allow apps like Chrome to have access to things like, I don't know, notifications that the browser throws up and things like that.

So we'll see, maybe it'll come, maybe it

[00:47:59] Leonardo Losoviz: won't. Okay, so can you see that I have two, two windows here?

[00:48:02] Nathan Wrigley: I see two windows, one on the left, one on the right. You're on the right one at

[00:48:05] Leonardo Losoviz: the moment. Yep. The one on the right is incognito, so I'm not logged into WordPress. Okay. And you can see that the, here it says you must be logged into access field.

Yep. There we go. Yep. Because that was a rule that this display name only logged in users could access it.

[00:48:19] Nathan Wrigley: Got it. Okay. Okay. So it wasn't a notification from the OS. It was just something. Got it. I

[00:48:24] Leonardo Losoviz: understand. Yep. And the same end point on this. Other window where I am logged into WordPress. There's

[00:48:31] Nathan Wrigley: no error, as it

[00:48:33] Leonardo Losoviz: were.

There's no missing. Yeah no, it's perfect. It's great. Yeah,

[00:48:36] Nathan Wrigley: it's not an error, it's like a notification. Just to say, you can't see this,

[00:48:40] Leonardo Losoviz: got it. Yeah, exactly. Okay. And, okay, let's go back to, oh, sorry. To this. So here it says you must be logged into Access Field Terra for type. It's actually telling you what is the reason why you cannot access the data.

And sometimes you think, do I want to explain the user that they need to have this role or this capability to access data? No, I don't want them to know that this data exists. It has to be private. So that's what we were looking at before, that it was either public or private access, the access control.

So let's edit that. There is one entry for display name.

I'm going to

[00:49:40] Nathan Wrigley: search for it. That's okay. Take your time. Max, just sorry, not Max Patrick has posted in. Don't worry, these live streams are always running out of time. He's right. An hour is not as long as you think it is when you do something

[00:49:55] Leonardo Losoviz: like this. Yeah, but I haven't even started with the recipes.

Oh,

[00:50:00] Nathan Wrigley: it's okay.

[00:50:01] Leonardo Losoviz: We'll get, and then we skip the recipes and we do a longer one.

[00:50:06] Nathan Wrigley: Yeah, we can do that. Next. This is just a, this is just a taster. Just,

[00:50:11] Leonardo Losoviz: oh, here is display name. So you can see my screen, right? So I have here that the display name it says default, but the default is public. So we put it as private.

And now when I update this. And I and I refresh here. Yep. It's gone. Now here, the error message is different. This is they no field display name. So this is super powerful because basically what you can do is you remember at the beginning, I was saying that we have. We have the private schema and we have the public schema and they can have different entities.

Maybe you don't want the user entity to be available on the public schema. So what you do is you select the field that is the user field and the users field and you say nobody can access this and you make it private. And when you do that, it literally disappears from the schema. So when you go to the schema that that, that client that you can click and then you can zoom in and you can zoom out and all of those things. It's just gone. It's gone. There's nothing there. It completely disappeared.

[00:51:25] Nathan Wrigley: Like you never knew that you were even missing it. It's unavailable to you in every sense of the word. You cannot see it. It doesn't exist.

Got it. Exactly.

[00:51:33] Leonardo Losoviz: And the rules, as we saw just now, you can say by IP. So if you come from this IP, the schema looks like this. But if you come from a different IP, you're not my client. Then it looks like this.

[00:51:46] Nathan Wrigley: I get it. I am keeping up. This is, yeah, I understand. If you're, I don't know, you are, I don't know, X server over there with this IP address, you can get this information but if you're a different server over here you're entitled to this information and we know what your IP address is and so we've set it up in that way.

What you're basically showing us is that it's infinitely configurable and although the UI is is full it's a question of just Learning where everything is and figuring out what the options are. And that's what you're showing us. But I guess complexity means that, there's just a lot to look

[00:52:20] Leonardo Losoviz: at.

Okay. Yeah, great. Exactly. Yeah. For me, the important thing is this is an API. Let's start from there, right? The rest API is an API, but we're talking about WordPress. And for me, the issue is there's so much we can do with WordPress. How can this API. Truly power WordPress. How can it not restrict WordPress with whatever WordPress already allows us to do?

Managing the data for our clients, right? Multiple clients. Having one WordPress site at the top that then it distributes content to many other sites, like downstream sites. And it has to distribute this data or that data or this data. There are so many things that you can do with WordPress. So what I was trying to do is...

Okay, let's see how we can empower an API to not restrict WordPress and you can do everything you can do with WordPress through these queries. And then you come here, you, for your own personal use, you come to the graphical client and you call your query and at the same time you provide access to the queries to their clients.

And so on and so forth, right?

[00:53:29] Nathan Wrigley: Yep, that makes perfect sense. Okay, so just for Leo's benefit, we're rounding out on the hour. I realize that there's probably a lot that you didn't get to show there. What do you want to do? I could certainly give it another 15 minutes if you want to press on, or if you want to just call it a day there and rehash the episodes that are to come.

It is entirely up to you. We've got a few questions to go through, so that'll probably take two or three minutes. You make a quick... Decision and I'm happy if you want to go for another 15 minutes or so.

[00:53:59] Leonardo Losoviz: You can see my, my notepad here, right? Yes, we can.

[00:54:03] Nathan Wrigley: Yeah. Here's the live demo. This is what we were trying to get through.

Where did we get to?

[00:54:08] Leonardo Losoviz: So the whole session number one, and we have done this. We have done the introduction. I gave you a very long. Long winded introduction. And I haven't even really shown everything that I want to show, but it's okay. Yeah, we have seen running the admin. We have seen creating the API endpoints, the custom endpoints and the persistent queries.

We created a custom endpoint that was password protected and you can also create it private. And we have seen access control similar to access control that is catching. I'm not going to show these because of say for the sake of time, but it works the same time. You select what fields. Are in in, in the schema.

And then you say, which is the time that they need to be cached. And when you access them through get, not through post. Just now, with the graphical client, everything is executed through post. And through post, nothing is cached. And we're talking about HTTP caching. But if you access it through get, you have the URL.

For instance, with the persisted query, that can be cached on the server, if you have a plugin, or on a CDN. If you have once again, simply static that you access the static files and you're normally accessing them through a CDN. You can do the same here with GraphQL that you can access your API through a CDN and then cache the results.

And this is all automatically calculated so that a query that it includes. This field and that field will have this max h and if you have this other field and this other field, you will have a different max h depending on the values that you can configure. This is actually very valuable, but I'm not going to go into this.

I'm just going

[00:55:56] Nathan Wrigley: to raise the fact that Max asked this as a question. He did actually say, can we cached queries for a time? So I think we've had an answer to that asking if this makes sense for performance. So depending on how you get that query, the answer is yes.

[00:56:09] Leonardo Losoviz: Thanks a lot. Absolutely. And actually this is really powerful because the caching on the timing of the caching depends on the fields that you provide on the query.

So you can be very fine grained. You can say. The user the user's username will never change. So then the caching for that is one year. But the username or the description, maybe they will change it every now and then so you can give it a caching of one hour. And the user I don't know, comments, maybe because the comments, they can be posting comments all the time.

Every one minute. And so it's very fine. Yeah,

[00:56:49] Nathan Wrigley: very fine. Yeah. Yeah. Yeah. Very granular indeed. So what do you think, Leo? Do you want to, do you want to keep going for a little bit or do you want to call it a day there and come back next week with a slightly different configuration of the schedule?

[00:57:05] Leonardo Losoviz: Yeah, I think this is good. I think I've shown quite a bit. Okay,

[00:57:09] Nathan Wrigley: that's perfect. In which case, let's just ask a couple of things. Max, thank you for all your comments. Patrick as well. That's really great. Hopefully there'll be people watching this after the fact, but there's a so this goes back to the question that Max asked.

Quite a while ago about the private public and we weren't entirely sure what he was talking about. And he says in response to that, I was asking because I was thinking if I use WordPress as a headless backend and in my client JS application, I wanted to log in a client and access recipes to create modified posts on behalf of the user.

So I guess. That clarifies what he was saying. Does that alter what you wanted to say back to him? No. No, that's fine. Okay. All right. Let's move on. He also says, yeah, we've answered his caching question. Oh, you want the other one? Do you want that one? Yeah. Nice. We've got two screens and one of them was going to infinitely recursively show us.

So we've had that caching question. Is there. There it is. Oh, so that's in answer to that. This is the one I wanted to find. What's in today's presentation was the free version and what was a paid upgrade add on probably we'll get to that in the future, but I don't know if you just quickly want to address whether or not everything today was free or not.

Yeah.

[00:58:28] Leonardo Losoviz: Access control and catching that's paid. Everything else is free.

[00:58:34] Nathan Wrigley: Okay. Thank you. So the vast majority of what you saw was available for free, but access control and caching was not, and then Excel Avita, very informative and useful presentation in short time. Looking forward to the next episode with dynamic query.

So yes, we will be back. I imagine that the schedule might change a little bit. What we thought we were going to do might be a little bit extended because of some of the things that we maybe didn't get to today, but we'll be back this time next week. So we're back at Three o'clock UK time. I think that's 10 AM Eastern and 7 AM Pacific.

We'll be back next week and we'll continue this journey. And the idea really is that after five or so weeks, you will have a full comprehensive go from beginning. That's what we did today right to the end and you'll be able to watch them back to back. So if today's episode left you wanting more, we'll be back next week and we will give you more.

So I guess, Leo, the first thing I need to say is thank you. Thank you for joining us. Thank you for giving us that introduction. Hopefully it's got some people's brains worrying about the kind of things that they can do. It will all become clear in later episodes what it is that Leo was doing today because it may seem a little bit dry.

It may seem a little bit. Stuck in an editor, you've got to write things out. And so stay with it. Stay with the course. I'm so

[00:59:54] Leonardo Losoviz: excited. I want to show the use cases, all of the potential, all of the potential features. Now I want to show you what you can do with this.

[01:00:03] Nathan Wrigley: Yeah. And that's the secret thing, right?

That's the point. Once you get to what it can actually do and not how you do it. You're going to be lapping this up. It's really incredible. Okay. So one more little comment, just may Yarrow just saying hi, nice for you to join us. Thanks so much. Okay. We'll end it there. We will be back in a week's time.

Thank you so much to Leo for chatting to us today. I'll see you next week. Leo, take it easy.

[01:00:29] Leonardo Losoviz: Thank you.