 everybody who's watching or watching later. This is session two of Headless WordPress development and I'm here with Jeff Everhart and Tom Woodward who are gonna help us expand on the stuff we learned last time about you know what what you can do with Headless WordPress and this time we're gonna dig a little bit more into specifics look at some examples do get some data out of API REST APIs and we'll talk about GraphQL so I'm pretty excited to see all that stuff and but I'll kick it right off to Jeff and Tom I guess why don't you Jeff you can reintroduce yourself and Tom you can introduce yourself just in case someone's tuning in for session two. Yeah sure rock on so my name is Jeff Everhart I'm a developer advocate with WP Engine and I focus on advocating for and educating developers on Headless WordPress technology some of which WP Engine is you know developing as open source projects or products that we market but then really I'm just here to support the community and to sort of build this style of development through advocacy work like this and I'm pumped to be here so Taylor thanks for having me I'm excited to be back in the saddle with my good buddy Tom so I'll kick it over to him. Alright so I'm Tom Woodward and Jeff and I used to work together in the good old days of VCU I now work at Middlebury College and have been kind of wandering around in WordPress land for I don't know good 15 20 years now which is terrifying to say so yeah. Yeah and I'll say as kind of like an aside you know when did the REST API come out Tom like 2016 really at the start of when we started working together at VCU so you know back when Headless WordPress was even more in its infancy than it is now like we were always messing around with this style of development and sort of just seeing what we could apply this API driven style of development to in terms of the products that we could create and the tools that we could create for people and it's so it's really flexible and I figured I'd kick us off by just like sort of resetting the stage based on where we left things on Tuesday and so I'll just sort of reiterate this because I know we might have some folks who are watching this stream haven't watched the other one but I always like to answer this question because this is something I get a lot from people who are new to Headless WordPress like just what is Headless WordPress and maybe they've heard it in the context of a specific set of technologies and so one of the things that I like to talk about is that Headless WordPress is an architectural pattern and not a set of specific technologies right so I often talk about Headless WordPress in the context of building a house right we have raw materials we've got mortar we've got bricks or we've got wood we've got concrete we've got cement siding you know we have vinyl siding we have all these different materials that we can then take and assemble into blueprints or patterns that we can then reuse to build this these houses and in this case we're talking about digital real estate and right those span a variety of different aesthetics a variety of different functional purposes right and so I don't want you to feel that Headless WordPress means using any one of these things to build a site really what it means is using WordPress's API capabilities whether that's REST or GraphQL to build some of those different experiences and so we can have our Spanish style stucco you know Mediterranean tile villas and then we can also have our you know log cabins that look like they're up in the Swiss mountains or something right so there's enough room in this area of development to sort of satisfy all those purposes but what we'll do now is like just sort of take a look at this architectural diagram and I've only got really two of these for you today if you're with us on Tuesday you've already seen this one but this just describes what the interaction between traditional WordPress looks like for the visitor the developer and the person who's publishing the content and I think that this is important to sort of talk about especially when we compare that to what Headless WordPress looks like so over on the right hand side we have this visitor right and when they type site.com page into a URL bar you know maybe they're sorry maybe they're interacting with a CDM but ultimately that request gets forward forwarded on to your WordPress server right that stack of PHP files that's living on your lamp stack and it's WordPress's job to take that URL and to say okay are they looking for a post or a page which template do I need to render and then it goes to your database gets all the data and renders that up as HTML and ships it back to the user right so that's the interaction that the visitor experiences with WordPress as a developer we have a similar experience right we're interacting mainly with WordPress core we're creating themes and plugins and PHP and uploading those to the server and most of our interaction with WordPress is mediated through through those means same with the publisher right when they go to publish content in the CMS they log in the WP admin and you know maybe you've got custom post types or meta fields out there that you've structured out so that things look a particular way but ultimately that's what that experience looks like for the publisher right they're all interacting with this WordPress core environment now Headless WordPress flips that on its head just a little bit and so when I show a lot of people this diagram like I sometimes see like eyes bug out because it is by nature just a little bit more complex and then the other thing that I'll also mention is that you know us at WP engine obviously like we're we're investing a lot of time energy and resources into open source headless tools but at the same time we're also you know selling hosting products right and those are geared towards a specific audience a specific subset of people so a lot of what you'll see today is geared towards those types of people like your web agencies out there who are developing you know sites for large enterprises or businesses you know so here we'll start with this same visitor journey right and maybe they're interacting with a CDN ahead of it but what when they make this request for site.com page a lot of the times that doesn't necessarily go directly to WordPress right and I'm calling this a client here just because this is a really flexible space in this architectural diagram and so this can be a lot of different things this to be in this example under JS runtime so I talked a lot about full-stack JavaScript frameworks like next NUCs spelt kit things like that that are a JavaScript based application that's going to intercept this call they can also be as simple as an HTML page running on a separate server right so they're requesting this HTML page or an iOS or Android application right so this this space right here could really be any number of different things it can be as simple as an HTML page can be a total totally separate mobile application or Internet of Things device but what happens here is when we make a request of this application it then looks at the looks at the particular URL says alright what is it that they're trying to get and then it makes a request back to WordPress core using its API and so basically it's saying you know go out to your API get me all of the data for the post with the ID of 137 WordPress responds to that returns some data back to us and then once it gets back to this application we get to make some determinations about how that HTML or presentation ultimately gets sent back to the user okay so I know it's a little bit more complicated but bear with me for just a second because there are some good reasons why we might want to do this so as the publisher the publisher still gets to interact with WP admin just the way that they normally would but it gives us as the developer a lot of flexibility in how we want to build this sort of intermediary step right if we're building an iOS or Android application that requests data from the WordPress API we're gonna use a specific set of tools to do that if I'm building a full stack JavaScript framework driven website like a next JS website which is sort of built around React you know I'm using a specific set of tools to do that and so there are a bunch of other different ways that we sort of talked about in our last section on this sort of spectrum of complexity right so you've got those things over here those standalone clients like an iOS or Android application on the right you know we've got next JS and things like that that require their own server to run and that's part of what our Atlas hosting platform solves right is if you want to use a separate server to run the front end of your website and really just use WordPress as a CMS you know we've got tools that enable you to do that without overloading your infrastructure or your people right but I've also said that this could be as simple as an HTML page and in a lot of cases what these front end frameworks something like Gatsby for example enables you to do is it enables you to sort of get the best of both worlds like I get to write JavaScript components design my pages in this front end framework and then it will statically generate all those HTML files so that there's really not a huge difference between that and just a basic HTML file when you load it up in your browser so and this again just gives us as a developer a lot of flexibility in determining how we want to solve this particular problem and what we want this sort of intermediary application to be and then WordPress's responsibility is really relegated to you know creating that publisher interface so that people can input data into the CMS and then returning that data to a variety of applications via the API so I've said that word a lot and again I just want to go you know really really as low level as we can or maybe as high level and and talk about what these terms mean just because I'm not sure where everybody's coming at from the skill wise so what's an API API stands for application programming interface and you'll hear this word tossed around a lot and all that really means is that it's like a set of rules or conventions that allows two systems so maybe you have WordPress in this application or sometimes a system in a human to communicate in exchange data and I emphasize rules and conventions there because I think that's ultimately what's important you know no two APIs are the same some of them have the same convention some of them follow the same patterns and same rules but there's going to be slight differences between them and so most modern APIs use something called JSON data to transmit and interact in that way and so what JSON data looks like if you've done any work with JavaScript it looks very much like a JavaScript object literal right we have these curly braces and inside of these curly braces we have what are called key value pairs so on the left hand side of this colon we have a key which basically says what it is and then on the right hand side of that we have the value so here you can see we've got this object with that maybe represents me as a user and over on the left hand side we've got this first name property or key and the value of that's Jeff last name ever hard but to complicate this just a little bit JSON in itself can be nested and contain other objects right so here we see this example where we've got a really simple key value pair first name on the left hand side and then Jeff on the right hand side but for my contact information maybe I have multiple different contact methods listed in this service or this program and so I've got contact here which then opens up another object that has its own key value pairs so my Twitter handle is this and my website is that and so if you don't have a ton of experience working with Jason one of the things that I'll recommend that you install look up Jason formatter JSON formatter it's a Google Chrome extension and it'll be really helpful here in just a couple of steps once we bust out of this presentation mode and start looking at some of these actual API's so what I want to talk about today in this first part of the session are a couple of different popular WordPress API options I'm gonna give you sort of an overview of each right now and then what we'll do is we'll bust out of this slideshow and I'll pull up some tools and Google Chrome and we'll walk through a couple of these different things I'm gonna start with the rest API because I think that's important because the rest API ultimately is what's built into WordPress core right so when I talk about the rest API this is a core part of WordPress if you've used the block editor the block editor interaction is pretty much entirely built around the rest API so once you load that block editor everything is really just a single-page JavaScript application manipulating data and then sending data to and from this rest API to save your changes to get additional data back to popular blocks so if you're looking for like an example of that you know it's in there it's not going anywhere but rest architecture which stands for representational state transfer that's the last time I'll use that word because it's not super important but it focuses on creating an endpoint for each resource right so we have a URL to get our posts a URL to get our categories our authors our pages all those things are separate collections of resources and so with rest that's great everything's really separate and nice but sometimes as application developers that means we might need to make multiple round trips to get all the data we need okay so if we're looking for posts and pages to construct an html page for one particular view like say I've got a post data up here and then I've got some related pages down below those might necessitate two separate calls to the API so that's one issue with rest the other issue being that sometimes we get back more data that we need than we need which is called over fetching so when I hit an endpoint to get data from a particular post I don't really get to choose what that data looks like or how it's structured a lot of times I just have to accept whatever the API is going to get back to me now there are a couple of caveats to this with WordPress there are two things up I'm sorry that we'll look at here in just a second called you know the embedded fields that'll address some of that but those are just some of the core I guess developer gripes around rest architecture in part of what graphql likes to solve so over on the other hand other side of this slide we've got graphql okay and so graphql exists as its own thing sort of separate from WordPress right graphql was a technology that was invented by Facebook and it's essentially a declarative query language that turns the word WordPress database into a graph via a plugin called wp graphql so there's typically one graphql endpoint that accepts these formatted queries and that returns data from across that graph so the benefit of this is that we can get data from multiple collections in the format we specify all of one request right so I can say get me the post data with the post id of 29 and all of the pages written by the author with the idea of nine and I can send that all off as one request and I get back just one response and so I think the barrier here is added complexity right this isn't a core piece of WordPress technology even though I think Matt Mullenwig has like privately admitted that if he had to do this again they might have done graphql as the api mechanism for WordPress instead of in set of rest but so we've got to learn we've got an installed an additional plugin there are some barriers to learning obviously graphql I'll show you some tools that are built into this wp graphql plugin that make composing those queries really easy to do but then also and sometimes you know depending on how we're building our application you might need to install additional packages to sort of help you manage that but both really cool tools and then I think we should go take a look at and so I'm going to hop out here and I'm just going to check in Tom I know that was a decent decently long spiel is anything you think I should go back over or anything you want to emphasize well I have a question happened yeah just out of oddness is sake right when we talk about headless you you emphasize like it's not so much about technologies it's more like a I don't know an orientation so would it be fair to say it's really just using part of WordPress for one thing and then being able to access and do whatever with the data in another way shape or form yes I think really the architectural pattern centers around this interaction like this diagram again is sort of based on the hosting platform the wp engine offers which is geared towards a specific set of technologies right basically using JavaScript frameworks to create this no j s runtime I've got a server running next that powers that it listens for the request from the user and then what I would say that the headless interaction is this right me having any type of application which could just be a web page out there requesting data from the WordPress API and then returning that data and then you yeah deciding what you want to do with that and how you want to do it and I think there's a lot of blend there too like because we can also have partially headless things and I showed a couple of those last time where we may have a traditional WordPress site with headless features right that's rendered by a theme but then the theme has some JavaScript in it that gets data from the API and makes an interaction that would have been otherwise difficult to do a little bit easier yeah so we're kind of taking advantage of usually writers familiarity with WordPress and the fact that they're dealing with user management and all password resets all that garbage and then we're being able to do different things on the front end but without being kind of trapped maybe by the WordPress theme methodology yes and that is that is really what we hear and so again we're coming from WP engines core kind of customer base which is agencies and small businesses and and that's what we hear is that the people who are doing the writing want to use WordPress because they're familiar with it because it's nice it gives you all those tools that that you just mentioned but the developer on the other hand wants a little bit more freedom once a little bit more flexibility and I think what I found personally and I'm just kind of recalling the different projects and like the lifecycle of headless stuff we worked on at VCU it's like anytime you wanted to do something a little bit more advanced with JavaScript it became like a pain to work inside of the the current theme paradigm so I think this just really gives you the developer like a ton of flexibility in saying this is how I'm going to make my thing and then you know you've got pipes running down to the utilities and that that's what's supplying your water your electricity you know so like if we want to go back to our house metaphor that's kind of you build your house you hook up to WordPress's you know data plumbing and get the data out and then you decide what you want to do with that where you want your light switches and all that stuff so just as a curiosity question and then I'll let you get on with your stuff if I were insane I could build a PHP based headless scenario that uses WordPress's XML what it counts as if that's so false yes I think I think you're right I mean and really we had this kind of discussion the other day as a part of our in our like headless WordPress discord somebody was like when would you say that this was like headless WordPress was born and my answer was kind of like you know probably around the time the rest API was but other people's opinions were really it was like the XML RPC was the original headless mechanism so like I don't think you're insane there were absolutely people who were doing that and those early examples of like the WordPress.com iOS apps where you could log in and manage your WordPress site all done through that XML RPC API and I mean if this is what we're saying is really it's just about using the data pipes of WordPress to do stuff like you know I think it's been going on a lot longer than we would say but yeah so I would call that headless great thank you for indulging me yes and I know and I don't think you're insane either because like after I was like who would do this and then a bunch of people were like oh I've done that and I was like okay well all right I'm just checking I'm just gonna run over here and check the discord chat real quick yeah exactly and I think Taylor Taylor has a good point like and what I like about the headless thing is like you don't you you can just use this with what what technologies you're already familiar with and you don't necessarily need to go learn anything really specific about WordPress to do it as long as you're comfortable just transacting through the API um cool yeah so let me from there let's let's shut down the slideshow for just a second so I know I mentioned this and I think this got thrown in the chat the jason formatter uh chrome plugin really helpful and then another tool that I'm going to be using today I'm not actually sure how to say this I think it's httpi but if you open this up it's just httpi.io and then this is really nice and what this is this is an api client and so this is going to help us facilitate some of the interaction with the WordPress API during during today's session and if you just click go to app it should take you to the app and it's nice enough that like it saves all of my requests between the different sessions where I've kind of like played around with stuff yeah and friend it is a little bit easier than postman and really great to get started postman I think you've got to download or sign up for an account okay so you can either do that or while we're using the rest api the cool thing is since these are just URLs I can just copy and paste them into the browser and if I've got the jason formatter plugin it'll format that response for me so what I wanted to do is just sort of start at the base of the WordPress rest api and just like work our way up to sort of orient you to what this is and how you can use it so every word since this is in core unless you've like intentionally shut this off and many of you may not know this if you've got a word press site you've already got an api haven't run it unless you've intentionally shut it off so that sort of comes out of the box again Gutenberg the block editor use that extensively so that's its mechanism for doing all of the cool or uncool depending on your position things that it does but for better or worse that's what it uses so I've got my website up here feel free if you don't have a WordPress website to play around with we can load test my server and it's just jeffreyeverpart.com slash wpjson right now but if you've got your own you know it's kind of cooler to play around with and see what you've got in there um but I'm going to go ahead and just make a request here like this base this base wpjson URL because what this does is this sort of gives us an overview of the site like you can see the site name the description URL the home so these are all things that are stored in that like site site meta table but one important thing that it gives you also is this list of different namespaces right because we have in here a huge list of stuff and you can see that some of these are plugins like Yoast has created its own REST API namespace a kismet o embed I've got a bunch of other plugins installed from the WPMU dev folks that have APIs that they've tapped into and added on to the WordPress API but the core WordPress REST API is available at this wp slash v2 URL so if I just append that to the base that I'm working with already just go to wp-v2 it's going to give me just sort of a slightly different response so that lists the namespace and then what we also have inside of this API namespace right so basically this is a way for plugin developers to essentially add on to the WordPress REST API without necessarily conflicting with anything else we're doing right so the same way we might namespace our code in PHP we can do that in the REST API and that's just a really clean way of ensuring that everything that WordPress core is doing isn't affected by something like what gravity forms is doing what Yoast is doing so that's that's the reason for that but what we can see here is once we've gotten past the namespace part right we get down into routes and what gets listed for us in the response from this sort of base request are those routes and it gives us some information about what we can do with them right so here if we look at this one wp slash v2 slash posts I mentioned in the intro that REST APIs are built around this idea of collections right so this is our collection of posts if we want to get a list of posts that's the URL that we use and then we can see here that we've got a couple of different methods so when we start talking about APIs and this really goes down one lower further into like HTTP they're different methods and if you're familiar with using PHP forms to do stuff you're probably familiar with get and post right get means I'm pulling something down from the server post typically means that I'm sending data to the server so those are the two methods that are allowed on that particular route and getting the posts obviously like what we'll see in a second is going to get me the posts right and if I want to create a new post from this I can post data to that and it will create a new post so let's dig into that and just sort of see what we get back so we'll jump here into posts ah it's already slowing down that means people are doing stuff which is which is nice okay so here we are on just our basic posts route and this is going to bring us back a list of all of the posts well not all of the posts but some of them I can't remember Tom if you remember what the default is um for that particular route but 10 I think 10 okay yeah and so we got so it's a cool so let's dig into this and just sort of see what we got because again right we're getting back Jason data and then the idea is that we would use this data in our application to do something like maybe if we kind of sort of collapse all this stuff down like we can see that we get back this array of posts and here you know we can like loop through them maybe we make a post card for each one that's pretty flexible um and again as developers we can we can do that sort of however we want um so here we get some data for posts like we get the ID the date and this is pretty much like all of the default data that I would get the status whether or not it's published what type of resource it is a link to it we've got the title uh the content down here which again is a nested property so we've got content and inside of that we've got another object with this render key and then that is the value when we look at the value that's basically like the html of our post right so whatever stored in that post content field in your database for that post is what gets returned uh by that part of the api um we get an excerpt and similarly we get rendered and then down here we start to get uh into like other other related data right so we're in posts we're getting the data about the post um but down here we've got an author field with an id featured media with an id um and so that's great but that stuff typically isn't super helpful for us right because if I wanted to display a web page that that gets we get into those water that waterfall of requests that I talked about earlier right if we want to go get the author information the featured media we might need to make another request for those if there's not another mechanism to include that stuff like same with categories right we get IDs to the categories and so like let's just take this one for example we'll just take category um and let's do let me just copy this url real quick and if you're smart unlike me there are yeah if you're smart like me there are ways that you can sort of pre-populate this tool uh with this url so that you don't have to really rewrite it just that word press api and you add your slash afterwards so um so what we did there is we went out right we have this thing that's related to our initial post and it gives us back this list of category IDs and we went out and did the same thing right so we said we're going to go to the categories collection if we do that instead of 15 it's going to return us information on all of the categories in our word press instance but then if we do a slash and pass in the id of that particular entity right it's going to narrow it down and only return that one so you can see that that post is in the category google apps script um so that's sort of the basics of how rest apis work we have these collections each thing has its own unique id and we use that id to uh drill down and get data just about that thing right so if i instead of getting my list of posts i wanted to get just the data for this particular post i'll pass that id and then you can see in there that that comes back way faster my my response size is much lower um but still like when we when we were talking about graphql and stuff like that i mentioned that uh these were problems common with rest apis right so wordpress actually gives you a way to get some of this additional data so like if you're interested in using the rest api to to build stuff and you don't want to have to make some of these multiple round trips to get a bunch of stuff let's see if i can come down here we have c and yost will add stuff and so this is also something to point out to like you can see here that i've got these two additional fields that are added to my rest api response that are specific to plugins that i have installed right so i've got acf installed on my website i don't have any uh custom fields on this particular page but if i did those would show up and in that key right there same with the yost head for seo purposes um and we can see that i get back honestly just a ton of junk that i don't really want which is again part of the problem with the rest api but what wordpress does give you give you is this underscore links key and if you sort of drill through this what this does is it gives you links to a bunch of those related pieces of content so it gives you a link to the to the self to the thing that i just asked for right it gives us a link to one step back in the api the collection um if i wanted to learn more about that post type i could do that right there but it also includes links to things like the author the replies version history feature media attachment terms which are categories and so if i want to optionally include some of those things in my rest api response we can see that down here each one of those things well not each one but several of these down here have this embeddable true uh key value right so we're saying that this is embeddable and what that means is that if up here we add a query parameter and we just say underscore embed that when we get that stuff back instead of just including those links um if we come down i think we got to go all the way to just try to close this up too yeah we get this embedded data that comes back right so if we want to include certain things that aren't available in the default rest api response using that embed query parameter we'll bring you back things like the author the replies or the comments the wp featured media um and and so on and so forth we got our our terms right which before we had to go out and get from a separate api um so that's really helpful if that's that's kind of what you want to do and you're stuck and you want to use the rest api but don't want to have to make all these round trips to reconstruct uh your particular page so that's a that's a decent trick um and then another one that i'll also talk about real quick is the idea of filtering um and so that's another query program that we can throw up here and so we can say uh let me just check the docs real quick back to our presentation yeah fee sorry fields is what i'm looking for not filtering um that's what this is going to do so we can say here we just want i don't know let's just say the title and send that back right and we get um by by using this field frame we can then pass in a comma separated list of just the fields that we want back so if we're getting too much content we want to limit the amount of data that we're getting back so that we don't have to parse it or traverse it we can we can do that and just sort of expand on our example there so like we wanted to add the date you know we can do that too um so that's sort of a decent deep dot com how we doing any questions anything you want me to i think i know that's over explain i think it's making good sense i'm not seeing any questions in the chat i think you know just trying to figure out what your parameters are that you can mess around with in that is key i threw just as an example the per page thing yeah you can custom set that um the other things i think tend to come up is like and categories you know as a query parameter um so you can do stuff like that um which is certainly not as fancy as graph ql but it does help you limit things a little bit in terms of what you're asking for yep for for sure for sure and and that's i think all part of what i'm trying to do here is just sort of draw parallels between you know how you solve some of these problems in a couple of different ways um so that maybe is a good spot for me to switch gears just a little bit and talk about wp graph ql because like they are very two very different things they have two very different approaches uh and so i think it's kind of worth worth talking about just a little bit so what i'm going to do first is just hop out to the wp graph ql website and so i lied we've got one more like sort of architectural diagram um that that will walk through and this isn't super detailed because like i don't know that you need to fully understand like graph theory to use wp graph ql but i think that's the idea right where in rest we have these collections you've got slash posts which is where your posts are slash pages which is where your pages are uh so on and so forth right with graph ql it essentially looks at all of these different content types and all of their attributes right so if we've got a post it's got a title and the title's got a particular piece of content inside of it right and what graph ql does is it sort of reconstructs a graph of all of these different types and how they can be related and so in graph theory and in graph ql those are called nodes and edges so your nodes are your individual content types so like a post is a node a category is a node an image is a node uh you know a post an image like and we sort of just sort of repeat these things and we can see that you know one post might be related to two different categories and that relationship between the two is called an edge so we have nodes which are things inside of your WordPress database like the things that most likely make up your collections and then we have edges which are the relationships between them and so what graph ql allows us to do is to essentially specify a query that says well you know i want to get this post and then i want to get these other associated categories or maybe the images and there's a lot of ways that we can do that so let me see where i'm at in here yeah i'm gonna hop back over to my website um and i feel ashamed at how many comments i have on answer it's like don't if you have a question throw in discord don't comment on my website it's gonna go and go into that black hole um so what we can do here i'm just gonna hop back into graph ql for just a second see if i can yeah clear that out all right so again like i mentioned in the in the beginning the REST API built in to core right i didn't have to do any installation and unless you turn it off you can do what i just did with httpi you can go find your WordPress website start messing around with some of this stuff on the fly and you shouldn't have to do anything graph ql or wp graph ql on the other hand is an open source plugin it has a really great community behind it and you know we get the chance at wp engine to work with sort of the lead maintainer jason ball he's been working on that plugin for a long time and super knowledgeable person and a lot of really really uh smart people working on creating other extensions that go on to graph ql for things like gravity forms and acf so that all of the data that you have in your WordPress site is available via this same interface right so if you go you go into plugins uh and i'll just walk us through this really quick so we'll go add new i already have it installed but you know if you wp graph ql uh that's cool php elephant so you go ahead and activate that um and then that should get you set up like this there are really only a couple of settings that you might want to check with graph ql instead of having multiple end points like we do here like we've got posts we've got pages we've got things like that wp graph ql in graph ql in general sort of just gives you one end point right and it's the graph ql endpoint because again we're sending queries to this and we're not requesting particular resources um so that's pretty much okay as default what i would definitely recommend doing if you're worried about people getting at this you can sort of limit it to authenticated requests um which isn't a big deal i'm not sure you need to do um but if you want to you certainly can and then what i would also do is enable the graph ql graphical ide which is on by default but then also enable graph ql debug mode just as you're playing around with it it's kind of nice it'll give you errors if you make uh wrongly formatted query or something like that so i'm just going to save that and then hop back to the graphical ide um and so what i can do from here is this is kind of like uh i don't know my sequel workbench or something like that that allows you to visually compose some of these graph ql queries and like preview them in real time against your data so if i open up this query composer window we can see that it's pre-populated with all of the different like content nodes that are in here so we've got comment we've got comments you know menu menus uh we'll we'll start with something simple and we'll just go down to posts right so if i select posts and open that that list we can see that the graphical ide is going to start creating a query for me in this second window and so from here i'm going to dig down into those individual nodes um and then i'm just going to select a couple of different things like i could do content date um i'll do title and that's pretty basic i'm just going to reorganize these in a way that i like them because that is kind of one thing it's maybe we want to it's just a little bit more readable the way i'm going to do this um as you can see too as i'm typing in here i'll also start start to get auto autocomplete as i do that um but from there i can also dig into other related content types right so this is all stuff that's on a on a piece of post data and i'll just run this query so we can see what we get back right so we get you know jason that is structured in this way we've got posts and then inside that we've got nodes and that's an array of all of the data that we asked for in exactly the shape that we asked for it right there's nothing more there's nothing less we get just title date and content um so that's kind of neat because again we get to specify what we want it gives us back to it in the shape uh of the query that we made so that's kind of nice like there's not this i don't have to go and limit data i need to tell it what i want and it brings me back just that um and so if you are dealing with something where like you have constrained bandwidth or like you're on a mobile device or whatever you want to make this as fast as possible you know eliminating some of those fields either through using graph ql or what i showed you over here with the rest api where we use fields to like whittle down our default response is is a really good idea because it also makes your response faster too right each one of those things that are in this jason object is something that the database has got to go pull and you know return for you so the fewer things you ask for the fewer operations it has to do on the back end and the faster it's going to be but that's what i like about wp graph ql is it's sort of like let's us get at some of this other content so like on my website obviously like i'm the only author here um but if i wanted to come in here i can get the author's name uh i don't know their user id or whatever i can do that and that's just going to add it on to my request and so i scroll down after the content i'm actually just going to delete the content because that's just obscure our view and not that important you know we can see what that jason looks like we still get our nodes array back our title for each each thing the date it was published then we get this author key with its own sort of node structure and then clearly you can see i've been reading my kids too many stories and tried to obscure my identity and i will now be referred to as brown bear um but again super helpful and just kind of offers you another option um if you're if you're wanting to work with with this type of data um and so let me hop back now so this is sort of graphical and this is how you might go about creating a query and now like i did say that there is a little bit of added complexity with this path just depending on what tools you're using because i think this is what i'm about to say is highly dependent on sort of what you're using to create uh you know this part of your headless WordPress stack because for some people who've been using GraphQL a long time and who are coming from outside the WordPress ecosystem like there's a lot of tooling around making GraphQL queries that they can just bolt on and adopt where if you're not you're kind of like in the WordPress world and you know aren't as familiar with that you might need to go install some packages or use some JavaScript libraries to help you help you do some of that but you can actually just submit some of those queries via a post request um and so like i kind of took some time the other day to format one of those and here you can see this query that i'm making right so i'm saying here's my query i want to get the first 10 post posts and then i want to get you know the author's name the date the content the featured image the media item url and then the uri for the post right whatever length that is and so i'm just going to go ahead and send that off um and we'll see what we get back and you know we get back sort of data that's shaped exactly like our query right we've got our list here we've got our our 10 post objects and then if we drill down inside of them we've got our author information date content uh so on and so forth right featured image with the media item url the title of that and then the uri to the post based on however i've set up my WordPress permalinks okay and so what i'm looking at down here is really like how much data we've transferred and how long that request took um so we've got 125 kilobytes eight 830 milliseconds which is still you know that's not super fast but it's pretty fast it's less than a second and it's 125 kilobytes so that's not a ton of stuff um and what i tried to do over here was to sort of uh like echo out that same query right so if i want to get the same stuff that i just got back using the rest api this is kind of how i'd have to do it like i think tom illuminated for us that maybe this per page 10 is already the default so maybe we don't need that but here we've got to use that fields parameter to limit you know saying i just want the title the date the slug the content in the links and then we're going to embed that author data right just like we did to get get in this one um we'll send that back and so yeah that was actually slightly faster which is very cool right but 197 kilobytes um and 596 milliseconds to serve that request but what i'm going to do here is i'm actually just going to take this like so let's say we didn't do that and we just send this sort of basic request let's see what that looks like now we're at 227 kilobytes 587 milliseconds still pretty fast um and then we can come down here and i'm going to do and then we're going to embed this stuff right because we need our featured media we need our author information um and so here is where stuff can can start to sort of get get way bigger right we're at almost 500 kilobytes up to nine nine oh seven milliseconds um so it's really at that point you know we can see that for for requests like these the performance is uh you know somewhat comparable we've obviously got to go through a bunch of hoops if we want to get the data shape the the way we want or like eliminate some of those extra fields and in some cases that's not entirely necessary right if you're building a small enough focused thing like you pulling down additional data and just sort of discarding it uh doesn't really make a huge difference i think it all just kind of goes back down to like what performance metrics you want for whatever it is that you're building and like what they expect um so cool i'm trying to think anybody got any questions want to throw in there um throw in the discord or tom if you've got anything you think i should circle back on i don't but i do want to note that i'd never removed information from the rest api before so just seeing that was handy and i've used it a million times i just always added stuff yeah you know well and i actually went through because like we had an internal example that sort of illustrates like this uh this interaction right uh that i had to sort of revise because i mean this this actually wasn't something i i really found until i started doing uh i used to invent before but i never used the fields to remove stuff until i started doing research for this and like i sat there and i was like well let me you know think about how fast i can make these and like do that sort of comparison between wp graph ql so it is handy and it's good to know that it's there because like some of the time what it does give you it's an insane amount of data that you don't need so if you can sort of if you're only looking for a couple of things throwing that on there i think we'll just save you some kilobytes which is you know i guess we can be good data stewards uh when we're building web web experiences for folks but the only thing that i'll mention here to while we're looking at this so i mentioned that there are a couple of different ways to do uh graph ql stuff and what i'll throw you at too and i don't know if we'll have time to get at it today um but if you all want to take a look at our website the developers dot wp and engine dot com website this is where um we we publish all of our all of our headless focused content um and we have this thing called the headless word press developer roadmap so if you're interested in like doing a little bit you know more like headless work that is i guess more geared toward what i'm saying about wp engines hosting setup right using these full stack jobs for frameworks or even really just jobs for libraries like react review on the front end we've got like a step-by-step guide that'll sort of build up your experience level as we go and one of the real so there's an introduction to graph ql and wordpress tutorial and blog post out there that's definitely worth a watch if you're interested as well um but this crash course is really interesting and i'll sort of just show it maybe we can circle back around um because it's all built in code sandbox it's done by my colleague grace um and what this does is sort of just walks you step by step through creating a graph ql focused like react application that renders these wordpress posts um we still have a question there jeff that relates to that because i saw apollo uh apollo um so fran the dev a ways in with uh in your opinion what does the apollo client need to enhance its graph ql dev experience yep so i gotta call fran fran out fran is absolutely a plant um if you look at here he's he works with me um but but sir fran yeah so i'll definitely answer that because i think that's a really good question too because when you're building certain types of apps you know like there's added complexity in introducing some of these packages like apollo client which is what fran's talking about and actually what is used in this tutorial right um so let's see if i can oh man i got back i had to show fran's picture yep and so we use apollo client for data fetching and that sort of simplifies a lot of this interaction um and if we look at well i guess this is the start thing i have to go through the whole tutorial to do that um i'll see if i can just sort of scroll down and get us a code example so when we configure this apollo client um we can pass it certain parameters right and one of those is this idea of an in memory cache and what that allows us to do is to basically store the results of those queries in the memory of our application so if we re go to that page it doesn't need to refetch that data so there's all these like little optimizations that you can get um by by introducing some of these tools like apollo client so like tooling built around that um and you can see in this example because like i always like to start with the simplest way to do stuff right and so if we look at interacting with graphql what i'm doing here is i've got a post request queued up as opposed to a get request and then um i'm i'm sending this off as a part of the post body now this took me a long time to format in a way that the graphql api would accept uh because i'm just doing it as a string right and there's a bunch of other stuff too that we can do inside of wp graphql if i hop back in here so like i'm in i was looking at posts plural but if i sort of close that out and i look at posts um you know if i pass it an id you know we can we can basically in the same way you can with sequel you can parameterize some of these queries and pass in variables uh let me looking for a good one yeah there we go two four six six we can pass in variables to get just specific resources right so here if i say i want the posts with the id of two four six six and i open up this select down and i can select which type of id and this is an important thing if you're going to get started with wp graphql this threw me off when i got started right because i've i've been focused on traditional WordPress for a long time so things only had one id uh but in wp graphql you have something called the database id which is the id that you would think of and then you have this separate id and what that the reason behind that is because uh for each one of these content items here wp graphql creates a completely unique id for just that thing so like where i might have a a post with the id of two four six six i could also have a page with the id of two four six six so it does that as a part of its own like back end mechanisms just to make finding some of those resources faster but i can also look up this up by the slug or the uri so like i'll do that and we'll just throw some fields on here like date um title and yeah and so we throw that in there and then we just get back that data for that one particular post because we've sort of you know passed this variable in there and so going back to fran's question about you know what what is sort of what do you get by opting into this apollo framework if you're going to use wp graphql is it makes things like that really easy like uh if we look at sort of that example in this i think if we come down here we can see a really quick example right we're getting all posts in here we you know format that query with back ticks which is way nicer than what i had to do to make it work over this basic post request right i was able essentially in this case able to take this query that i've composed over here copy it into this back ticks in my program and then just pass that in um pass that in right there but if we sort of scroll down eventually we work on getting a post details page right and so we can see that we basically sort of create this query that looks a lot like a function we're passing in this id and we're using it inside of the query and then when we do that uh you know we we call use query pass at the query and then we pass in the variables like that so it kind of makes it a little bit more flexible and apollo apollo client lets you do that in like a much nicer way than what i'm illustrating here like i couldn't even imagine trying to have to write that that variable query in in this mechanism without having uh that library do some of the formatting for me um but yes the memcache the in memory cache is is really great and like i said it just makes everything way faster so it's like you load a particular query and you get all the data back it just remembers that you've already loaded that and so the next time you go to that page says hey i've made this query before um let me use this data that i already have instead of hitting your api again so it's faster for the users it's less load on your server um and there's also like settings you can set about how long you want that data to remain valid and you know so like if it never changes or it's only going to change once a week cool cache that for basically ever um but if it's a little bit if you need to invalidate it more frequently than that you can but yeah thanks friend and stoked the friends here so um cool any other questions or things you think you want to loop back over tom i just might highlight like you say writing that thing was so hard to do by hand is is that a good rule of thumb like if it's miserable and hard there's probably a better you know system set up someplace that's that's going to help you there uh yeah i mean and in this case for sure so if it was me like i would never if i'm going to use graph ql and again this is this is that's a tough question to answer like yes there's probably a better solution out there um so for sure like apollo client if you're going to write something in javascript you might as well include that and get some of those performance benefits and also those developer experience benefits um and like yeah i would recommend it just know that it's you know when we think about that like simplest simplistic to complex thing like you're adding another package you're gonna have to learn some stuff specific to that piece of technology and so like and in a lot of times with with developers right that becomes the it's tough to know like what do i invest time in learning what's stable what's going to change right so graph ql is is fairly stable as a spec you know there's an actual spec out there that says this is how things should implement graph ql wp graph ql tries to follow that pretty closely and like in terms of clients uh apollo is probably the most popular um and definitely what i would recommend if you're going to look at one and you're like hey i like this and i want to use it and i want to do it inside of an application then yeah that's that's what i would go to because it's just it would be miserable to do this otherwise it was really just me having to like get the query in a way and it's also tough for me to realize like is that a limitation of this tool or you know if i was doing this in code would it have been as difficult and that i don't know the answer to um if that makes sense yeah i think it's like when you pointed out the json formatter for chrome like if something feels like really off and horrible like take a minute look around ask somebody don't just suffer a turn right yes yes yeah don't pay the blood price unless there's like dock knowledge at the end of the well um for sure and that's also why i think this fields thing is so handy because like time and we've talked about this a million times just like how many times you forget that like content has a rendered key inside of it or like just trying to figure out how to traverse like all of the json that gets returned sometimes can be super painful so like if you can exclude a bunch of that it just makes it easier for you to store your brain mentally where it's like if i know i only have these four or five fields it's a lot easier for me to reason about this object than it is if i'm like oh man like you know like i don't know let me go hit that again and just get the basics because like we'll just see it's just like a ton of junk you know again back like yo stuff that i don't necessarily want and so for me that that's always what i look to do right if i'm like ever find myself like drowning for lack of a better term like i'm like how can i reduce the complexity of this so it's easier to reason about maybe that's redoing the fields if you're doing graphql stuff maybe it's reaching for apollo because like it just handles a bunch of that for you and you can just take what graphql gives you over here and basically just plunk that into your application inside of some back ticks pass it into this function and like you'll get the data back that's shaped exactly like this so that part of the developer experience is is super slick in my opinion beautiful point simplify the data first and then when you're parsing and building with it your life becomes much much easier yes yes yes yeah all right well cool uh so we want to jump in i mean we're at about two o'clock right now if we got any other questions and discord that people want to pop in there feel free and i'll answer them if not i know tom i think you had maybe some examples you wanted to talk through and i i did as well so we could kind of switch gears and talk about a couple of different headless things and like i've got a couple of api focused things because one thing i wanted to talk about when we get there is just like i know you talked about extending the rest api responses but we can also create our own stuff so it's kind of a neat way where you can use wordpress basically is your rest api framework uh instead of like express or node or lairabelle or whatever like you can just use the wordpress you already know and love i think um taylor's gonna help me out yeah so the site you're looking at this on probably is is a headless wordpress site so michael branson smith is the one that did the design in front end you know trying to mimic pretty hard kind of reader's digest type of vibe and he did this a while back so we've done a couple different iterations of the site but it's you know it's exactly what we've talked about here uh it's rest api to a javascript front end that's doing all this stuff and in this case pretty simple stuff but we have kind of what you'd expect um so i'll throw this in here in case anyone wants to look at it but what you see in there is um is just the api in this case we set the per page to 99 and we've said limit the return to things with the category id of 214 and you can see that in the url parameters now now that jeff has told me about limiting some fields a bunch of this stuff out um and i think we probably should um because basically most of what we're doing is with this acf data um you know we could probably remove 90 percent of the rest of it and and still be good to go but that's that's all that's happening and acf lets you these are the fields you know so we can build out really extensive fields with all sorts of data validation stuff um that return different things depending on what we want in this this api um and it does it in this case you could say like just show in rest api it's got a little button that you can decide to flick um there uh we don't have it on this one but only because i turned it off because we did a bunch of odd things and i didn't want people accidentally turning it off and on and you know we got a little more custom in terms of what was returning them what the acf api returns so in any case that's that's what's driving this site and we've done it at all sorts of levels of complexities for different conferences you know for this headless one we have two events so it's not uh not all that exciting in terms of data but we've done much larger conferences over multiple days for like alt in the uk and some things like that it's worked really nicely and it's allowed um michael branson smith to build you know kind of in an environment where he was comfortable and knew how to do things yeah because he just didn't need all the stuff of wordpress he just wanted this stuff that's cool and can i jump in there on eight on that acf note for just a second because like i think one of the cool trends that having having been doing this stuff for at least the last five or six years in the wordpress space with apis and and whatnot it's cool to see that still trending in like towards a more api focused route i guess because like i remember when like the rest api got merged into core like we there used we used to need a plugin or something right to add the acf junk to um the rest api and now that's just like a button uh and i think similarly like so uh wpngen recently acquired like a bunch of the delicious brains plugins uh acf included and so like for for us as developers like it's cool to see that because like i'm not gonna like spoil any feature releases or anything like that but i think you can probably expect that if you are interested in using graphql and acf like right now you similarly you need a uh an additional extension to make all that data available to wp graphql and so i just feel like more and more things are trending where those integrations are just going to sort of come out of the box and like i know gravity forms is another really good one that's got a you know really robust rest api that you can use yeah i don't know we can i think what i would like to do as i'll show one more example um only because uh now that you talked to me about limiting the fields i want to visit this oh are you going to make this faster so yeah this was and this is another thing maybe that plays into this idea of apis um and when you use the headless stuff because what i was trying to do here is make the fastest site load i could um and so i i was you know kind of getting down to like what do i got here what what do i do to improve performance um in this case in the idea that speed equals energy efficiency because that's what the topic of this was um and so we have a pretty you know a simple site but with the goal of it just being super fast you can see down at the bottom like the load times and whatnot but this is using wordpress which is what our people were familiar with writing with but then trying to take that front end and be able to be like all right what's the what's the barest bones we can get this down to and it even does some like brute force caching in that each time a new post was published it just writes the json like directly to a folder which is tied to this site rather than even doing kind of the more manual requests from wordpress so you get the idea like once you abstract that data out then you have more and more opportunities to do really specific things that you want while still taking advantage of the ubiquity of the wordpress authoring um feel vibe and experience with people yeah and and that's really cool that you're talking about caching because i stumbled on oh man i don't remember exactly the url maybe it's like medicalnewstoday.com or something like that this was a question that got posted in the advanced wordpress face group and it was headless but i chimed in for a different reason uh and you'll like this tom because it's like a massive multi-site so there's like medical news today which i think is what it was but there was like six other health focused websites that were all being published in this same multi-site environment that were feeding all of these different sites headlessly and like when we're talking about scale like that's massive right i mean that's a big site um and they were doing something similar i think with their data where they would get it from the api and then sort of just cash it as jason as an intermediary step somewhere um and then serving that up and their their question was more around like the database structure right i think that was their problem was they had all these authors like the same stuff we did with rampages where it was like a needed sharding basically um but it was just it's really interesting because i do think like that caching thing is something that more and more people are talking about and so they're they're approaching that problem in a couple of different ways and a wp engine internally is working on something to like accelerate that content to basically do that right when you when you update your data in wordpress then we like echo that out to an edge cdn somewhere so that when your app asks for it it's getting this already processed jason from like the closest available server and then we just had a couple of guests on our podcast a few weeks ago who have a company that does that specifically for graph ql so like they've got a wordpress plugin and you can have this graph ql cache of data at the edge that you can request and so like i'm kind of like man how could you get that under a hundred milliseconds if we threw you on the edge yeah and this was like definitely like primitive mud hot building stuff but you know like it was fun it was fun to roll it back to basics and mess around with stuff and not have you know what is really a huge overhead of developing wordpress themes yeah that are real themes and just be able to go like you know bare bones um yeah it's kind of nice yeah super fun so you have you have a podcast yeah yeah i'll throw the link in there fray and and i are our hosts in this podcast now so we've had some cool some cool guests on um that company was named it was formerly named graph cdn now they're called stellate but we've also talked with the people who build next j s we've got a bunch of other folks lined up that i think are cool if you're interested in like this api driven headless sort of wordpress development space yeah there's a lot of cool stuff out there and me and fray and just have a great time like talking to these people i'm trying to think fray and anybody else coming up that who else are we talking to if anybody's heard of astro which is a new framework uh that's just sort of busting on the scene we're going to talk to their creator soon um but this this would be kind of nice so if you're looking for like the next up and coming thing that's simple and a lot simpler than things like next j s this this is where i'd look it's sort of made for it sounds like it's almost made for doing headless wordpress stuff where it's just like i want super fast websites without a bunch of job script overhead and like you know getting results kind of like what you got with the digital detox stuff so yeah that's if you haven't checked it out i threw a link in the in the discord yeah in france like gonna roll through a couple of guests we got coming on but i got a couple of things we can roll through really quickly that sort of center if that's good with you tom awesome yeah yeah okay cool um so yeah let me go back let's go back here so this is maybe like one of the early i don't know can we see a date on this 2020 that was the latest commit i don't know when we made this thing but so i went back to the like the rest api right and if we go back all the way here and look at our namespaces uh that means that we as developers of wordpress plugins also have the ability to basically tap into a bunch of the mechanisms that wordpress creates for its own api and use those to build our own applications so like i know at one point in time when tom and i were at vcu we had this supermassive multi-site instance called rampages and like we would need to get data about this thing and like you know at that point we were exploring what the api could give us and so this is sort of a really quick and dirty example of a really basic plugin that i made that would give us stats about our multi-site network and so we can see here that this is just like one two php files like less than a hundred lines of code really to do this stuff and so like i'm adding a menu page to the admin dashboard but down here i have this function that taps into the rest api init hook which is you know as wordpress is going through its lifecycle hooks we hit this rest api init one and that's where we as developers can tap into it and register additional rest routes onto the wordpress api and so you can see really that this part of it is is super simple so like i've got you know this add action thing that if you've done any kind of plugin or theme development like you've definitely seen add action and then inside of this function i just call another function called register rest route i pass it in the namespace that i want for my plugin and then the route that i'm actually registering so like in this example you know you do wp dash jason slash rampages dash data slash v one slash data to get that invoke that route i tell it what method to respond to and then i pass it this callback function and so this callback function is what gets run whenever i hit that route via the you know via my code or via the browser and it runs this function called collect rampages data and it basically just runs these other functions down here that would go into the sql database and sort of just get us some aggregate statistics about how many users registered and break it down by month so that we could then sort of just chart it out um but it was again one of those things where it was like to build a whole and like so really you know if we look at this we've got just a couple of functions like this 88 lines and then this part to actually add a rest route was like 10 lines of code um and then if i look at my interface i forget what i did here you know nothing crazy i think i used view which was was and sort of still is my go-to um but again it was really easy for me to create this nice interactive dashboard with view and then down here somewhere whenever this page loads uh this refresh data yeah refresh i call this refresh data function it goes and gets that data from the WordPress API and then sort of populates my javascript app with all the data that i got back and you know this was something i feel like i mean it might have taken me like a day or half a day or whatever to whip this up because it was like all of these things were tools that i was really productive with like i knew view really well i'd use this charting library a lot so building this was really simple and then getting the data out was kind of equally as simple because of what WordPress gives me um so that's a cool thing and definitely something you should kind of consider if you're like ah you know i want this data like it doesn't need to be something that WordPress provides for you uh you can easily add on your own namespace and your own routes to go and do like whatever crazy stuff you want so like you see here we're just i'm pretty much just execute and brawl SQL queries against the database because we have like 35 000 sites and it was just like there was everything else would have been too slow uh to actually sort of be usable um and so that's kind of one good example and then i'll give another one which is also something that we worked on at bcu that like we prototyped and i don't think ever really saw the light of day but it was kind of neat well before can i stop you real quick yeah yeah please because i think like if we've got people who are doing domain of one's own setups or looking to structure like how what's the data around proving this stuff is successful either within a multi-site or with all these individual sites i think what you just said that you can kind of stick data at these end points in ways that are serviceable for you like it's not a whole lot of programming really straightforward and then it just opens up the doors for running automated reporting and things like that in ways that are really nice you know you want to see how many posts how many pages you want to get um you know was this a faculty member or student you can set all that stuff to be part of your registration process and written into the the api return in ways that then allow you to run reports and do some really nice things and we did some basic stuff with that but it's it's i think an invaluable tool down the line to make some really nice interactive stuff much like you did with the multi-site um but really catered to institutional needs and however you're defining success in that realm so yeah for sure for sure and so this other example is a little bit more fanciful i think we like made this right as like covid popped off and vcu the the institution sent everybody home and it was like well what do we do for these folks who maybe don't have reliable internet um so the idea was that we would create uh some sort of like crowdsourced wi-fi mat uh using wordpress i think they like said no because it was a security thing right i don't remember why they knocked it down but so this never really saw the light of day but it was a great proof of concept because it sort of combines a bunch of the stuff that i'm talking about um it's obviously sort of like a partially headless wordpress site and this one's a little bit different um and again so like if i go back to this diagram you know this is kind of debatable on what what makes a headless wordpress site headless and so like i tend to use the term partially headless because like things can use headless features like the api but then ultimately still be delivered by the content management system and so this is kind of a good example of that where a lot of the headless stuff we're building at wp engine is like meant to run on its own server right like i've got a whole server over here that does its own thing and then just talks to wordpress where this example kind of combines the two a little bit and where what i'm doing is i think if we look this is actually a theme um and i want to say if you look at like the index.php thing like this is it i'm basically i'm doing get get header get footer i've got one div with an id of app and basically i'm using that to just ship this javascript component this javascript application down there using u right so this is like a single page app that's all built with view wordpress is sole responsibility as far as this theme goes is to just like ship that initial html in the javascript and then it renders and basically takes over and wordpress doesn't really do anything at that point through the typical wordpress mechanisms right and we do all that stuff through the api um and so like if i come over here and search add access point or go to add access point it's gonna take a second and i've since moved from Virginia so it'll let's look up bcu real quick and it's going to locate me here in florida and then i can pick it out i can pick a location fill out the details here and just be like it's some wi-fi right so that's nice form nice interaction i click save location this javascript app is going to post that data back to a wordpress api endpoint and save it for us so we do that we get our nice fancy like this location's been added and if i come up here and do search it'll sort of just return us a list view of those particular things i think what i actually set this one to do was like it looks at your your latitude and longitude and gives you like a a certain radius of stuff right so we can kind of see that and like you know get driving directions i'm not sure that part works or it's not going to work for me because i'm probably too far away right now um but it was a really neat sort of like interactive type app that i made stores really non kind of traditional data um all sort of modeled around post types and so most of that stuff all the front end junk is in this source folder and like if we look at this one this is where it does the posting off to add a new location you know it's going to get the WordPress site url go to this crowdfie endpoint submit a map point and post all the data that i tell it to over there and then if we look at my api endpoints you know those are i want to say index.php it's in functions.php is where i sort of load these like we register a couple of post types and then i initialize that rest api and add add this function to it this map point controller right and this is what essentially controls there's one file that sort of controls everything that happens at that endpoint because we're both getting data when we load those map points and creating entries right when we post something off to that endpoint and there are a bunch of really handy sort of resources that you can use in here if you're trying to do that we see that a lot of this looks pretty similar to what we saw in the other example right where we've got like a register rest route function i'm saying all right we're going to register it at this namespace at this end point and then here's how we're going to register it right we're going to accept a post request and we're going to do a call back to create the item down here which just takes the jason we get from our front end application then we just call wp insert post and it inserts the you know just a regular custom post type and then returns like an all good signal but what we can also do here is like it'll let you do permission callbacks so i think that's one of the good things to talk about too when we talk about the api is that and this is the same with wp graphql right so just because the api is available doesn't mean that everybody has permission to do everything and i think i'll hop back and demonstrate this in htpi for a second right because i've determined my own permission callback right here and it's kind of like a fake thing because if i scroll down i wanted to make an anonymous so like check can post just returns true so like there's not really any security here and it's literally just you know if you if you post you're good but again that is scope to this endpoint right so like there's only so much damage that somebody's going to do if they do that it's like okay create all the fake you know map point posts you want it's not a big deal but that is to say that when we look at the rest of the WordPress api there is stuff that is unavailable to us if we're not logged in and those things follow the same capability checks that happen in your traditional WordPress backend like so posts obviously are a public thing i want people to view my posts so it only really makes sense that those things are available via the api but in WordPress like previews or revisions you need to be logged in to view those so if i go here and i go to view this post i can do that but then if i drill down one layer beyond that into revisions i get this a sorry you're not authorized to do this so just because the api is out there doesn't mean that there aren't security protocols already in place based on what WordPress typically does and there are a couple of ways like if you wanted to authenticate with this uh you could and there are a bunch of plugins i think uh france working on a piece of content right now on how to do that um in a couple of different ways with wp graphql because again that's the same so if i go to my graphql endpoint i'm not authenticated and i ask for revisions it's going to give me a similar response it's going to be like hey you're not you know i don't know who you are you're not authorized to view this sorry about it um so that is just kind of another thing to keep in mind as you're doing this style of development and especially when you decide to like fully separate from WordPress because when we are like semi attached to WordPress or partially headless like in this environment um i can actually pass data to my JavaScript app which i think i did in function as let's see i can localize my script which basically you know will pass these pieces of data from my WordPress backend into the JavaScript context on this website so like if i come down here and i want my front-end website to use this rest nonce which does some of the authentication stuff for you i pass that in if i'm a logged in user it has my sort of credentials attached to it and then i use that when i make my request but if i start typing wp options you can see in my JavaScript console like that's available to the JavaScript code that's running on this page so if i need to pass data back and forth and you're doing like a partially headless thing that's a viable method where when when you go fully headless or fully decoupled you there you either need to use bastic auth or like one of these other plugins like json web tokens or oauth or something like that um but cool so that's the kind of last example i got um i don't know we got any other wrap up questions or tom you got anything you want us to circle back on do you think would be helpful for the audience well i might ask you jeff like as you've progressed through this you know like you came when i first met you you were pretty advanced in a lot of things but like since then you've you've gotten better at better what's what's your uh where do you go to listen to things what do you what do you consume that kind of drives you forward with all this stuff oh that's a good question so i'm not a huge podcast listener um for me it's really twitter and being kind of plugged into the javascript community and i certainly feel like if i had to like self identify as some type of developer which i don't really think i need to do but i'm definitely much more comfortable doing stuff in javascript than i feel like i am in in wordpress or like php or something else like that so for me that's one of the things that like headless gives me is like i've obviously got you know pushing a decade of experience doing stuff in the wordpress editor and like in the back end and building plugins and stuff and so um you know like it just it makes it really freeing to build kind of what i want how i want to build it and then be kind of unopinionated about the back end and like not have to waste a bunch of time reinventing the wheel um so definitely like if you're not on twitter hopefully you get on twitter because that in and of itself is is kind of a wealth of knowledge for people learning and honestly i am a pretty avid documentation reader and it's only fitting right now because like i do there's like part 25 percent of my job right now or maybe around that it's like literally writing documentation for other developers so it's certainly comfortable circle but that's what i do it's like anytime somebody's like oh you know wp graphql what's that like i'll go and i'll spend 30 or 45 minutes just browsing around the docs like trying to get an understanding for what this thing does how it does it and so that even if i choose not to pursue it like it's still somewhere in my brain like you know it's it's attached in some way and like fran and i talk about this a lot because like when you're getting into development and like the deeper you kind of stare into that well like the deeper it goes it doesn't ever get simpler or less new and i think we were slacking about this like it doesn't get simpler or less nuanced i think you just get better at ignoring what you don't need at that moment and so like that's what i try to do i'm like all right let me get a cursory understanding of this and then like put a pin in it and if i have time or inclination or a job focused reason to come back to it later i will and i'll also say tom just just to hear credit i mean the time we spent together like this was a fantastic exploration into like the beginnings of headless wordpress so i think a lot of it comes from you know our time working at all lab like we had lots of creative freedom to determine how we wanted to build stuff like this nobody was saying well that doesn't sound like a good idea it was more like well let's try it and see what happens so i think having that attitude and someplace that'll facilitate that for you is fantastic so i got one more big picture question for you then so i i imagine that there are a lot of people trying to figure out like if i want to get more into programming like what language should i choose should i use libraries like view you know like what what what are your thoughts on that what would would you suggest if somebody came to you with that question oh yeah well yeah so i guess like i read something the other day where it was like basically it was like somebody would was talking about investment advice and it's like i don't want to know what you think tell me what's in your portfolio because like i think sometimes those are two different things where it's like what do you think you should use and like what do you actually use it to build the thing and i've got to still say like i'm i'm i'm hard view um and javascript environment too like yeah and frame posted in there fire ships a good a good place to look uh for for inspiration and stuff but yeah i continue to bet on javascript just because like i like the web as a platform and i think that it's just going to kind of get better and better and quite frankly like once you know javascript really well you can use a lot of tools um so you can do programming in the browser things like nex.js or nox or some of those javascript frameworks will also let you do server side programming like in a framework that's somewhat like wordpress in a way um so i'm heavy bet on javascript um and then my personal preference as like a library if i was going to build more interactive stuff would be view and i think for this audience i might even be harder on that recommendation right like react is definitely the most popular thing but you got to look at who's using it and why they're using it and what they're building with it and for me i always liked view because it was really approachable right when we got started at all lab back in like 2017 we were like i could include a script like here's a script tag and an html document and then i could make this nice interactive thing like i didn't have to go through all these painful build processes and some of that stuff's gotten a little better but some of it hasn't and so for me i feel like view is a really approachable framework and it's and it's also geared towards the way that my mind works because i don't like care about the programming nonsense like i want to make things and i don't want to have to think about like all this technical jargon or like organizational structure of my code really don't want things to be clean and readable so that when i come back to it or somebody else looks at it um they can make sense of it and for me view does that but it's because it's kind of opinionated right says if you have data that you want us to watch and react to this is where it goes here's where you put all of your methods that you're going to call from your little javascript component you know like so if i want to call a function there's a place for me to put that there's life cycle hooks and there's things like that where the more i look at react like it's it just comes from a different place um and for me it just feels less approachable for a beginner um but if anybody wants to fight me about it i'll be outside no uh yeah outside yeah how about that but no that's a great question well um i don't know do you have do y'all have anything else you want to touch on or should we wrap it up i think i'm good unless anybody's got specific questions if you do throw them in discord and i'm happy to answer them after the fact too the only other thing i would do is just sort of you know like plug plug that developer's website and so if you're interested in any of this stuff you know we've got a lot of resources out there we've got some tutorials on view and so we're really trying to be you know as welcoming as we can to like anything that anybody wants to use to do headless stuff so there's few tutorials like i explored a newer framework called remix Fran and i are gonna meet up right after this and we're gonna talk about that astro framework which seems kind of cool um and so like that's that's what i look for and it's like goes back to what would you always say tom like you know looking for technologies that have a low barrier and high ceiling like that's that's always always good and important to do and i think none of us has time and unless you're you want to be like a google software engineer you know there's a large stuff swath stuff out there we can ignore and just make the cool things like make the app that solves the problem for people um because a lot of times that gets subsumed by like technical purity i guess so i'm trying not to be that person for as long as i can right it's like people get too excited about car engines and don't yeah yeah exactly and i'm just like i just want to get from point A to point B and the speed limit is 55 so if it can go 80 i don't care and as long as it gets me there um but yeah definitely check out check out our websites uh follow me on twitter um you know just kind of however you want to get looped in we are happy to help you the other thing that i'll also plug uh still on that same website so we have a discord um that is really just focused on getting people up and running with headless wordpress if you come to our website click that link you can hop in there i think we're i don't know maybe pushing seven seven eight hundred folks in there uh across a ton of different backgrounds and stuff like that so working with a lot of different technologies uh so if you're interested in even just lurking and sort of listening and seeing what people are talking about that's a great place to do it and a great place to like if you have a question or want to reach out and don't want to do it on twitter you can you can find me in there um answering questions pretty much every day well and take note i give Jeff my enthusiastic recommendation as somebody to talk to he's always been amazingly open and kind and for you uh more firmly rooted in academia like he comes from a background in doing this with weird faculty members towards weird goals yes i have used what was the headless cms oh my gosh like the book thing right i built interactive javascript applications to oh man i can't even remember what that was called like bibliophile or something i don't know but yes if you want to talk strange things in academia i've done them but yep just thanks again to both y'all for having me like a super cool chat with everybody today thanks okay thank you yep