Build a Headless WordPress site with WPGraphQL, Faust.js and WPGraphQL Smart Cache

Captions provided by White Coat Captioning (https://whitecoatcaptioning.com/). Communication Access Realtime Translation (CART) is provided in order to facilitate communication accessibility and may not be a totally verbatim record of the proceedings.

JASON: Hello, everyone. And welcome to another episode of Learn with Jason. Today on the show, we're bringing back Jason Bahl. How are you doing?

JASON BAHL: I'm doing great. Thanks for having me.

JASON: Super excited to have you back. It's been a while since the last time you were on the show. And I have this sneaking suspicion that a lot has changed and improved since the last time we talked. But before we talk about that, let's talk about you. For folks who aren't familiar, can you give us a background on yourself?

JASON BAHL: Yeah, sure. I'm an principal engineer at WP Engine where I work primarily on building and maintaining WPGraphQL, which is a free open source WordPress plugin that turns your WordPress site into a GraphQL API. And yes, I've been there for about two years, previous employment at Gatsby working on WPGraphQL and working in the WordPress space for about 15 years.

JASON: So, you have what I think a lot of folks would consider to be a like a dream arrangement here. I want to talk about this. WPGraphQL is something you built as a side project, originally, right?

JASON BAHL: Uh kind of yeah, kind of on the side, but also, to solve problems at work. So I was working at a newspaper publisher, we had 100 newspapers across the country and did a lot of syndication and used REST APIs, had some problems with that. I heard about this thing called GraphQL, you know, coming out and I said, hey, that looks like it could solve some of our problems. You know, REST, there's a lot of developer experience benefits and data transmission benefits I thought we could benefit from. I started working on it on the side, but with the goal of solving some problems at work. I didn't have initial buy in from some colleagues. So I started building it so I had something to actually tangibly show. And then, we ended up using it it at the newspaper to solve PHP to PHP data movement problems, which is not the first use case of GraphQL that you hear of, most of the time.

JASON: Interesting. Right. Yeah.

JASON BAHL: I saw obviously the JavaScript ecosystem was exploding and I saw potential for more than that we were using it at the newspaper. I kept working on it on the side and end up at Gatsby and, yeah

JASON: And this is the interesting thing, you started this, it was an open source project you were building, not as your main job, but sort of on the side, which I think for a lot of open source maintainers, that's step one. It's a thing you do in addition to your day job.

JASON BAHL: Yeah.

JASON: And you have since been able to transition not once but twice into employment situations where you are paid by a company to primarily work on your open source project. And that's a really rare and also very exciting arrangement. How is there anything specific that you did? Was it sort of right place, right time? Because I imagine a lot of people would love to be in this situation that you're in right now.

JASON BAHL: Yeah, I think a lot of it was, yeah, paying attention to trends in the ecosystem and but a lot of it was very much right place, right time. I saw problem at work I wanted to solve. And then, I saw a problem in the ecosystem I thought this tool could help solve. And a lot of it was just talking about it. I did I traveled to conferences and did talks. That was a lot on my own dime and my own time, but just telling people about, hey, here's this thing that exists. You probably haven't heard of it. And finally, getting enough traction that things like Gatsby and Next getting popular happened to coincide with me working on this thing I thought made sense for the world to have. And so, yeah, a lot of it was right place, right time. But also, networking. I talk to everybody I can about this. And, you know. So yeah.

JASON: Yeah, I think it's like the what you're talking about here is, you know, like the right place, right time is sort of you were there when GraphQL was starting and saw an opportunity to provide something in WordPress that was aligned with the interest of the broader Web dev community, which was a GraphQL layer for WordPress. And then, it have been you built it for the newspaper and that's where it ended. Which, in my experience, I have built a lot of little quote unquote open source projects, but it was me solving my own problem and I let it be good enough and kind of stopped working on it once it hit that point of, like, it solved my problem. And so, I think maybe the takeaway that I if somebody was asking me, oh, how could I do what Jason Bahl does, I think the things I picked out of your story I would mention, you specifically went to go speak at conferences and write about what you were doing and kind of spread the word beyond this is my, you know, I'm at this newspaper and this is how we're doing it. But rather, here's sort of a generic layer for using WordPress and GraphQL. And you worked on it from that perspective of making it as useful as you could to as many people as possible.

JASON BAHL: Yeah.

JASON: Yeah, so it's definitely capitalizing on the fact that there was interest in the space. But cool little note for anybody who is wondering how folks like Jason and a few other folks in this space have been able to transition into open source as a full time gig. Well, cool. So, let's talk a little bit about the some of the specifics here. Because we've got, I think, a world record for longest title of a stream today. [ Laughter ]

JASON BAHL: Yeah.

JASON: So we've had we talked about WordPress and specifically, using WordPress as a headless CMS several times on the show before. And, you know, you've been here talking about that. And we've talked about WPGraphQL once or twice. We've done some things. I've made a couple of I've made a couple projects where I used WPGraphQL. We've had you on to talk about WPGraphQL. And there's a couple things that are new in the description that I'd love to dig into. So the first one is Faust.js. And the second one is WPGraphQL Smart Cache. I'll let you decide where you want to start. But let's talk about some of these things we've never talked about on the show before.

JASON BAHL: Yeah, so Faust is a I don't know what the right term is, metametaframework. If Next is a meta framework, I don't know what it is. It's a JavaScript package we're working on at WP Engine that works with Next. Works with Next and provides a lot of really cool stuff to use WordPress as a headless CMS to build Next sites. It does some really cool stuff you get for free out of the box in traditional WordPress like template hierarchy and things like that, which doesn't really exist in headless when you go headless, when you go headless with WordPress, you sacrifice a lot of things you get for free in monolithic WordPress. So it brings back some stuff you're familiar with but it's a very good blend of using next and what Next is good at. But still using some familiar concepts from WordPress and what WordPress is good at. And things that you expect to work together. Like, Next kind of has its own opinions on routing, but WordPress has its own opinions on routing. And if you're using a CMS, you need the CMS to make the decision on the routing. You can have internal links you're linking to stuff. And if your frontend doesn't have the same routes as your CMS, that's a problem for content creators. We need things like that to work together on both sides. So Faust helps fix some of that. So that's Faust, we'll look at that. And the WPGraphQL Smart Cache, ideally, this is going to end up being part of WPGraphQL Core, but we're testing it with a smaller user base right now.

JASON: Oh, so it's a separate thing.

JASON BAHL: It is at the moment.

JASON: I gotcha.

JASON BAHL: Ideally, once we finesse it completely, it'll just be part of WPGraphQL. But we want a little bit of freedom to make breaking changes and stuff with a little bit smaller audience to start. But what that does, that allows you to make get requests instead of post requests. And then you'll be able to hit the network cache of your host. And it tracks what you queried for. Because GraphQL, right, you can query for all sorts of arbitrary resources in one request. You can query for post, pages, users, media items, like all of that in one request. And so, let's say you query for post pages and media items, it's going to track you query for those things. And when any of those individual nodes are updated in the CMS, it knows which queries to purge from the cache. So you have a mix between really fast responses from a cache GraphQL endpoint, but also, accurate data being, you know, purged from the cache when it changes. So it's really cool, we're going to look at that how we can use that with Faust to get a mix of static site served from next but also up to date.

JASON: Gotcha. Gotcha. That's very cool.

JASON BAHL: We don't have to send a webhook and have our site rebuild. The second you publish new content, it's live and users are getting static files after that. It's pretty cool experience.

JASON: Gotcha. And so the way we're doing that, I'm assuming we're using the Faust is using Next in SSR mode?

JASON BAHL: Yeah, so we'll use static, we'll use static, get static props and all of that stuff. But the way, we'll set our revalidate to very low so what Next is going to do, it's going to try and if you visit URL in Next, it's going to try to build the page. That first build will be server side, and then, it'll create a static file and then it will attempt to revalidate that static file. And so it if there are no changes, it'll do a get request. Once we get it all done, it'll hit a cache most of the time, determine that nothing has changed and you'll have a static file still.

JASON: Gotcha.

JASON BAHL: If there's a cache miss and there is new data, Next will rebuild your page and fresh data. Yeah, it's a pretty cool experience.

JASON: Very, very cool. OK. Sounds like we've got a lot we want to cover. So does it make sense to go straight into some coding?

JASON BAHL: Yeah, so I would say the first thing, hopefully yeah, the first thing let's actually hop into WordPress. I sent you an invite into the WordPress install.

JASON: Got it. Got it. I'm going to have to pull. I have to do some sneaky stuff here to make sure that we have no passwords on screen.

JASON BAHL: Yeah, for sure.

JASON: I'm pulling it up on my phone so I can see my let's see. Oh, wait. I screwed this up. I should have done this. I should've set this password beforehand. So I'm going to set a password that I can type.

JASON BAHL: Because right now, we're in a what I'm having you do is log into a WordPress install I've set up on WPEngine, you can set up free sand box accounts for@less, our headless hosting. WPengine.com/atlas. You're going to log into it. There's a series of plugins that are installed but they're not active yet. We're going to step through things one at a time.

JASON: Got it, got it. OK. So, I think I'm now ready to go with that password. Before we get started, I'm going to do a quick shout out to the captioning. Diane's with us from White Coat and thank you very much for being here. And that is made possible through the support of our sponsors, Netlify, NX, New Relic and Pluralsight kicking in to make this more accessible to more people. Which I very much appreciate. And we are talking today to Jason Bahl. So if I go to Twitter.com/JasonBahl, I can drop that into the Twtich chat, which I should've pulled up in some way that was let's do it this way. Can I make any noise, OK, good. So I'm going to drop this in here. And great. We'll just use that for my Twtich chat dump today. Good. OK. So, you wanted me to get into the WP learn with WPengine.com.

JASON BAHL: Yeah.

JASON: OK. And the email address OK. I hope that

JASON BAHL: If it doesn't work, I can reset you a password, too.

JASON: Are we good? OK. Good. [ Laughter ]

JASON BAHL: All right.

JASON: OK. I'm in.

JASON BAHL: Super quickly, this is basically a vanilla WordPress install. I do have some plugins installed, but they're not activated. So just super quickly, for those that are not super familiar with WordPress, let's go into like click pages and I think we have like a sample page in there. I kind of want to show the normal WordPress experience. So click view on this real quick. And it'll

JASON: OK.

JASON BAHL: Yeah, that's fine. If you click view, you'll see this page, rendered by PHP in WordPress. Now we can edit this at the top. So if you click edit. Let's make a simple edit, like change the title or change something. And click update and then click view, again. Because the publishing experience in WordPress is like everybody is familiar with it. You make a change and then, you can view it immediately, right? So this should save uh oh, yeah, says post update.

JASON: View page.

JASON BAHL: Yeah. There you go. So that's the traditional WordPress publishing experience.

JASON: Mm hmm.

JASON BAHL: Edit something, click update, your content is live.

JASON: Right.

JASON BAHL: There's been an explosion in headless WordPress, but one of the sacrifices has been some of the publishing experience, right? Like, developers are saying, hey, we want to serve static files but the tradeoff is you have to wait for the static files to be built. And sometimes, like in the past, I've had to wait multiple minutes for my site to rebuild statically. And that's painful, right? So we're

JASON: Right.

JASON BAHL: Gone are those days, right? I'm here to show you we can do headless WordPress, serve static files and have this same publishing experience. So the first thing I want to do, we're going to step through plugins, I'll have you activate plugins and we'll talk about them really quickly. And then, we'll jump into code and start using this stuff.

JASON: OK. So I'm in here?

JASON BAHL: Yep. Plugins, let's activate WPGraphQL first, so you click activate. And so WPGraphQL, this is the plugin I maintain very graciously from the sponsorship and employment of WPEngine. They're making this project a reality. What you get here, though. Like you just highlighted, the GraphQL IDE, this is the IDE if you're familiar with GraphQL, probably seen this interface before. It's a yeah, it's a

JASON: And if you're not, it's dope.

JASON BAHL: It's amazing. Almost any GraphQL library has some version of this available. But yeah. So GraphQL, you get you get an actual endpoint that then you can query data from WordPress. So and then you can use that data in whatever you want, right? So that could be a view or React site or someone asked ant design? Yeah. Good eye. But you could use it to build the frontend site, too. What Jason's doing right now is composing queries and exploring the data that exists in WordPress. So it's a super cool tool, you have the query composer he's looking at. There's docs for the schema and you can search things in there. So you can search for what exists, like you could type post or page or comment or whatever and you'll see all of the fields and types that the schema exposes and how you can access this data. So the API, the way GraphQL works if you haven't used it, you get one endpoints with the defined schema and you can ask for exactly what you want. And you get what you ask for in response, unlike a REST API where you hit an endpoint and you're not sure what you're going to get the server decides what to give you. The consumer gets to decide exactly what they want. They're raw, they're actually why you're messing with it. I'll show one thing really quick. The raw is the raw data that administrators can see in the admin. Click the user icon next to the play button, that will authenticate you as the logged in user and you'll be able to see the raw, unfiltered content.

JASON: Oh, got it. So this would be if I wanted some kind of advanced thing because we get that extra those extra details out of WordPress. But we wouldn't need that for if we put this up on the page. We get that rendered HTML. And so, that, if I'm looking at this correctly, and I know we're not talking about this today. We've got this kind of block builder here. And so, we could put any sort of block we wanted in here and that would show up in the rendered HTML.

JASON BAHL: Yeah, yep. Super cool.

JASON: Very, very cool.

JASON BAHL: Maybe a future episode we'll talk about the Gutenberg block editor. Maybe a future episode specifically about this. There's a lot of cool stuff coming with that, too. So that's kind of a quick overview of GraphQL. So the next thing, let's go activate the Faust plugin. We'll start writing some code. So the Faust and click on the settings below the plugin title. There's a settings link. So we'll walk through this a little bit. This is a plugin that complements building a headless frontend with the Faust JavaScript meta meta framework or package whatever you want to call it.

JASON: OK.

JASON BAHL: What this does, it provides some settings where you can, like, for example, if you go down to the features, you can do things like disable the WordPress theme Admin pages, if you're using a headless frontend, you might not want your

JASON: Right, you would want

JASON BAHL: Normal theme to show up. That's not always the case. You might be building a headless frontend but still having your classic WordPress theme. Might have headless landing pages but your main site is traditional. Whatever you're doing. You have options here to disable that stuff if you want to. There's some stuff to modify the archive rewrites and things like that. You can what is that the public route redirect? That will redirect from your WordPress rendered theme to your headless frontend like when you click view post, for example. So we'll look at some of these settings in a minute. And then, you have like the secret key, which obviously everybody can see right now. It's not that secret. Whatever. [ Laughter ] We can regenerate that if we need to. But what that does, that enables preview support. So we can do you can make changes in your WordPress and in your WordPress content that isn't published yet. But you can preview it.

JASON: Oh, yeah, yeah, yeah.

JASON BAHL: in your Faust site before you publish it. Super cool stuff. So that's the gist of that. So we will we'll just leave it those settings as is for now.

JASON: You said authenticated post preview, that means, this is one thing I think a lot of folks who start working with headless will ask about. So if I'm working on a preview, I want a URL I can send to my coworkers, but how do I make sure nobody else can see it? And this authenticated in here makes me think you've thought about and addressed that.

JASON BAHL: Yeah, so with WordPress, with WordPress and the CMS and I think most CMSes, if you have unpublished content, you don't want it to be publicly visible, right? Because I don't know what if you had a draft article about your company being acquired. You don't want that to be

JASON: Yeah.

JASON BAHL: So WordPress does its best, right, and does really well at keeping unpublished data nonpublic.. And WPGraphQL respects that, as well, if you have draft content, you have to be authenticated to a user in WordPress to see that draft content. And so, you do have to be able to see unpublished content in a preview. You would have to be authenticated as a WordPress user. So you could still send a link to somebody, but they would have to have access as a user of WordPress to see it. There's other types of previews

JASON: If they weren't. So like, if I sent a link to this somebody that wasn't authenticated, they wouldn't be able to see the public content, they wouldn't be able to see draft content for a press release.

JASON BAHL: Correct. If you wanted to show previews of design changes or something like that, right.

JASON: Yeah.

JASON BAHL: That would be like a build preview, right, which a lot of atlas supports that, Vercel, I think a lot of the hosts support build previews like that.

JASON: Mm hmm.

JASON BAHL: This is for content previews. We'll hopefully, we'll be able to demo that if we have time. So this is the Faust plugin. So, I guess, probably next step, let's go to that repo I had you clone down and we'll start working on that.

JASON: OK. So let me let's see. Just make sure that I've got all of this.

JASON BAHL: Yeah, pushed a little bit of stuff this morning.

JASON: Get

JASON BAHL: So this is a public repo if anybody does want to follow along or whatever. It's GitHub.com/JasonBahl/learn with Jason2023.

JASON: Let me throw up a link to that, it's right here, and we'll drop it into the chat.

JASON BAHL: And this repo was created specifically to demonstrate today. It wasn't, like, anything we're doing today is just for demonstration sake. So take it with a grain of salt. May or may not be the best way to do something. But it's a way to do something.

JASON: Why can't I find my own chat? OK. It was here just a second ago, right? No? Maybe? Why don't you go away if we're not going to look at you for a while. And you can come wider, which should give me the dang chat. [ Laughter ] Oh, my God. OK. I'm struggling hard here because I don't have my I'm not on my, like, oh, here it is. Jeez. OK. So anyways. Yeah, I'm streaming from the road right now for folks who weren't here on Tuesday. I have I'm in London right now. So we're using a stripdown setup. And it looks like it just hides the chat on small windows, which means I'm going to have to pop it out. Anyways, let's continue. So I've got the repo. I need to open that repo, actually.

JASON BAHL: Yeah, let's go into that in your editor and then.

JASON: Edit, GitHub, Jason Bahl, here we go. And that is open.

JASON BAHL: So, I think, first step will be to open a terminal. And this all JavaScript. So what this repo is, it's next site with Faust installed and configured. You can go to Faust.js.org. Faustjs.org, and there's some really good getting started instructions here. This repo was started from a Faust scaffold with just tiny bit of changes. So if we open a terminal, though, for this and you'll need to NPM install if you haven't done that already today.

JASON: I think I did, but let me run it, again, yeah, we're good.

JASON BAHL: Sweet. And looks like you have my latest. Can you actually I meant to comment out some things. Line number 9 on the file you have open, actually, line number 9 and 18, comment those out. We'll get to those later.

JASON: OK.

JASON BAHL: Oh, and line 6, sorry, my bad. Cool. Yeah, we'll leave that.

JASON: All good.

JASON BAHL: You should be able to run NPM run dev and this will start next with Faust uh oh yeah, we missed a step. So we need to this is in the getting started instructions and I'm moving too fast. We need to copy that sample environment .env to .env/local.

JASON: So I've got that. And my site was over here. Where was it?

JASON BAHL: Yeah, so, it's it'll be your WordPress URL. Like your B2B Learn with Jason.

JASON: Did I close that?

JASON BAHL:

JASON: I managed to clean that or remove it somehow.

JASON BAHL: You have it open.

JASON: It's right here. I thought I was on the Faust website. OK. So, I need to go it's in here, this is the URL?

JASON BAHL: That's the frontend URL. You want the actual WordPress install. So it's BPlearnwithJason. That looks right. And then the online 5, you can comment that. And you'll copy from that Faust settings page you have up. And you paste that in here. Then, yeah, cool. So now local host 3000, we should have uh oh, did I screw something up? I might have had something else I was trying to skipping one more step. Sorry. Run before this, run NPM run generate. NPM generate, whatever it is. Do you have to say run? There we go. Oh, no. Oh, gosh. Man, I keep skipping so many steps. Can you go to the GraphQL settings in your WordPress? And we need to make sure GraphQL is publicly introspectable. Scroll to the bottom and click the bottom one. This makes introspection a publicly queriable. By default, it's not public. You have to opt into making your schema public. For what we're doing, we want it to be public. Oh, I cannot hear you. I don't know if you muted yourself.

JASON: What about now?

JASON BAHL: Yep, we're good.

JASON: My microphone pack died. Damn it. So that's fun. Well, my audio's going to be a little bit worse and I apologize. All right. So I have the so I've saved this, right?

JASON BAHL: Yep.

JASON: Where we've enabled the introspection. What is the risk of doing that? Why would this be off by default?

JASON BAHL: Yeah, so the risk is that somebody could traverse your schema and find out what's possible to be queried. WPGraphQL handles most, all of the security happens in resolvers. You could traverse the schema and find out what's possible and potentially, I guess, if there's a vulnerability with any of the resolvers, you might be able to exploit it if you knew the schema. When you try to execute a GraphQL query, the resolvers are responsible for determining if you have proper to see what you're asking for before it resolves. Even if you do know the schema, I believe very little risk. We want to we have it opted out by default. And you have to make a conscious decision to say, sure, I want this to be available in tools.

JASON: Got it. Cool. So, now that we've done that, are there any other steps before we run this, again?

JASON BAHL: I don't think so, but who knows. So NPM generate. What this is going to do. Faust uses Apollo under the hood. Apollo kind of, it knows how to cache and return the data and things like that and whatever. So this command does generates a file called possible types. This is a configuration you provide to Apollo so Apollo knows how to resolve interfaces and I think unions, at least interfaces. So we run this command to say, hey, Apollo, here's the schema, here's what we're working with when we come across an interim phase, you know what to do with it.

JASON: Gotcha. Cool. Ran that. Now I've done NPM run dev. And I noticed we got a raid from Mark Finance Singularity who is going to be on the show here pretty soon, next week after. Thank you for the raid, hopefully you're having a good time. We are learning how to do headless WordPress with Faust.js which is a meta meta framework and WPGraphQL. So far, we've cloned a repo, we've cloned this repo here. And have put that on my computer. We set up the defaults of our setup. We enabled introspection, we turned on the Faust.js plugin. And got our key so that we can show pieces there. And then, set our installed name or install location over here. And now it's running at local host 3000, right?

JASON BAHL: Yeah, should be.

JASON: And we have

JASON BAHL: Sweet.

JASON: A Faust site.

JASON BAHL: This is a super simple scaffolding site. So let's take a look at well, actually, let's do something in WordPress real quick. Go back to your WordPress dashboard and update the title of the site really quick. Go to the WordPress Admin, wherever that was..

JASON: This one.

JASON BAHL: If you go up to the settings, right above the active menu item you're on right now. If you scroll down, there's the wrench.

JASON: This one?

JASON BAHL: Not that one. Which one is it? Maybe a couple above that. It's settings, I'm looking for settings. Which one is it? Keep going.

JASON: Settings

JASON BAHL: Can you expand that menu? It's hard to read.

JASON: Yeah, let me

JASON BAHL: It's actually the active menu item we're on. So yeah, let's go to general settings. I'm not used to looking at a menu collapsed. So make it change to the title, for example. Learn with Jason exclamation point or something.

JASON: Got it.

JASON BAHL: Scroll down, save changes, and we should be able to we should be able to refresh this page and should see, cool. Learn with Jason exclamation point. Your site title.

JASON: OK. Great.

JASON BAHL: Now it's getting data from WordPress, it's working the way we hoped it would. So now, let's look the a some code and kind of see how things are set up and then we'll and then we'll dive into template hierarchy, which to me, there's a lot of really cool features with Faust, but to me, one of the most excitinging features is this template hierarchy concept.

JASON: For a lot of folks, especially, I think a lot of folks working in frontend for who weren't originally in the WordPress side. What is template hierarchy?

JASON BAHL: Sure. So if you're working in, if you're working in something like Next or whatever, the Next has opinions on how to do routing. For example, your pages, app, your directory. And you have a folder structure that says, OK, I have a post folder and then anything, any URL that's post/something will try and resolve that. Well, when you're using a CMS, users sometimes have input in what template to return. For example, WordPress has a page template option. And you can actually select the user can select the template that they want. And so it's not dictated by your path structure in your codebase, it's dictated by user input. Right?

JASON: Right.

JASON BAHL: Or various variables. Let's say I had a template for all of my blog posts, but I wanted a specific template for, I don't know, any post tagged with Learn with Jason, for example. And I wanted to have different colors or something like that. We can take input from the CMS. And determine based on those values, we can return a different template, right? Versus match the URL and try and resolve to some path in my Next.js file system.

JASON: Right.

JASON BAHL: That's kind of the concept, we'll look at the value of that in a minute.

JASON: OK. Gotcha. OK. So we've got is that in the pages directory?

JASON BAHL: Let's start, let's take a look at the next conflict. Honestly, I forgot what's in there. Let's take a look really quick. OK. Cool. So the scaffold will set all of this up. If you do the scaffold on Faust website, this will all be set up. But we'll talk through it quick. Next has a Next config by default and pass in options to Next, we're not going to talk about those right now. But we're wrapping it with this "with Faust" function. And this wraps Next with Faust and Faust provides some opinions to Next.

JASON: Got it.

JASON BAHL: I don't have all of the details of that memorized, we won't talk too much about it. But Faust is adding stuff to Next to make it work the way we want it to.

JASON: Got it. A.

JASON BAHL: Go back to the file tree and go to the Faust config.js. So what this is doing, this is us configuring Faust to tell Faust how we want Faust to behave. The template hierarchy is one of the things. We have to tell Faust what templates are available to use. So that's what we do at the bottom line.

JASON: That's what that I understand.

JASON BAHL: So we say, hey, Faust, these templates exist. So when you try and resolve something, try and resolve from this list of templates and we'll look into that in a second. Faust also has we're working on the plugin system. It's still experimental, but we're going to look at this in a minute, too. If you're familiar with WordPress, you're familiar with hooks and filters, most likely. And that allows you to write snippets of code that modify behavior without having to, you know, be in charge of everything. Right? You can hook into just one slice of functionality, modify it, and so, yeah. So we'll look at that in action in a minute.

JASON: OK.

JASON BAHL: There's possible types we have to pass into Apollo, that's why we ran the generate command earlier.

JASON: And that was the one that where did this show up? In possible types.JSON here. And this is from running that NPM run generate command.

JASON BAHL: Yeah.

JASON: OK.

JASON BAHL: Yeah. So this is us telling Faust. Next, let's look at the template. If you go to the WP templates directory. If you go to the index file. This is where we configure what templates will be used. The best way to explain this would be so go back to your frontend and the frontend like your Learn with Jason Faust frontend, local host 3000 in your browser. Can you show your terminal, too, that had this running. There's going to be some possible logging happening here. Can you refresh?

JASON: Not this terminal?

JASON BAHL: Your terminal

JASON: Got it.

JASON BAHL: What actually logged when you refreshed the page, I don't know if you see that at the bottom. It says possible template. We resolved the home page. And so, what Faust is going to do is going to say, OK, given this URL, it's going to talk to WordPress and determine what the thing is that you're trying to get from WordPress. In our case, we're trying to get the home page. In WordPress, the home page could be an actual page, like of the page type or it could be an archive of posts, right? In WordPress, it could be the blog role or whatever you want to call it.

JASON: Mm hmm.

JASON BAHL: When you hit the URL, Faust communicates with WPGraphQL and says, given this URL, what does WordPress know about it? Right? And so WordPress WPGraphQL returns with some data, which we'll look at in a minute. But it returns with some data and Faust translates that and says, OK, this /nothing could resolve to front page, could resolve to home and if that doesn't exist, it'll resolve to index. It's going to try to match the first template it can find.

JASON: OK. For me to build my mental map here. The logging that is happening is what the WordPress CMS is sending us? And what I, then, do as I'm building my Faust site, is I need to decide is my home page, do I want it to be front page, home, index, et cetera? And then I have to define a template that matches one of these. If I change this, for example, from front page to home, it would continue to exist. But if I change this from front page to something different, it would break.

JASON BAHL: Yes. Well, it wouldn't break, it would fall back. And well, it actually would break. Because we don't have

JASON: Because there's no we don't have any others matched up here.

JASON BAHL: It'll fall back until it can't find a match. In this case, the only one we do have matching is front page. I would probably recommend in traditional WordPress, you kind of have to have an index template.

JASON: OK.

JASON BAHL: We may or may not want to consider enforcing that, at minimum you have to have one. There's probably reasons we don't do it.

JASON: Gotcha.

JASON BAHL: If you go click into that front page, the actual file that we imported there, this is the template that is being used and being rendered in your browser. So you can go scroll down and just make changes similar to this mark up, you know.

JASON: Yeah, do you want me to keep is there anything you want me to just kind of make a mess in here?

JASON BAHL: It's whatever you want. Maybe just change one of the let's see, scroll down. Yeah, just change something. That Learn about Faust, just so we can see what happens. Change that sentence.

JASON: I made a change and there we go.

JASON BAHL: Cool. Some of this information is hard coded, right? It's not coming from WordPress. Let's go back to WordPress, your dashboard of WordPress. And let's look at some content there and then, open the menu and we'll go to pages, for example, and get a URL of one of the pages.

JASON: OK.

JASON BAHL: We looked at the hello, friends, earlier, we looked at that in WordPress. If you click view right now, let's see. Is that URL? Is that showing your WP Engine instead of instead of going to the whole thing, just copy the path.

JASON: Slash sample page.

JASON BAHL: Yeah, we'll see the template hierarchy in action. The home page has its own template and our singular has a different template and if we look at the console log there, we'll see the possible templates for sample page were page, sample, page, page 2. Basically, it's a hierarchy. It's going to say the most specific thing, it's going to try and resolve first. That's a page with the with the slug sample page. So if a template existed for that specific page, it would return that.. If that doesn't exist, it'll try to do page with database ID. That would be page 2. If that doesn't exist, it'll do the generic page template. If that doesn't exist, it'll do the singular template. And then, last, it'll try and use the index template. If we wanted to right now, I believe it's doing the I think we have a page template. So it's doing the page template. Let's say we want to

JASON: Yeah.

JASON BAHL: Let's say we wanted this particular page to look different than all of our other pages, right. We could create a file called page sample. We could create the file. The file could be named anything we want, right? And then we'll pass it to our config and index file. Let's just copy that. Yep. Good. And then, we'll go

JASON: I will do something like let's just add one of these and make it a 2. And we'll say this is a custom.

JASON BAHL: And what we have to do. We will have to in our templates index.js, we'll have to tell all of our templates.

JASON: Right, right, right. We need this to be page, sample, page. And that's going to be page, sample, page, which we will import. Page, sample, page. And you come from there. Now, we've registered a custom template. And we have built it. So this now shows our I didn't have to refresh. That just showed up. So now, we have our custom template. Yeah. This is slick. I mean, this is I do think this is one of the things that makes WordPress really strong is that it has this sort of fallback system where you can get increasingly more specific. And you can do things like, all right, can't you also in the WordPress Admin, you can specify which templates you want a page to use if you

JASON BAHL: Yeah, yeah, you can. If your theme supports itself. Can you do me can I get that very top right, what is that? I think the black cog wheel. Click that. No, maybe the three dots next to it. My bad. Get rid of the full screen mode. This drives me nuts. Just uncheck that. Makes me feel like I'm still in WordPress when I see the side bar. I don't like the full screen. But the page attributes, if you look to the right, page attributes, yeah, you have to you have to tell WordPress that you support templates, and I think you have to have templates defined. And if you do, you can select. Right now, the environment I set up, we don't have page templates set up. We'll demo that specifically. That was one of the things I'd mention. Users can provide input, right? Like choosing a specific template and that'll work with our template hierarchy system in Faust, too. We won't demo that specific feature. But yes, it is something you can do and will work.

JASON: Nice.

JASON BAHL: Yeah, let's go create another page, just click add new. And we'll look at, you know

JASON: Add new. OK. Let's create one

JASON BAHL: Doesn't matter.

JASON: OK. So I am hungry, we're going to say, pizza time.

JASON BAHL: We just missed pi day, too. Air fried pizza time.

JASON: Air fried? Hold up. So let me do a quick we'll grab a pizza image here. What is air fried pizza?

JASON BAHL: Oh, it's the best invention in the world. I ordered extra pizza just so I could air fry my leftovers, and it's amazing. Reheated pizza.

JASON: Oh, I can see that working. Because it's effectively in a convection oven, right?

JASON BAHL: Yeah, and the way it crisps up crisps, I can't say that apparently.

JASON: So, I have a little page. Did you want me to publish it?

JASON BAHL: Yeah, sure. Publish it. Basically, all I want to show is now we have two pages and you can take that, you can take the path to this and we could probably change something in Faust settings to show

JASON: I wasn't sure if I would have to

JASON BAHL: That URL is actually on WPEngine, but let's use the path because we're obviously doing stuff locally. Sweet. So now you

JASON: There we go.

JASON BAHL: Whatever, our styles are not obviously well for responsive images and stuff. But we're not focused on that right now. But what you will see is this is using the normal page template. But the other one, the other one was using your custom template, right?

JASON: Right.

JASON BAHL: So they look almost the same, but obviously, this one has your H2 or whatever you added. That's cool. You can start publishing stuff. And so, next, I want to show you something super cool. We're going to go actually, before we do this. Let's kind of look at the template and what's available to do. So whatever template we're on, yeah, let's do this template, that's fine. So the way these templates work, there's a couple pieces to it. And this might remind you of if you've used Gatsby, which I know you have, obviously. Some of this might look a little familiar. So we have our component. So in this case, we have our export default component. So this is going to be our template component. And if you scroll down, well, that component gets props and the props are the data that are going to be coming from GraphQL. So if you scroll down, oh, let's see where we're at. Scroll down. So now we have component.variables and component.query. This similar to Gatsby if, like, page queries, for example. So the query is the query that we're going to write for this specific template. Anything we query on this template will be a variable to our component. So we get to define what we want for any given template, right?

JASON: OK.

JASON BAHL: And the variables, though, the variables that come through are done by what's called the seed query that runs in Faust. So when you visit a URL, Faust makes an initial request to WPGraphQL to ask information about the thing that URL represents. So is this thing

JASON: Doing that by slug, right?

JASON BAHL: Yeah, by the URL. Not just the it'll do the full path. Not just the slug, but if you had dates

JASON: If it was in a slash blog slash whatever. OK.

JASON BAHL: It'll take the full path and send it to WPGraphQL and say, hey, what does WordPress know about this? Is this a post? Is it a page? Or is it nothing? And if it's nothing, it'll return not found and Next can try to do its own thing. Say you had a hard coded page that didn't exist in WordPress. You'll still be able to do things you can do in Next, also. You can build a hardcoded landing page and it'll work side by side with this.

JASON: Got it. Very cool.

JASON BAHL: Can we console log online whatever 42 or whatever, inside the variables, I can't read the numbers, it's a little blurry for me, yeah, right there. A console or instead of just database ID, can you change instead of passing just like the deconstructed whatever, pass I don't know props or C data. And console log the C data and just so things keep working. There you go. Perfect. Cool. So I want to show what comes through. You might where does this

JASON: Do we have to stop and restart to get this?

JASON BAHL: No, you've got to go to your sample page. This template isn't being executed.

JASON: Right, here we go.

JASON BAHL: Yeah, there you go. Cool. So what the data that's passed to the variables is all this information. When you visit a URL, Faust like I was saying will talk to WordPress, gather some information about what the thing is. Pass that information back so that you can write a query about that specific thing. And so, it uses this information to determine what template to go to. We'll see, for example, URL you visited. It's a GraphQL type page, it has a URI/sample page. This GraphQL ID, database ID, it's determined it's a content node, which is synonymous with a post type in WordPress. Like a post of any posttype. It has this slug. It has this content type. So more information about the type of content it is. Like whether it's a page or a post or a house or a car or a pizza or whatever. It has this template. So if we did have that template selector available, it would show up here and allow us to route to a specific template. It also determines whether it's the front page, or not, and whether it's the page that represents the blog or not. So it gets all of this information, passes it back to the variables, and to the template router. And then, it makes some decisions on what to render. So now, we can use any of those variables to write our queries. So our query below, like, right now, we're asking for a page, given a specific database ID, that database ID is coming from that seed data. We hit a URL, WordPress tells us what database ID it is, we say this database ID, we want to query this information about that page. And then, we can use whatever we query.

JASON: And so these and these just have to match?

JASON BAHL: Yeah. Exactly.

JASON: Very cool.

JASON BAHL: Let's modify. You can open GraphQL, again, if you want, or I could tell you what to write if you want.

JASON: Why don't you tell me? I want to be mindful of time, we've got about 30 minutes left.

JASON BAHL: Let's add date. Title content date and go up in the mark up somewhere and let's render the date.

JASON: Content.date, oh, we needed the

JASON BAHL: Destructure whatever it's called. Deconstruct. Destructure, yeah, whatever. I don't know what I'm doing.

JASON: OK. I know the feeling.

JASON BAHL: And obviously, you can format that however you want.

JASON: Yeah, you know, we could do one of these new date, to locale string.

JASON BAHL: Yeah, so then, basically, anything that exists in the GraphQL schema for this type, so we're querying for a GraphQL type page. So anything in the schema under that type, we can now ask for and return to this template.

JASON: Right.

JASON BAHL: Super cool stuff.

JASON: And, you know, very quickly starts to come together, you can see this all happening. So it's like this is one of the things I really like about when you start working with WordPress is the so many conventions are already there in WordPress. Whereas, I have noticed that with more the more free form CMSes, you have to build out your content schemas and these different pieces, which is part of their power. But if I'm just making a blog, I kind of want somebody to say this is what a blog is, right? And that's something I think WordPress does really, really, well. If you're building plain content, plain blog, there's really, this is the standard. You're going to end up rebuilding this ire archi, these schemas in whatever tool you're using. It's nice not to have to do that.

JASON BAHL: Yeah, next. I have way too much I want to cover today. And 30 minutes probably won't do it. So next, in your WordPress dashboard, let's well, actually, super quick before go to your WordPress URL/GraphQL in a browser.

JASON: My WordPress URL/GraphQL. Let me go full screen.

JASON BAHL: BP Learn with Jason.

JASON: Slash GraphQL.

JASON BAHL: This is our GraphQL endpoint. And can you open up your dev tools, like your network panel? I want to show you cool stuff. We're going to talk about WPGraphQL smart panel. Can you click on the endpoint, let's have this up. And in your URL. Slash GraphQL, can you add question mark query yeah, query equals and then like in you don't need the quotes. Just do the GraphQL syntax, the open brace and say post, like, put the plural posts, and brace nodes yeah, another open brace nodes, open brace, ID, comma title and three closing braces. Cool. So this is like doing a get request to the GraphQL endpoint. We should get posts, right? And if we look at the network, look at the network click the request in your network tab and scroll down, we should see, oh, you're actually logged in. Can you do this incognito window? Sorry. Or a different browser maybe?

JASON: Yeah. Let me that's incognito. First try. Let me go back to this one. Copy this, then we'll take this one full screen.

JASON BAHL: I want to show it's not going to be as pretty with your decoded or whatever pretty JSON or whatever. If you're authenticated in WordPress and make a get request, it'll bypass network cache. But if you're not authenticated, if you're a public user and make a get request to the GraphQL endpoint, it will be cached on the network level. So WP Engine has ever catch, a layer that caches GraphQL queries. So we should see there should be a cache header somewhere in here. It'll be like X cache somewhere in here, keep scrolling. Here we go. If you keep refreshing this. Refresh it like five times. Since this query has been hit a few times, it's going to be cached. So we're at cache hit 5 or whatever that is. What that means is this GraphQL request is not actually hitting our WordPress server. Our WordPress is not executing PHP, it's not talking to the database, it's getting this directly from the network cache layer. And returning the response. So our WordPress server isn't being overwhelmed. If you had a spike in traffic, your WordPress server is going to the first hit will generate the response, and after that, it will be it will be cached, right?

JASON: Got it.

JASON BAHL: Let's go on WordPress, though, look at the response. We have our post, what do we have? This is rad post. Let's go change that. Let's go change that title to something else. Keep this window open. We're going to come back to it. Yeah, go back in the WordPress dashboard and change that title to something else. And we're going to see we're going to see a problem really quickly. Let's go to the post.

JASON: Going to the posts.

JASON BAHL: We'll change that to this is sad. Or something
[ Laughter ] This is going to be sad, watch. We are going to be really sad right now.

JASON: Updated.

JASON BAHL: You just updated content. Now refresh this query. And oh, this is sad because

JASON: Womp.

JASON BAHL: We don't have content. Caching is this wonderful thing for speed, but it's not a wonderful thing if you want current data. So that's WPGraphQL Smart Cache is solving that problem. Let's go back into the WordPress dashboard and activate that plugin and we'll do the same thing and holy smokes, man, your mind is going to explode.

JASON: I'm ready.

JASON BAHL: The plugins.

JASON: Here's my plugins, smart cache and all I have to do is activate it?

JASON BAHL: We can look at the settings really quick, but I don't think we need any of them right now. Actually, yes, let's just activate, under GraphQL settings and new tabs. Up at the top, will be saved queries and cache. I don't believe we need to touch any of this right now.

JASON: Got it. OK.

JASON BAHL: I will call this out right now. WP Engine is the first host that has official support for this.

JASON: OK.

JASON BAHL: Other hosts, I have a gist out there for folks running light speed. You can get this working with other cache providers. It's not exclusive to WPEngine but obviously invested in making this work well. It can work with hosts, there are opinionated things that hosts will have to do to enable the purging. Once this is active, now what's going to happen, let's do a different query. Change this query this is going to be cached for a minute, and we're not it's not going to know how to invalidate yet. Let's change one thing about the query. Add one thing. Let's add date, again. We were querying for date before. Cool. Let's go back to the headers. And yeah. Let's look at the headers. This should be a cache miss, and refresh five times and we'll get to cache hit 5 whatever. You can keep hitting this, it's going to be cache, cache, cache, cache. And now we do see the title here. This is sad. We did a new query.

JASON: We've got the new one.

JASON BAHL: Now let's change it back to this is rad. And previously, when we changed content, our query was showing stale data.

JASON: Right.

JASON BAHL: Now if we update content in WordPress and run that query, again. If things are working, we should see this is rad. Sweet.

JASON: And there it is. And.

JASON BAHL: And it'll be a cache miss this time, we purchased it from the cache. We said, hey, we know what you queried, and we know what you just updated and this query had that in it, we're going to purge purge this query. We're not purging everything.

JASON: Got it.

JASON BAHL: Oh, do me a favor, in another tab or browser, do a query for something else, like let's query for instead of posts, let's change it to users, and then nodes and then ID and instead of title, let's change it to name. Queried for ID and then name. Oh, well

JASON: Wait a minute, what did I do?

JASON BAHL: Got to maybe just do it in normal syntax.

JASON: Yeah.

JASON BAHL: Let the URL encode it or whatever. Nodes comma yeah brace. Open brace.

JASON: And it's the end, right?

JASON BAHL: Cool. So we query for users here. This will show public users. You don't have access to all users in WordPress publicly. You can see users that are public entities and that means they're users that have published content that is published. You can have users that just do administrative work and they won't be visible in the GraphQL API. But so, if we do this and refresh like five times or whatever, we'll get cache hit yes. We're going to cache hit something. If you change something arbitrary. Let's go back in your dashboard and let's do something completely arbitrary like let's go add a tag or something or whatever. Let's go to tags and add a tag. So this is going to mutate data in WordPress, right? But neither of our queries that we queried will be evicted from cache. If you refresh this, it's still going to be, uh oh, yeah, cache. I thought I saw a response.

JASON: And if I go back to the other one.

JASON BAHL: This should still be cached. Should be a cached hit.

JASON: A post would be affected by the tag

JASON BAHL: It wouldn't be

JASON: Well, like, the tags are as part of the post, right?

JASON BAHL: As soon as you assign yeah. As soon as you assign.

JASON: Yeah, yeah, yeah.

JASON BAHL: Let's go to the post and you could add a tag to it. And yeah. If you edit and assign a tag to it, I believe if everything's working, if everything's working properly, when you do this, the post says, hey, you just updated the post. So we're going to the

JASON: We'll start with users.

JASON BAHL: That should be cached.

JASON: Users missed.

JASON BAHL: I think I know why. I'll explain.

JASON: Either way. But we got we did get the update on

JASON BAHL: I think I know why. It's so one of the reason why is we actually track when we go to post in the GraphQL API, we have to determine who the owner of the post is. And so

JASON: Ah.

JASON BAHL: So that, yeah, there is a relationship between user and the published post. So that is a weird nuance that I don't have time to explain. That's fine.

JASON: OK.

JASON BAHL: That's the gist of it, though. You get your cache, you can do these cache requests

JASON: Right.

JASON BAHL: Get requests to GraphQL, you're responsibly really fast and the WordPress server isn't getting hammered. What I want to show now is how we can take advantage of this in Faust. So Faust by default is going to do post requests. . That's kind of a defactor in GraphQL is post requests.

JASON: OK.

JASON BAHL: And post requests are going to hit the WordPress server every time. They'll bypass the network cache every time. And so, if you had a traffic spike, it's going to be pinging your server a lot. And that could be a problem. Static files, whatever. That is also going to help here. So let's go to the Faust config. I had some stuff connected out in there. If you could uncomment line 6 and line 17. So what I have here is like a scaffolded plugin for Faust. If you go under plugins directory and then get request, this is just a tiny snippet of code. Tiny snippet of code that modifies Apollo. And you'll see it says get for queries. Hey, Faust, tell Apollo to use get requests for queries, and now get instead of post. And you can refresh your page and it'll work the exact same. We won't see anything different, like with your local host 3000. It should if I didn't have a syntax error in this code, it's going to work the same. But it's doing the get request instead of post request.

JASON: And that means we're hitting the cache now.

JASON BAHL: Yeah. And so let's take it a step further because I've got to go fast because we're short on time.

JASON: No problem.

JASON BAHL: I had another plugin scaffolded. If you just wanted to use get request, you can use get request, and if you had Smart Cache active, you'd get that experience where we can we'll get cache data when you publish content, it'll become a cache miss and you'll get fresh data. The second one is persisted queries. If you go back to the Faust config, this one's going to replace the other one.

JASON: Oh, it replaces it.

JASON BAHL: I probably could've had them work together, but I did it fast..

JASON: You stay, you go.

JASON BAHL: So persisted queries plugin. I don't know if you commented out the import for get request.

JASON: Oh, it didn't work. There we go. OK.

JASON BAHL: If we go to persisted queries, if you've been in the GraphQL space, you may have heard this term before. The idea is that and this is opinionated implementation for Apollo. But the way this works is that Apollo will try to make a get request to the GraphQL API. If it is using an ID. So it will say instead of the full query string, it'll use an ID. So it hatches the query and sends a get request for that ID. If that query already exists on the server under that ID, it will execute the query and return a response. So what that allows us to do is write really long GraphQL queries, right? If you're doing get requests, there's query string limitations. And GraphQL queries can get quite big, right?

JASON: Right.

JASON BAHL: Allows us to write really BigQueries but condenses it to an ID and sends that ID over.

JASON: Mm hmm.

JASON BAHL: You can go refresh your pages, again, and things, if I didn't have syntax error or anything, things should still work. What happened, though, it sent the query document to the WordPress server. And so let's go back to your WordPress dashboard and take a look at what happened. Because this is really cool.

JASON: OK. WordPress dashboard. Nope, not that one, this one. And go to the dashboard. OK.

JASON BAHL: Go under GraphQL settings, again. Persisted queries are supported but nothing visible. Go to saved queries right there and click that bottom check box that says toggle to show the UI or whatever and click save changes. We're going to see a GraphQL documents now over on the left. So now, now we're going to see the queries that your templates were generating . Your Faust frontend was sending those queries over to WordPress. WordPress was storing it and sending an ID. And you'll see the IDs in the under alias names. If you copy just like right click one of those IDs and click copy or whatever. Copy just the text.

JASON: So there's a comment, does that mean there's two of them?

JASON BAHL: Yeah, you can alias it in multiple ways. We do one version exactly how Faust sends it and then, we do another version with like the space trimmed. We trim the white space from each query. We identify the exact same query even though the formatting is different. It's a different hash. So we say, OK, both of these can be accessed. If you copy that string and go back in your slash GraphQL endpoint where we were querying posts and stuff like that.

JASON: Oh, my slash GraphQL. Yeah, yeah. BP

JASON BAHL: If you do that. If you add to the URL question mark query ID, and then equals and then paste. So now, you can execute, oh, this needs a database ID. So we also can do patch variables with it. Go back to the URL and we'll say it's and and then variables. It'll be variables equals

JASON: Variables.

JASON BAHL: And then open braces. Curly braces. And then, in I think it's got to be quotes. This has to be JSON database ID. And then, I think what query was it? Do database yeah, something like that. Cool. Now you can do these really long queries with an ID and things just work, right? So Faust and Apollo know how to handle this stuff. I'd add a little snippet. Right now, that's just like a gist somewhere, but it could become a formal NPM package or a formal Faust config or something like that at some point. So you can use persisted queries with WPGraphQL. You can write these really BigQuery strings. And now, another super cool thing, one of the most exciting things to happen in the history of WordPress. So let's go back to your plugins list. And if we go to plugins. So have you heard of advance custom fields? I know you have I've talked to you about it before.

JASON: Yes.

JASON BAHL: I hardly ever work on WordPress sites without it. So I have a beta version of advance custom fields installed here and a beta version on WPGraphQL for ACF. I have a beta version that is going to be open to the public very soon. Very soon.

JASON: OK.

JASON BAHL: Let's activate both of these plugins and I want to show you something super cool. ACF, the beta version, and I do have permission from the team to talk about this even though it's not out yet. The beta version of ACF has the ability to register post types and taxonomies from WordPress. If you go over on the left side, ACF menu item, under that post types. Let's go

JASON: Go to post types.

JASON BAHL: Click add new. So post types in WordPress, if you think of any other system, you have models or whatever you want to call them. Types of data. Right? It could be houses or cars or products or whatever you think of. It's collections of data. You can register this via advance custom fields. So whatever you want to call it. Whatever you want to call it. What is something you would keep a list of? Foods or pizza.

JASON: Obviously snacks.

JASON BAHL: There you go. If you scroll down to advance configuration, there's going to be stuff here we can do. Add support in the Admin for title, editor, featured author, right now the default is title and editor. Maybe let's add a featured image. Snacks need visuals, right? And if you go over scroll up, we have all of these tabs, we can configure the post type in various ways and click GraphQL. We'll say show in GraphQL. We want this kind of content to exist in the schema. We'll call it snack and snacks in the GraphQL schema, click save changes.

JASON: OK.

JASON BAHL: I didn't have to write a line of PHP, WordPress is obviously a PHP system. I didn't have to write a line, on the left side I now have snacks in my yeah, you can

JASON: I didn't realize that was the visible one.

JASON BAHL: That's true. Now, we have this new type of content we can publish stuff to. So add a title, like, what, I don't know, smashburger, there you go.

JASON: OK.

JASON BAHL: You can add a featured image or whatever.

JASON: Yeah, let me do one

JASON BAHL: Or click media library. Oh

JASON: I did it by URL.

JASON BAHL: Bummer. Nah, it's fine. It's not a super big deal.

JASON: Yeah, OK. So I don't think I have any pictures of food in my downloads, which is really a tragedy. [ Laughter ]

JASON BAHL: Yeah, just to get the gist of it.

JASON: I'll just throw in I did a new like card design.

JASON BAHL: Yeah, drag it.

JASON: And throw it in.

JASON BAHL: We'll pretend this is a smashburger, sweet. And then you set the featured image. I don't think you clicked set. Click image and set at the bottom.

JASON: Got it.

JASON BAHL: That's the featured image. You can publish this. What's really cool, right, this is super awesome. We just without writing any PHP, right, we just registered a new type of content, published new content. And now, if we take that path, the path to it, so over on the right, yeah, if we take the past to it whatever it was, it was snacks/whatever. Oh, no.

JASON: It was singular.

JASON BAHL: I was like, oh, no, did I screw it up?

JASON: Now I'm screwing it up. This is my fault. Let me like, I know I want to see the end of it.

JASON BAHL: No, actually, I know what's up. We missed a step. I think the ACF team has fixed this since the version I have. I know what's up, there's a bug. But we can fix it real quick. I think the version of the beta that I'm running isn't flushing links at the moment. If you go to settings permalinks. What this means, we added a new type of content to WordPress. And WordPress has this routing system that use the permalinks and tells it's saying, hey, given URLs, here's how to resolve things. When you add a new type of content. You have to tell WordPress, hey, there's something new here. So just click save changes. You don't have to change anything, you just have to click save, and it'll redo the permalinks. And another thing we'll have to do really quick. In your terminal, run the generate run the generate command, again.

JASON: Oh, right. Yeah. Yeah.

JASON BAHL: We introduced a new type of content. So we have to tell Apollo that, hey, this snacks is a new possible type. With these two things, we should be able to and yeah, we should there you go.

JASON: Hey, hey.

JASON BAHL: We didn't have to write any PHP. If you're a JavaScript developer that has previously had to turn down work for, you know, folks using WordPress because you don't know PHP and don't want to learn PHP, this opened up a whole this opened up 35% of the web for you to do work on, right? Because now you can do all sorts of awesome stuff at CMSes, you don't need to be a PHP expert. Obviously there'll be a day you'll need to learn some PHP. This isn't going to solve everything. But you can do some amazing stuff with little to no PHP. And I love PHP. No dogging on PHP. I write PHP every day. A lot of people don't. A lot of people like JavaScript, a lot of people want to build components in React. But still get content out of WordPress because the business they're doing work for uses WordPress.

JASON: And I think that's such a huge benefit, like you said. A huge proportion of the internet uses WordPress. And almost any client is capable of managing WordPress. So one of the things is such a power I remember when I was running an agency, I brought on, you know, every type of small business owner. Every type of individual. People who absolutely not comfortable with computers, not willing to learn interfaces, they were capable of managing the WordPress thing. And that to me was that alone was a big enough reason. And there's the other side of it, too, which is if I'm doing freelance work, I don't necessarily want to be on the hook to maintain every project I ever built for the end of time. I want to be able to hand it off to another freelancer, another team. And means that your stuff is very portable in that way, right? And so, there's a lot of good arguments in favor of using WordPress as a content management system. And what I love about this is that it's this doesn't feel you're stripping away the feel of WordPress this very much feels like it's all part of what makes WordPress great. Being able to do my custom post types through advance custom fields is I love that. I used to use advance custom fields so much when I ran my agency and I, you know, I can see a million ways why I'm going to end up doing this. Yeah, OK. So, we're effectively out of time.

JASON BAHL: Yeah.

JASON: If people want to learn more, where should they go? I know I saw a handful of questions in the chat about the advanced custom fields, WPGraphQL plugin when that stuff's going to be available. Where should folks go if they want to keep tabs on this?

JASON BAHL: Couple things, WPGraphQL.com is the main site for WPGraphQL. We have Faust.js.org for Faust. When it comes to well, and then WPengine.com/atlas, you can sign up for a free sand box account. What we just worked on. And we saw the cache work and all of that stuff, that for free on WP Engine, there are some limitations, you can't set a custom domain but a .wp domain. See if it works for your business or whatever. I've been hosting with WP Engine long before I worked here, by the way, I have 12 year old sites on there. It's great stuff. But anyway, those are some good sources. As far as WPGraphQL for ACF. What I just demoed there for WPGraphQL for ACF, there is a repo on GitHub under WP GraphQL organization. That plugin is going to be deprecated and the new plugin will be introduced soon. It's a brand new plugin. It's solving the same problem but it will be a brand new plugin. The code is completely different. And the schema that it generates is completely different and it solves all sorts of problems that people have had for years with the plugin. So if you do upgrade, if you want to upgrade, it is going to be a breaking upgrade. You will have to rewrite queries in your application to use it. More information will be coming very soon. In the next two weeks. It'll be a different repo. Just call out on that.

JASON: All right, go hit that on GitHub and, you know, start watching things, because news is coming. On that note, we're going to do another shout out, thank you so much to White Coat Captioning, Diane for being here taking down these words today made possible through Netlify, NX, New Relic and Pluralsight. Thank you, makes the show more accessible to other people and allows me to do the shenanigans I do. Make sure you look at the schedule. We've got Mark Erickson, he's the remix maintainer, he's coming to teach us about time travel debugging with Replay is going to amazing. And we've got a whole bunch of other stuff coming. Definitely don't miss it. It's going to be great. So, you know, maybe head on in and learn about stuff and it's going to be I said remix and I meant redux. Nobody knows, it's OK. You don't have to know things, we're going to learn together. With that, we're going to call this one a win. Jason, any parting words before we wrap this one up?

JASON BAHL: Sure. Somebody just asked about Gutenberg blocks, stay tuned. Because we at WP Engine are also working on solving Gutenberg blocks and WPGraphQL. Well, there is WPGraphQL content blocks, it's also beta stage right now. Find that on GitHub WP Engine/WPGraphQL blocks. GitHub.com/WP Engine, I think it's all one word. Slash WP GraphQL content blocks. So this in the early stages. I would say use at caution at the moment. Oh, contents blocks. This is kind of experimental at the moment. We're working through some stuff that's going to have breaking changes coming soon. Some really, really cool stuff. And someone asked if they would use Gutenberg with ACF. Yes, the plan is to have ACF blocks supported, as well. We'll do a follow up video maybe on that.

JASON: Awesome. Jason, thanks so much for being here. We're going to give James Quick a raid and thanks for hanging out and we will see you next time.

JASON BAHL: Sweet, thanks.