WPGraphQL Smart Cache with Jason Bahl

In this episode, Fran and Jeff catch up with Jason Bahl, the creator of WPGraphQL to discuss a new caching extension for WPGraphQL. Jason is a figure in the headless WordPress ecosystem that likely needs no introduction, but the group discusses some of their early experiences with headless WordPress.

WPGraphQL Smart Cache makes a user's GraphQL queries more efficient by providing network and object caching layer options for users using the plugin. Jason explains a ton of interesting technical details about the caching implementations. He digs into the following things:

• Using GET/POST requests with network requests 
• How cache invalidation works in this plugin in a nuanced way
• How Smart Cache can work with framework rendering patterns
• What other hosting companies can do to enable WPGraphQL Smart Cache on their platform
• How object caching works in the plugin if you can't integrate with a network hosting layer
• How a new feature called persisted queries allows you to store your queries on the server, like a SQL stored procedure
• Considerations for people using plugins or extensions to store custom data

Check out the plugin in WordPress plugin repository and leave the WPGraphQL team some feedback or a review: https://wordpress.org/plugins/wpgraphql-smart-cache/

Jason's Twitter
https://twitter.com/jasonbahl

Jason's GitHub
https://github.com/jasonbahl

WPGraphQL
https://github.com/wp-graphql/wp-graphql

WPGraphQL Smart Cache
https://github.com/wp-graphql/wp-graphql-smart-cache

WPGraphQL Smart Cache with Next.js and Apollo by Fran Agulto
https://developers.wpengine.com/blog/wpgraphql-smart-cache-with-next-js-and-apollo

Transcript

WEBVTT

1
00:00:00.620 --> 00:00:02.630
Fran Agulto: One and we're live.

2
00:00:03.220 --> 00:00:26.110
Jeff Everhart: What's up? Welcome to the headless Wp. Podcast. I am joined today by Jason, Ball, and my co-host Fran Igalto uh. So Jason Ball is a principal software engineer, Wp. Engine, and he should be a man that really needs no introduction. Um, But he leads the open source efforts around the Wp. Graphql project,

3
00:00:26.120 --> 00:00:34.280
Jeff Everhart: and Jason's been a huge advocate for headless Wordpress. Really, since I first heard about this term back in two thousand and sixteen, and i'm sure he was

4
00:00:34.290 --> 00:00:53.039
Jeff Everhart: banging on the drums even earlier than that. And so the benefits of his work can be felt by pretty much everybody in the ecosystem um, and he's here today to talk about several features that he's been working on for Wp. Graphql that should help developers, build faster and more reliable sites. So, Jason Fran, What is happening?

5
00:00:53.820 --> 00:01:12.259
Fran Agulto: What else? What? I'm. I'm. I'm always stoked as usual, but this is super super stoked because for our listeners out there. Uh, J Jason. Jason is one of my not only my favorite developers, but he's one of my favorite people,

6
00:01:12.270 --> 00:01:16.050
Fran Agulto: and I just wanted to share a funny um kinda

7
00:01:16.210 --> 00:01:20.270
Fran Agulto: uh story that I I just knew I was like Man

8
00:01:20.330 --> 00:01:33.279
Fran Agulto: Jason Balls badass. So the first um week he worked at Wp. Engine. He knew. I followed him on Twitter already because of Wp. Graphql and our love for the for the that awesome plugin. But

9
00:01:33.360 --> 00:01:35.470
Fran Agulto: he sends me this link

10
00:01:35.870 --> 00:01:53.129
Fran Agulto: to his um impersonation of Chris Farley in high school, and i'm like, Oh, yeah, this guy was it Matt Foley? A great sense of Yeah. Oh, nice, hilarious! And now everybody wants to live in a van down by the rail by the river.

11
00:01:53.140 --> 00:02:11.290
Jason Bahl: I I got a couple on. There's having that live sketches from when I was a senior in high school, we uh did the Matt fully one. I did the the welfare all cheerleading at the chess tournament, and uh and then uh, we'll ferilize Robert Duvet singing, you know, like uh,

12
00:02:11.300 --> 00:02:15.570
Jason Bahl: whatever notorious. B Ig: it songs and what Not So

13
00:02:15.620 --> 00:02:40.620
Jeff Everhart: yeah, Well, and I guess I got a Jason ball story, too. Jason's actually the reason that I work here at all. So and he probably doesn't even know it. So I was just I I started following Jason. I guess you know, like back in the i'll say the early days of headless like, you know, right after the rest Api got merged into core, and when it sort of became, I want to say, like a fad for a second, but it, you know it became well known that this was a thing to do.

14
00:02:40.630 --> 00:02:41.830
Jeff Everhart: Um!

15
00:02:41.840 --> 00:03:11.819
Jeff Everhart: And i'd sort of been doing headless development since that point, and just really struggling with all the sort of pain points, and I was like. But there's something here like this is useful. Um! And I think it was around the time that, like Faust launched the first version of Faust, and, like Atlas sort of came onto the scene, and Jason tweeted out like, Hey, we're hiring this dev advocate position. People should come apply, and I was like, you know, what. Maybe i'm cool enough to work with Jason Ball. And so, lo and behold, here I am. So thank you, sir, for putting that

16
00:03:11.830 --> 00:03:20.109
Jeff Everhart: on the tw the Twitter verse, because I might not be here. If not so. Yeah, I didn't. I didn't know my tweet started, though that's cool, man,

17
00:03:20.340 --> 00:03:21.640
Jeff Everhart: for sure.

18
00:03:22.060 --> 00:03:27.079
Fran Agulto: So i'm going to kick it off with the first question. Um, because I think

19
00:03:27.340 --> 00:03:39.669
Fran Agulto: Jason's been on the podcast before, but we have, like a whole new listener. Um set an audience here, Jay. So just to before we dive into the nitty gritty of what our topic is today.

20
00:03:39.790 --> 00:03:53.950
Fran Agulto: Wp: Graphql: Smart cash y'all download it. Um for our new listeners. Can you give us a quick background on what you did before? Wp: Graph, Ql. And tech as a whole.

21
00:03:54.560 --> 00:04:00.040
Jason Bahl: All right. So before tech, I did a lot of stuff uh

22
00:04:00.050 --> 00:04:14.870
Jason Bahl: or my first. My first job was refereing soccer, as you know, fourteen year old, referenced Soccer. So I got that in the bag, and then the first, like i'd say real job. I worked at at Kfc. Taco. Well, so doing the fast food thing,

23
00:04:15.040 --> 00:04:32.289
Jason Bahl: and the work delivered pizza for a little bit, worked at a hotel front desk for a little bit uh. And then in college I went to college, actually studied photojournalism in college, uh taught myself how to build websites, so that I could show my photography portfolio.

24
00:04:32.330 --> 00:04:33.550
Jason Bahl: Um!

25
00:04:33.810 --> 00:04:44.679
Jason Bahl: And then uh, I was working at it. I worked at a bank while I was in college, and uh and uh had a coworker at the bank, and I was seriously considering changing my

26
00:04:44.690 --> 00:04:55.879
Jason Bahl: major in college from photo journalism to like finance or something, and like pursue banking um and uh, but a coworker. I was working at the banquet. He's like

27
00:04:55.890 --> 00:05:15.149
Jason Bahl: you realize not everybody can build websites like you do like you should pursue that. So he he encouraged me to check that out. So I found a I found a job, but as a web master back then. Um, I mean, just like basically basically entering content into a Cms.

28
00:05:15.160 --> 00:05:18.080
Jason Bahl: Uh. So the job posting uh,

29
00:05:18.090 --> 00:05:41.520
Jason Bahl: we yeah was for wordpress. I I experienced wordpress just on one project at a cousin who wanted to website and was like, Hey, I I built flash my flash, my photography portfolio was on flash back in the day, so like I learned flash and action script, and uh, and my cousin was like, Oh, you build websites. What can you build me? A flash website where I can enter the contact,

30
00:05:41.540 --> 00:06:00.759
Jason Bahl: and that's when I discovered wordpress, because I was like oh, like flashes, all the kind of like. At least my experience was like very hard coded type of stuff. But you could. You could feed Xml into flash sites. And so I did some research, and I was like, Oh, there's this Cms called wordpress. I didn't even know what the term Cms was at the time,

31
00:06:00.770 --> 00:06:12.109
Jason Bahl: and but it had what it's called next to all our Pc. Api. So I I built something just to show my cousin like. Yes, possible. You could use this system to enter content, and I can have it show up on this other thing,

32
00:06:12.120 --> 00:06:24.880
Jason Bahl: which was a flash front in at the time, so I didn't even know I was getting into headless workpress. I don't think so. Wait a minute how this wordpress was a thing, but that that is absolutely why

33
00:06:25.020 --> 00:06:48.529
Jason Bahl: I found I found wordpress through the Xml. Rpc. Api. I didn't end up actually building anything like really other than an experiment with with the Xml Rpc. Api and Flash. But I found wordpress, and I was like holy smokes. This is like the future of the web. I'm like I was telling my wife I was like there. I'm still working at the bank at this time, and then i'd start building a side if I

34
00:06:48.540 --> 00:07:17.729
Jason Bahl: asked my church if they wanted me to rebuild their website, which was really old at the time, so that they like. Sure. So I built them the site. Then my co-work at the bank was like, Hey, you should pursue this as career kind of job as webmaster. They use the wordpress. I didn't know how to write a Php. At the time I was just editing content. But then, uh, I I found the need to make my job easier. I was like doing a lot of repetitive tasks, and I was like that. It'd be cool if I could just click one button and have this thing happen

35
00:07:17.740 --> 00:07:37.270
Jason Bahl: Seller and Php. And learned how to build wordpress plugins. And then um! From there I joined up with two guys. I grew up with, and we started an agency for a little bit. We we're building this back when, like Mobile was first taken off. Uh, so we had a one side was designed, We they custom Qr. Codes,

36
00:07:37.280 --> 00:07:50.739
Jason Bahl: and then I built like a bunch of mobile landing pages for folks to like, you know. We had, like Disney, and talk about what we print like Qr. Codes of billboards or whatever. And as you driving by, scan it and take it to some landing page. So

37
00:07:50.790 --> 00:07:53.889
Jason Bahl: we're doing a lot of mobile stuff, and then uh,

38
00:07:54.260 --> 00:08:00.279
Jason Bahl: we had, like twelve twelve employees at one point. But then we weren't, making that much money. So

39
00:08:00.440 --> 00:08:10.650
Jason Bahl: when my wife and I were praying with kid, I I was like I need a real job, so I've found some agencies for a little bit. Just normal. Wordpress sites for a while,

40
00:08:10.660 --> 00:08:24.219
Jason Bahl: ended up in a newspaper. We did did a lot of Content Syndication. That's where Wp Graphical was born. We're moving data around the web and the rest. Api was causing us more problems, and it was helping us with, so

41
00:08:24.750 --> 00:08:28.110
Jason Bahl: that though we figured out how to solve some

42
00:08:28.170 --> 00:08:40.099
Jason Bahl: problems at the newspaper I worked at, and then I pursued it as a community project. And here we are

43
00:08:40.299 --> 00:08:50.300
Jeff Everhart: through the Xml. Rpc. Api. Like That's It's full circle started decoupled.

44
00:08:50.370 --> 00:09:09.830
Jason Bahl: Yeah, it's always been my mind like man like I don't know we're wordpress to manage content. And whatever you want to display it like as soon as I, you know, like, heard about react native I was like, oh, cool. I want I built a native app but native. Ios app with wordpress content, like whatever it is, I've always wanted like

45
00:09:09.850 --> 00:09:11.530
Jason Bahl: wordpress to

46
00:09:12.140 --> 00:09:26.109
Jeff Everhart: be the Cms. But whatever I want it to, yeah, it's and it's a flexible pattern. I think that's why so many people are drawn to it like, and certainly why I was because I was exactly the same thing. I was like. Look, I don't wanna

47
00:09:26.140 --> 00:09:40.550
Jeff Everhart: learn another Cms. And, like frankly, all the other ones are expensive, like five hundred dollars a month or something, and like that wasn't good. That's a lot. I mean some of them. Yeah, like I I was just reading something that, like web flow

48
00:09:40.560 --> 00:09:54.810
Jeff Everhart: cost sixty-five thousand dollars after ten thousand content pieces on Twitter. And so, if people from Web fellow are listening, and that's wrong like gently correct me. But according to the Twitter verse. That's how much it costs like that's insane.

49
00:09:54.930 --> 00:10:04.639
Jeff Everhart: And I worked in higher ed like that was never getting approved, and we already had wordpress. So it was like I could make whatever I wanted on the front end and just power with wordpress.

50
00:10:05.450 --> 00:10:14.170
Jason Bahl: I did just remember my actual first project, my first headless project again. I don't think it was coin headlist,

51
00:10:14.180 --> 00:10:37.560
Jason Bahl: so I showed my cousin the thing in flash. But then the first job I had where I was working a nonprofit. There's a Jewish community center in Denver, and they hosted like what's called them a copy game, just like the kind of youth you know, so like hundreds of athletes from around the country. Come, and we had events all around Denver. Um, And so I built the I. There was a uh the plugin a wordpress plugin

52
00:10:37.570 --> 00:10:56.529
Jason Bahl: that predated the what became the official rest. Api. There was a is from the team that I think, worked on that when it was still the museum of modern Art. I think it was the museum of Modern Art developers that created it, and it was before that plugin the one that Ryan the queue created. There was a one before that. It was just called like

53
00:10:56.540 --> 00:11:26.530
Jason Bahl: Wpgs on, or something I can't remember, but it was before the one that became official. And so I use that plugin to expose data. And I built the flash front end, and we had Tvs and all the events that had the flash site loaded and it just rotated through scores so like folks would phone in. I was sitting at a desk and they would phone in scores I would enter the scores. And this flash it was like this animated flash thing that showed scores, and then it would rotate through all the events so parents could see the scores of the different.

54
00:11:26.540 --> 00:11:46.300
Jason Bahl: That's cool. That's wild like a ticker tape. Yeah, kind of yeah, it's like this. I I bought a flash template from active den, which is like the same which is now, or it was flashed in at the time. I think you know it's active that i'm part of theme, forest and and votto, or whatever. And I use that template to feed data from the

55
00:11:46.590 --> 00:11:51.430
Jason Bahl: it was Jason plugin at the time from wordpress. And I would just enter data in the Cms. And

56
00:11:51.440 --> 00:12:18.210
Jeff Everhart: it would just rotate through fetch new data and put it into the So yeah, we had Tvs at all these events it was pretty good. Yeah, that is wild. And I can still remember how excited I was when I found that first, like the first semi official rest api plugin, because I think at that point in my period kind of like put wordpress to the side a little bit. I was like doing more node and express, and I was working for a dev shop that where we there was like Microsoft we're using C sharp and dot net and stuff like that, and I hated that

57
00:12:18.220 --> 00:12:25.250
Jeff Everhart: um. But I remember somewhat upon that. I was like, Oh, wow! This all of a sudden just made this relevant for me again, and it was it was so cool.

58
00:12:25.260 --> 00:12:44.799
Jeff Everhart: Um. So yeah, let's Let's dig into um smart cache a little bit, so that that's definitely why we're here to talk about uh the work you've been doing on this smart cache plugin. So you think you could give us kind of a high level overview of what that plugin does and what optimizes before we dig into like the technical details about it.

59
00:12:44.950 --> 00:12:58.910
Jason Bahl: Yeah, for sure. So uh, Yeah, the idea with the plugin is so with well, with when you're using graphql like one of the drawing features of graph kills that it gives the client or the consumer a lot of control, and what they ask for

60
00:12:58.920 --> 00:13:14.089
Jason Bahl: so you can. You can design your queries kind of. However you want. You can ask for posts or users or pages, or a mix of you know the things um super flexible. You get typed responses back so really cool. Um,

61
00:13:14.190 --> 00:13:25.220
Jason Bahl: right now it. Most folks are doing post requests to wordpress server, and that means every time a request is made it has to go all the way to wordpress, execute

62
00:13:25.230 --> 00:13:47.539
Jason Bahl: all the functions that are required to resolve their request, and then you get a response. And so you have to wait for wordpress to load. You have to wait for plugins load. You have to wait for everything to happen before you get a response. Um! So that deal with smart cache we have. Uh, we have a couple of layers, but the idea is that we prevent most of that execution from happening and get you a response faster. Um:

63
00:13:47.550 --> 00:13:48.630
Jason Bahl: So the

64
00:13:48.790 --> 00:13:56.470
Jason Bahl: yeah, that that I mean, that's that's the gist of it is like making Wp: graphical faster is like the short of it,

65
00:13:56.780 --> 00:14:11.120
Jason Bahl: but it's also a balance of speed and accuracy. Right like you don't just want fast data you want to make sure the data that you're asking for is also up to date. So we're solving both of those problems. How can you have your data fast, but also accurate.

66
00:14:11.170 --> 00:14:23.119
Fran Agulto: Okay, that's all. Yeah, And that's I think, from an overview level. That's a perfect way to summarize that. Now let's dive into like the nitty gritty stuff Jason, like. So

67
00:14:23.820 --> 00:14:46.289
Fran Agulto: my blog post just came out and thanks for helping me. Um! Write that without, you know, I would have been because there's a lot of layers to this thing right, especially when you're reading the read me on your github for for the repo for smart cache. But let's start and start with how the read easily out. Let's start with the network network cache as far as from the feature and functionality. Can you explain to us how that works?

68
00:14:46.410 --> 00:14:49.229
Jason Bahl: Yeah. So so now we're cached like it.

69
00:14:49.370 --> 00:15:17.389
Jason Bahl: The basically any managed wordpress, host, or even self host and work for such these days. Um put someone sort of network cache in front of their wordpress instance uh common one is varnish, but it could be something else like fastly is a, you know, service for this type of thing. Now. Uh, it could be whatever whatever you want. Um. But barnish is popular one basically the way that works. And and if you go visit any pretty much, any wordpress site, just normal, non headless wordpress site

70
00:15:17.480 --> 00:15:18.630
Jason Bahl: Uh:

71
00:15:18.720 --> 00:15:36.600
Jason Bahl: first time a user hits the page, it will actually produce the paging wordpress. It'll go to the dateways and create all the data and return a template, and that that page is going to be cached in varnish or something else at the network level. So your you know your

72
00:15:37.320 --> 00:15:57.299
Jason Bahl: the hosts network cache layer, um, and then all future users that are visiting that same page are actually loading wordpress. They're just giving a cache response. Um, So you know, one user has to pay the price of building the page, and then everybody else is just getting a really fast response. So

73
00:15:57.310 --> 00:16:21.039
Jason Bahl: with W. For Graphql. We're doing the same thing. Um, and that's like. If you go in your browser, it's called a get request right an http get request. Um! We're like submitting forms, as usually what's called a post request, and that's more dynamic, and most hosts are not going to cache post requests, because you're doing dynamic stuff. Um. So a lot of folks using graphical today are doing post requests, and so it's bypassing network caches.

74
00:16:21.070 --> 00:16:32.430
Jason Bahl: Um Wp Graphql supports get requests, and it has for actually, for a long time, probably four plus years, or something like It's been quite a while that it's supported. Get request.

75
00:16:32.440 --> 00:16:44.340
Jason Bahl: Um! The problem, though, is that a lot of a lot of network or a lot of hosts will cache get requests for just an arbitrary amount of time, like W. Penguin by default.

76
00:16:44.350 --> 00:17:11.879
Jason Bahl: We'll cache a get request, I think, for ten minutes. I think a lot of like I think wordpress vip does the same. It's like ten minutes. So if you don't get request, okay uh your date is going to be cache for ten minutes. That's just kind of, and that would apply to like rest. Api requests as well, right for good or bad, whether you want to cache or not. Okay, yeah. So so that that kind of already worked like you could have if you wanted to. You could switch your graph, kill consumer from post to get request,

77
00:17:11.890 --> 00:17:28.669
Jason Bahl: and you would benefit from network cache already on a lot of hosts. Some hosts might not support it, but many host will. The problem, though, is that yeah like that, You're It's gonna. You're just gonna have to wait for X amount of time until you get fresh data. And so um.

78
00:17:28.680 --> 00:17:46.980
Jason Bahl: So Wp: Graphical. Smart cache adds an invalidation layer that tracks events and wordpress, so does two parts. Um Wp: graph Ql: core uh analyzes queries that that are excluded, and it returns a list of headers uh

79
00:17:46.990 --> 00:17:51.199
Jason Bahl: about the request. So if you query a list of posts, it will return

80
00:17:51.210 --> 00:18:09.529
Jason Bahl: uh a header that says that you queried for list of posts, and then it will also return each post Id that was fetched the like universal graph. Ql node Id um. So it it will return this metadata, and then, and this is where, like manage wordpress host, come in

81
00:18:09.540 --> 00:18:23.669
Jason Bahl: um like for W. Peng and our varnish layer reads those keys. It caches the graphql request, but it tags the cache with those keys. So if I if I query for list of posts,

82
00:18:23.680 --> 00:18:34.790
Jason Bahl: it's going to tag it, tag my cache response that I query for list of post, and I was going to tag it with each node Id that was returned, and then wp graphical smart cache

83
00:18:34.950 --> 00:18:53.989
Jason Bahl: tracks, events like editing posts or publishing posts or deleting posts, or you know, all sorts of nuanced events like. Uh, if you, if you have a user in your system that has never written a blog post, and they publish their first post. That's an event that would transition the user from

84
00:18:54.000 --> 00:18:59.589
Jason Bahl: being a private entity to a public entity, because users are private and wordpress by default,

85
00:18:59.640 --> 00:19:14.859
Jason Bahl: but published users published. Authors are public in wordpress, so like there's a lot of nuanced events that we figure out, kill smart cash tracks, those events in regards to what's public and private, and then it will uh send out a purge event

86
00:19:15.270 --> 00:19:34.589
Jason Bahl: that will purge any caches that are tagged with like node ids, or list of posts, for example. So if you publish a post, it sent out the perjudent to purge any caches that had a list of posts in it. If you edit a post, it sends out a purge event to purge any caches with that particular post, Id

87
00:19:34.600 --> 00:19:52.139
Jason Bahl: um. So now it's a balance of yeah. Users can create their queries, and if they do a get request, it'll hit the it'll hit the network cache. If it's not cached yet, it will go to wordpress, fulfill the request, cache it at the network level, and then future users.

88
00:19:52.150 --> 00:20:00.490
Jason Bahl: We'll just hit the varnish cache, so you'll get a cash response immediately. Your wordpress server isn't loading every time to get the data. But

89
00:20:00.540 --> 00:20:16.260
Jason Bahl: when you do something like publish posts uh it'll vict only the relevant hash queries that that it needs to. So it's a balance of, you know, fast response Times alleviating your wordpress, server load, but also getting accurate data.

90
00:20:17.250 --> 00:20:18.760
Jeff Everhart: Okay. So

91
00:20:18.930 --> 00:20:22.719
Jeff Everhart: yeah, let's take a look at. Can we? Let's take into two things there, so like,

92
00:20:22.790 --> 00:20:50.179
Jason Bahl: let's back up one step and maybe like, what What do you think like? The need for this plugin is, you know, like we mentioned like having the trade off between speed and accuracy, but also just like you know. What are people running into? That maybe led you to to develop this thing in the first place? Sure. So yeah, I mean, there's a common trend, I guess, in. Have this wordpress right now with between, like Gatsby and next uh, especially

93
00:20:50.190 --> 00:21:03.039
Jason Bahl: where these uh these headless clients are like trying to fetch a lot of content from wordpress. G me especially. And next, it kind of just depends on how you're building your next site.

94
00:21:03.060 --> 00:21:16.579
Jason Bahl: But there's a pattern where, like next, has a for stack generation, they have get static paths. Function where where you tell your next site, which paths to pre build. Basically

95
00:21:16.590 --> 00:21:28.450
Jason Bahl: And there's a common pattern where folks are fetching basically their entire database and building a list of paths and then statically generating every single possible page they can.

96
00:21:28.460 --> 00:21:57.640
Jason Bahl: And so with that uh, next, it does that initial query to get all the things, and Gatsby does the same thing it fetch is basically your entire database. Oh, wow! Of of public. And and it does that all inside this you're seeing people do that all inside this get static path. So instead of just getting the the Uris, or whatever they're getting everything all or more well, so you'll get the Uris usually. But what happens, though. So you get static pass. It gets a list of paths, and then the next use that list to actually build every page,

97
00:21:57.650 --> 00:22:25.259
Jason Bahl: and usually every page has another query to get the information for that specific page. So let's say you had a thousand uh paths for next to build It can do the one query to get a list of a thousand paths. But then it's gonna do a thousand more queries against your wordpress server to build all thousand pages. So it's It's almost like a Ddos attack on your wordpress server, and and so with that, if it's a post request every time you run that

98
00:22:25.270 --> 00:22:44.460
Jason Bahl: it's gonna make it all the way to the wordpress server and overwhelm your server with caching. The first time you run it's still gonna hit your server. Well cash in place. You could keep rebuilding and rebuilding and rebuilding, and most of the time it's gonna be a cash response. So um! So you benefit from that

99
00:22:44.470 --> 00:23:01.449
Jason Bahl: I would recommend. If you're using next, that you don't build your entire site, build some critical pages with good static pads, and then use incremental static regeneration. That's a whole, Not a topic we could get into some of the yeah and and Fran did a really good write up of that, too, that we'll post with this. Um:

100
00:23:01.460 --> 00:23:13.640
Jason Bahl: Yeah, there's some ideas in there. Yeah. So for that use case it uh it, it allows you to build your headless front end with graphql queries. Um! And then you can use like a

101
00:23:13.650 --> 00:23:25.309
Jason Bahl: I had incremental static validation. You can say a low timestamp, and so next can try and revalidate your page with a get request, and most of the time it's going to get a cash response from varnish.

102
00:23:25.320 --> 00:23:47.680
Jason Bahl: But if somebody edited the page, or, you know, published some new content, or whatever it might be. Cache, miss, and then next will regenerate the page. So you you can get the same editor experience. You get in like normal wordpress where your content is, live within a few seconds. You can do that with headless wordpress and without overwhelming your server right? So. Um

103
00:23:47.720 --> 00:23:57.719
Jason Bahl: and the the network cache. I will call this out. The network cache stuff does have some opinionated implementation details that the host will have to implement. So we have a

104
00:23:57.730 --> 00:24:20.040
Jason Bahl: the Wp. Graph Kill smart Cache, the Github Repo. We have, like a hosting guide in our docs for host that are interested in supporting it. Um Wp engine is the first one to Obviously I like it unemployed here, so I hope to work on it. It's It's nothing exclusive that other hosts can't support. We're just the we're the first ones that put in. Put an effort in time to to get it to work.

105
00:24:20.050 --> 00:24:24.810
Jeff Everhart: Yeah. So if you're listening, other hosts hit hit us up.

106
00:24:25.150 --> 00:24:43.049
Fran Agulto: Get it, get it work and get it working. Um! There was a tweet by someone from Go, Daddy, I think with she. Is it code, Daddy Jason, that they were asking about? Um. I can't remember. But anyway, yeah, I demo Scott Binger. I go down. That's right. Yeah, I demo it for him. Yeah,

107
00:24:44.050 --> 00:24:59.400
Jeff Everhart: cool, cool. So let me let me have my second follow up there. So we I. It must have been a couple of months ago. Now we had on the folks from graph Cdn. Right, who are, I guess, doing something kind of similar to what it sounds like. Graphql Smart cache does

108
00:24:59.410 --> 00:25:18.929
Jason Bahl: so like. What do you see? The differences between those two two approaches being that's a good question. Yeah, So there they are, pretty similar. Um. One is that as they've changed in customer or whoever whatever host ends up supporting it for now Wp: engine, you get it for free, you don't have to sign up for another service.

109
00:25:18.940 --> 00:25:20.819
Jason Bahl: Um, so it just

110
00:25:20.980 --> 00:25:27.000
Jason Bahl: you get this benefit as an user um as so that. That's one thing. Um,

111
00:25:27.010 --> 00:25:48.550
Jason Bahl: the other thing, the way don't you graph feel smart cache tracks events is a lot more nuanced. Um. So right now there's a lot of the like Stella or Graph, Cpn or whatever. Yeah, Sorry, Stella, I forgot. They renamed. They're they're plug in at the moment. Track stuff a lot more loosely. So it's going to lead to

112
00:25:48.560 --> 00:26:05.909
Jason Bahl: uh purging more often than it probably should. So you're gonna have a lot more cache, misses. Not that big with you like we actually we actually built the smart cache plugin to work Our I. Our goal is to have it work with like any caching clients, so they should actually be able to

113
00:26:05.920 --> 00:26:14.460
Jason Bahl: use the smart cache plugin to evict their caches to, maybe with some tweaking. We, you know

114
00:26:14.670 --> 00:26:20.299
Jason Bahl: the but the idea would be like, i'll. Ultimately my goal is to ultimately get enough

115
00:26:20.360 --> 00:26:28.520
Jason Bahl: feedback and fines the stuff that we can move. Actually a lot of the feature seven to Wp. Graphql core, for now, like it's

116
00:26:28.810 --> 00:26:39.639
Jason Bahl: easier to iterate in a separate plugin and get feedback and make breaking changes to the functionality versus doing it in a core plug, and it has a lot more users.

117
00:26:39.680 --> 00:26:54.880
Jason Bahl: Um, so it's a it's technically a base plug in right. Now it's stable. I'm: using it in production. We have production users using it, but we might make breaking changes to like function names or function signatures, or you know, we might move stuff around, so

118
00:26:54.890 --> 00:27:05.989
Jason Bahl: the functionality should largely be the same, even if we break stuff under the hood. Um, but we're we're still iterating on it as we get feedback from users so,

119
00:27:06.080 --> 00:27:28.720
Jeff Everhart: and it it seems to me like one of the key benefits of your approach. Is it really just like optimizes the issue in place like right. We don't have to have this separate service. We don't have to change any endpoints on the front end, and it just like you you installed. Wp: Graph you all smart cash and boom. Yeah. What you had is now fast and doing pretty much. You know what what that other service does

120
00:27:28.730 --> 00:27:32.050
Jeff Everhart: um, cause you, Jeff, The thing is that's the exact

121
00:27:32.080 --> 00:27:59.639
Fran Agulto: um stoke that Rob from Deserto had with the plugin, because he was only on Wp. He's like fr we just plug this thing in. I've been working with Jason, and it works like too, damn well. But anyway, but that's what i'm saying. Yeah. So he was stoked about that the plugin man. Yeah, yeah, for sure. And for those of you who are looking yet for a really good use case of how this plugin sort of shines, and what sort of magic it can work. Listen to

122
00:27:59.650 --> 00:28:15.419
Jeff Everhart: our previous episode with uh Rob from desertos, where they talk about supporting a sixty million monthly page view site with this wordpress. And you know Wp: Graphql: Smart cash. So yeah, super cool.

123
00:28:16.760 --> 00:28:25.629
Jeff Everhart: Yeah. Cool. So let's let's see. Let's let's dig one layer feature deeper into kind of the functionality here. So we talk about kind of like the network. Cache

124
00:28:25.640 --> 00:28:37.969
Jeff Everhart: at like the varnish layer. Um. But so let's say that a host doesn't have that enabled. Are there still benefits that uh a user can get via like the object cache.

125
00:28:38.090 --> 00:28:48.190
Jason Bahl: Yeah. So there's a couple of situations like, if if yeah for the one you said, If the host doesn't support like a network cache layer for it.

126
00:28:48.200 --> 00:29:01.549
Jason Bahl: Um, or if your client application for some reason, if you're not able to change it from post to get requests like, maybe maybe you deployed a native, Ios app, and you can't just like

127
00:29:01.560 --> 00:29:18.459
Jason Bahl: go change it right like users that have a downloaded Have it downloaded right so like it's gonna continue making post requests um until they Oh, wow! That that that's a whole. About how difficult I would be like to do that in product. How would you? Even

128
00:29:18.470 --> 00:29:40.119
Jason Bahl: I don't. I don't want to think about that right now, but it's like That's a crazy use. Yeah, you have to wait for folks to like, re download the or update it, or whatever. So in that case you can like. If so, let's say that's the case. You have a client, that, or maybe it's like some organization reason like, sorry, we can't do this like we have to do post request. Okay, Cool whatever.

129
00:29:40.130 --> 00:29:56.569
Jason Bahl: If you have to do post requests or your wordpress house doesn't support network, cache layer. Um. You can still do post requests, and W for your ftl smart cache. It adds a settings page under like graphql settings. There's already settings there, but adds a new tab called cache tab

130
00:29:56.580 --> 00:30:14.389
Jason Bahl: uh, and so you can go to that tab. You can enable object cache, and what that does, it does the it does the same thing that is happening at the network cache layer, but it does that. The wordpress object cache layer. So again, this will maybe be dependent on your wordpress host. Most wordpress host that I know of

131
00:30:14.400 --> 00:30:26.560
Jason Bahl: have some sort of persistent object cache layer on the wordpress side, so that what that means is your request gets past any network cache layer like a varnish. It makes it to wordpress, but

132
00:30:27.130 --> 00:30:37.539
Jason Bahl: there's a catch layer there uh it could be Memcache, or it could be Redis, or it could be something else, something similar to one of those technologies where it'll check. Oh, do I already have

133
00:30:37.550 --> 00:30:54.570
Jason Bahl: results for this thing you're asking for? And if so, I can return it before I have to execute a bunch of functions to get it. So the uh Wp. Graph Bill Smart cache, has the object cache um layer, so that if your request makes it all the way to wordpress. We'll check at that level.

134
00:30:54.580 --> 00:31:04.010
Jason Bahl: Is there cash response already there? Um! It does still require wordpress to load, so it's not going to be as fast as the network caching.

135
00:31:04.020 --> 00:31:25.040
Jason Bahl: But I was seeing I was helping a user just a couple of days ago. Get on it, and and they were seeing, like seven hundred most second responses, and then get reduced to like one hundred and fifty, two hundred milliseconds, you know. So quite a quite a bit faster. So it and it's It's gonna depend on your queries, and whatever um where like that tipping point is of like,

136
00:31:25.050 --> 00:31:43.460
Jason Bahl: you know, I if possible. I'm gonna always gonna recommend the network cache. It's gonna save your wordpress server from a lot of execution. Um. So if you if you can't do it, use the network cache. If you can't, the object caching should still help the invalidation. Logic is all the same,

137
00:31:43.490 --> 00:32:03.070
Jason Bahl: so your network cache should be getting evicted the same as your object, Cache. So if you're publishing posts, they both should be getting purged. You should have correct data the same way in both. Um, you do just have to pay the price of wordpress, still loading to be able to generate the response from the object cache.

138
00:32:03.080 --> 00:32:03.950
Jason Bahl: So

139
00:32:03.960 --> 00:32:23.770
Jeff Everhart: okay, okay, And you said that would work with with post requests out of the box right so so you could just turn this on click a button and boom! You've got some acceleration out of the box Exactly. It should work it should. It should work with probably most existing applications out there today. Just enable it

140
00:32:23.930 --> 00:32:36.430
Jason Bahl: give the test uh it should start working. Um! There's possibly some Gotcha there like depending on your in-memory cache solution or like your like Redis or Memcache, or whatever depending on how it's configured

141
00:32:36.440 --> 00:32:46.069
Jason Bahl: stuff can like start falling out of the cache like if it gets over populated. You could have like mystery Cache misses that you weren't like expecting, maybe like

142
00:32:46.080 --> 00:33:00.680
Jason Bahl: maybe content didn't change. But you just got a cache, miss. It could be potentially due to like cash over population like keep keep the most recent five megabytes of cash data and whatever else just falls off. Okay,

143
00:33:00.690 --> 00:33:09.010
Jason Bahl: Okay. And that should still, yeah, And that happens already in the normal wordpress environment. Sorry.

144
00:33:09.300 --> 00:33:15.680
Fran Agulto: I wonder how often like from a used case perspective, since you all been utilizing wordpress longer than I have?

145
00:33:16.060 --> 00:33:19.049
Fran Agulto: Is Is there more often than not

146
00:33:19.210 --> 00:33:23.030
Fran Agulto: developers and websites that have

147
00:33:23.310 --> 00:33:25.360
Fran Agulto: a kind of

148
00:33:25.690 --> 00:33:32.180
Fran Agulto: rule within their organizations. Oh, we cannot use. Get request. We must use post.

149
00:33:32.530 --> 00:33:46.659
Fran Agulto: You know what i'm saying, Okay, I doubt it. It's it should leave that organization like I I just I'm: Yeah, i'm kind of curious. If there's like a um, a hard core use case that

150
00:33:46.670 --> 00:33:58.340
Jeff Everhart: you've ever you all ever came across. We're like all right. It's like thing. I think Jason's example of the Ios app was a good one, because once you have a bunch of decoupled clients, and

151
00:33:59.060 --> 00:34:18.190
Jeff Everhart: you know, like ideally, you'd want them all to communicate in the same way, and supporting both may be difficult, and like clearly, if you've got like an app out there that somebody has to take an action to change or on the web. It's like you just refresh the page. And all of a sudden you're getting the latest and greatest

152
00:34:18.199 --> 00:34:47.590
Jason Bahl: um. So yeah, I think it would depend on like how you're actually delivering whatever app. It is. Okay. But now I've never encountered anybody being like you have to be hard. Core. Yeah, it's like, get or post, or something like that. Yeah, it's probably not like a company policy or anything, but it could be due to technical, other technical limitations, like, if you. Let's say you have this app that's up and running. But you don't have good test coverage right, switching everything from post to get this like Oh, shoot. I just changed everything in the app.

153
00:34:47.600 --> 00:34:53.209
Jason Bahl: What if one of those get requests so that that brings me to the next point? I guess right.

154
00:34:53.219 --> 00:35:21.750
Jason Bahl: Get requests. Do have query string limitations, right? So uh, I want to see that gnarly query. They're big. They're big, but like Rfq queries, as you probably know, can get big, too, especially if you're doing stuff like advanced custom fields, flux fields, for example. Yeah, like you treat, you treat ac up like a page builder, and like each Flex Field group, is a graphql type.

155
00:35:22.290 --> 00:35:49.849
Jason Bahl: So you have like these list of types, and they, you know I've seen some where there's like hundreds of of acf field groups, right? So like I've seen queries do get pretty long. Um, so there is query string limitations. So if you were to. If let's say you have some of these big queries. Uh, if you switch everything from post to get, you might, you might run into an issue where some of your queries fail, because the query string is too long to send over, get request,

156
00:35:49.860 --> 00:36:00.229
Jason Bahl: so so that that that does bring us to the next point, though we have a solution for that which uh, persisted Queries. Um. So

157
00:36:00.240 --> 00:36:10.850
Jason Bahl: that's Wp. F. Kel smart catch has a has a feature called, persisted queries. Um! This This was, to my knowledge it was kind of popularized by Apollo. The

158
00:36:10.860 --> 00:36:33.549
Jason Bahl: uh Apollo is a company in the Graphql space that has, like a server components for building graphql servers in Node and javascript, and then it also has, like client tools to consume graphql api's and foul our our framework that we're working on it that we P. Engine uses Apollo the new version of fast that we just launched. What like last week, or whatever um

159
00:36:33.560 --> 00:36:41.179
Jason Bahl: it's using Apollo. But, yes, they They popularize this idea of persistent queries, and what that means is uh

160
00:36:41.190 --> 00:37:11.179
Jason Bahl: the the server can store a copy of a query document. So the the big query string, instead of sending it every time you can store it on the server once, and then it. It'll have an Id to reference it, and then you can do a get request With that Id and the server will look up the document, execute it for you, and return the response. So we have. We have that feature set. Um you you can enable There's like a ui the Ui is.

161
00:37:11.190 --> 00:37:12.269
It is very

162
00:37:12.380 --> 00:37:31.000
Jason Bahl: up in the air right now, like. So if you do use this feature, just expect changes to the Ui's over time, like Don't. Don't go all in on it like it's some finished product. But um, if you do use it, you uh you can enable it from the Graphql settings pages a a check box to show the Ui, and so

163
00:37:31.010 --> 00:37:40.820
Jason Bahl: graphical document, post, type and wordpress where you can put graphql documents. You could put your queries. It will generate an Id for you, and then you could do a get request

164
00:37:40.830 --> 00:38:00.500
Jason Bahl: at your Graphql endpoint, instead of doing like, when you do a normal get request for query. You do like, you know, Slash Graphql question, mark query equals, and then your query string, If you have an Id for a query document, you do you know, slash, graph, Ql. Question mark query, Id equals

165
00:38:00.510 --> 00:38:07.569
Jason Bahl: you. Pass the Id Then, when the request makes it to the server, it looks up. The document executes the document. Um.

166
00:38:07.580 --> 00:38:25.749
Jason Bahl: It works with variables, too. So you can have a yeah. You can define a graphical query that that needs variables, you know, like the Uri or an Id, or whatever it might be. Um, so you can have your document persisted on the server. Use the Id pass variables as well,

167
00:38:25.760 --> 00:38:31.120
Jason Bahl: and it'll execute so that that gets sort of the query string length limitations.

168
00:38:31.190 --> 00:38:37.259
Jason Bahl: Um! And that feature. Speaking of Apollo, they also on the on the client side. They have uh

169
00:38:37.530 --> 00:38:48.840
Jason Bahl: something called the persisted Queries Link. And so what that does it? You can drop it into your Apollo client application, and the way that works it. Uh

170
00:38:48.850 --> 00:38:58.580
Jason Bahl: it tries to do a get, so it'll whatever query you write in your application. Let's say you get to the point where you have this really long query, like they cf example where you're talking about.

171
00:38:58.910 --> 00:39:06.980
Jason Bahl: Uh this Apollo Link will take that query string it will Hash it to like a shot. Two hundred and fifty-six hash,

172
00:39:07.070 --> 00:39:10.770
Jason Bahl: it will send a get request with that hash to your server.

173
00:39:10.920 --> 00:39:18.470
Jason Bahl: If your server already has that query with that hash it will execute and return the response if it doesn't

174
00:39:18.780 --> 00:39:34.060
Jason Bahl: the server response with an error telling telling Apollo client, I don't have this query So so, Paul client, the persistent query, Link takes the hash and the full query String sends it as a post request to the server,

175
00:39:34.410 --> 00:39:53.020
Jason Bahl: Then the server stores it for future for future use. So now the server can have a copy of this document. So your client developers can go right. Their queries, However, they want for their application, and it basically syncs it to the wordpress server, as these queries are executed. And then

176
00:39:53.030 --> 00:39:57.940
Jason Bahl: uh, then you can make use of get requests for all your queries. Basically.

177
00:39:57.950 --> 00:40:17.249
Jeff Everhart: So it's a super cool workflow That's cool. It reminds me a lot of i'm going to invoke like the dot net days. So we would do like a they call them stored procedures on. And it reminds me of that we're like I define this query, maybe with variables, and

178
00:40:17.260 --> 00:40:32.390
Jeff Everhart: that lives on the server, and then I just sort of invoke it from my application, and it just kept the code so much cleaner. Um really made sure that you weren't like modifying these queries all over the place. So there's a lot of cool, cool parallels to that.

179
00:40:32.400 --> 00:40:45.119
Jason Bahl: Um! What I see with this feature was kind of cool. I I I think this would be maybe a cool experiment to try for somebody if they wanted to like the the rest. The rest api the wordpress rest api

180
00:40:45.130 --> 00:40:58.599
Jason Bahl: like It's an endpoint that does some stuff and return some data like It'd be interesting to see if we could reproduce like a similar experience with persistent queries. We're like you just have a series of endpoints like Oh,

181
00:40:58.610 --> 00:41:11.329
Jason Bahl: post endpoint, but it's just a graphql query that generates a list of posts, or, you know, like I think you could get pretty close to the same experience you get with That'd be cool with the rest. Api with, persisted queries uh.

182
00:41:11.470 --> 00:41:26.800
Jeff Everhart: So. Gee! And it's interesting because I thought you were going to say, Jeff, you should make a dot net example. Yeah, there we go.

183
00:41:26.810 --> 00:41:35.059
Fran Agulto: I was gonna I was gonna ask about the layer of the Apollo client playing with smartcast, Jason, just for like um,

184
00:41:35.070 --> 00:41:52.519
Fran Agulto: our listeners and people that are gonna after the podcast download the plugin and whatnot is there an actual? When, say they have? An say they're using next to us on the front end, and they have an Apollo Js. File for their Apollo instance in there. Is there anything syntactically that you need to set up

185
00:41:52.530 --> 00:42:00.829
Fran Agulto: within the Apollo client to play well with this persistent queries, and just Wp: graphical smart cash overall. Or are you kind of Gucci from the start?

186
00:42:00.840 --> 00:42:12.839
Jason Bahl: Yeah. So there you do have to add the support for the A. Well, if you're doing automated persistent queries, at least you do. There's a the automated, persistent queries link from Apollo. Um.

187
00:42:12.850 --> 00:42:32.369
Jason Bahl: If you go to W. So Wp: Graphql dot com is a headless next Js front end. Um it's on Github. It's all open source. So you could go to github dot com session, Wp. Dash graphql dot com, and in there you can see my appall config for how I have it set up.

188
00:42:32.380 --> 00:42:45.300
Jason Bahl: So I have I have a configured to do get requests for queries, so there's like an option on an Apollo use. Get for queries. I set that to true, So that means all my queries from my next step are going to use git requests.

189
00:42:45.310 --> 00:42:59.830
Jason Bahl: And then I I set up the persistent queries link so that it does that workflow. We just talked about where it it tries to do. Get request if it if it doesn't succeed, it does a post request with the full document and the query Id, and then in the future it

190
00:42:59.840 --> 00:43:09.649
Fran Agulto: keeps doing, get requests. And so I have that all set up, and you can steal that if you And what happens with that with Apollo is you're actually just using it as a fetch

191
00:43:10.560 --> 00:43:15.689
Fran Agulto: engineer, a mechanism rather than using its own cache because it has its own layer.

192
00:43:15.710 --> 00:43:30.440
Jason Bahl: But like, okay, I get it. Yeah, right? Yeah, you could. So you I mean, you can cache in Apollo. You could turn it to network only cache if you wanted, and let the like your network cache be the cache,

193
00:43:30.470 --> 00:43:49.080
Jason Bahl: there's still benefits. There can be benefits of like caching stuff on Apollo, because even if you can, if you can prevent Apollo from needing to talk to your server at all, even if it is a cash response. Varnish it's still that it There's nuance to it, though. Right like um, if you're not talking to your server,

194
00:43:49.640 --> 00:43:52.349
Jason Bahl: how do you know when things change right so like

195
00:43:52.890 --> 00:44:07.370
Jason Bahl: It's kind of up to you and what you're building like uh you might. There's fetch policies in Apollo. You can explore um. I depending on what you're doing. You might be safest at the moment. If you have a network cache and your wordpress host,

196
00:44:07.380 --> 00:44:19.800
Jason Bahl: you might be safe to set it to network only your cash for your cache policy in Apollo, because then it will hit varnish. Uh whenever it tries to get data, you don't get cache from the server. If it's fresh data, then it will,

197
00:44:20.150 --> 00:44:30.940
Jeff Everhart: you know, expose that? Um. But it really just depends on what you're building, though. Yeah. So sorry this is me, and I meant to sort of ask this question back when we were talking about the network cache.

198
00:44:30.950 --> 00:44:47.090
Jason Bahl: But how long does that stuff stay cached in the network cache is there? Are there settings for that. So there is. There is actually one setting. So the smart cache plugin under the cache tab in the settings. There is like a Max age that you can send um

199
00:44:47.100 --> 00:44:58.479
Jason Bahl: for all queries. The default, I think, is gonna I think, Wp. Graphical since the default for all queries to be six hundred seconds. So any quer you make tells the sells. The

200
00:44:59.070 --> 00:45:03.600
Jason Bahl: The response has a header that says, Hey, C me for six hundred seconds.

201
00:45:03.610 --> 00:45:31.719
Jason Bahl: Most hosts are gonna respect that you can override that from the settings page, so you could set it higher or lower like. If you want all your stuff to be cached for twenty-four hours, or whatever you want, you can set it from there, and then, persisted queries you can also override the value the Max age at a per query level as well, so like let's say you wanted all of your stuff to be cached for twenty-four hours. But maybe you wanted your homepage to be cached for just five minutes. Um! Or whatever

202
00:45:31.730 --> 00:45:50.299
Jason Bahl: Obviously all these things are going to be purged when events happen they should be in the event, in the event that maybe you are querying for data that isn't being tracked like maybe you have fields you expose from a plugin that uh maybe uses custom database tables or something like that.

203
00:45:50.310 --> 00:45:58.319
Jason Bahl: Then we like, Do we pay graph, kill smart cash isn't going to know about your custom thing, so it might not be tracking when that custom data changes.

204
00:45:58.330 --> 00:46:10.649
Jason Bahl: So in those events, you might want to put a ttl, or like a Max age of the cache, so that even if an event doesn't clear the cache, it will be cleared automatically at some point in time. So

205
00:46:10.660 --> 00:46:22.149
Fran Agulto: I gotta tell you guys that. And it's totally okay, Because I did ask the developer on the call when I was with Jason and Mark Kelner helping that I mentioned their name on the podcast, but he didn't want to get on, but

206
00:46:22.160 --> 00:46:34.119
Fran Agulto: clutch points and uh Cavs nation is actually um moving toward full head list their main dot com, but their calves Nation Website Jason got on a call now is able to observe

207
00:46:34.190 --> 00:46:48.740
Fran Agulto: and y'all i'm telling you this right now. It's not because I work at W. P. Or whatever, because I also not not only watching it on A. Cs Nation website, a sports website that's used by a lot of people, but my own

208
00:46:48.820 --> 00:46:57.079
Fran Agulto: the way Jason and Mark is set up this plugin to invalidate the cash, especially if you're using Isr with next Js

209
00:46:57.450 --> 00:47:03.189
Fran Agulto: to get that fresh nappy up to date data when you hit, publish on the wordpress end,

210
00:47:03.640 --> 00:47:33.630
Fran Agulto: and then it's just like the response is so quick. Once it's, it's it's insane, it's it's so good. I got so stoked because the the devil on the call for clutch points was like, you know what I'm just going to push this to Prod. I'm just going to push this to prod right now, and I'll Jason's like. Oh, cool

211
00:47:33.640 --> 00:47:52.950
Jason Bahl: for the day. Yeah, we we hop on a call. I was just gonna demo them the feature, and like in a span of thirty minutes I demoed it. He installed it, activated it, pushed to broad, verified that I was working in prod all within like a thirty minute call. I was like all right cool. It's working. That is cool. That is cool.

212
00:47:53.520 --> 00:48:05.280
Jeff Everhart: Yeah, And I think well, and we have. We've touched on cash and validation, and what it does a lot, and I think that was kind of our next question. So is there anything else you think we missed there like? How, how, how it works with the host. I think

213
00:48:05.300 --> 00:48:13.570
Fran Agulto: the thing one thing I wanted to ask Jason, because I i'm kind of curious at the end of the read me as I was um

214
00:48:14.240 --> 00:48:23.499
Fran Agulto: because I was like in gross. And then for all in the in his talks for the past two weeks, because trying to write up my own blog post about it with these many layers of it.

215
00:48:23.550 --> 00:48:40.109
Fran Agulto: What I'm. I'm kind of wondering like J. What like in the future? What do you see, as far as use cases At the end of the read me, it says, Hey, reach out to us, does. If you have any ideas about custom, functionality and what you want to extend on smart cache.

216
00:48:40.120 --> 00:49:00.430
Jason Bahl: Oh, sure! Do you have any top ideas that that that have come to you so far yet about anything. You know what i'm saying? I'm: just curious about actually. Oh, yeah, okay. So here's here's like one of the gotcha with cash and cash and validation. Actually so. So Graph Graphql obviously makes it really flexible to fetch a lot of stuff and a lot of different things.

217
00:49:00.440 --> 00:49:05.830
Jason Bahl: Right? Um. So don't we figure out how my default like caps. Your queries are like a hundred

218
00:49:05.930 --> 00:49:23.770
Jason Bahl: things like. So if you query for a list of posts like we cap at one hundred, and then we recommend you do a patch native request. So you do like one request for one hundred another request for one hundred. Some folks will filter it, and allow you to query like a thousand things in one request. Um!

219
00:49:23.780 --> 00:49:26.400
Jason Bahl: The thing with caching validation, though,

220
00:49:26.420 --> 00:49:30.939
Jason Bahl: is the more nodes that are returned in a request.

221
00:49:31.130 --> 00:49:50.610
Jason Bahl: Anytime those nodes are edited that it's gonna cause that cache to be evicted. So if you're if you're returning a thousand nodes, and you have, you know, fifty content editors. The chances of them editing one of those thousand nodes is high. So any time somebody at it's one of those it's going to make the cache so like

222
00:49:50.620 --> 00:49:59.630
Jason Bahl: you uh. So dexter to actually found this, like their homepage, are clearing a lot of posts in one request.

223
00:49:59.800 --> 00:50:09.430
Jason Bahl: And obviously it's the most recent post that have been published on the home page. So anytime it I don't know. I mean, if you look at their home page they got, you know, dozens of content creators.

224
00:50:09.440 --> 00:50:25.560
Jason Bahl: So anytime one of those content creators goes and edits typo on one of those posts or posts an update to it, or adds a picture. You know tweaks a caption, or, you know, like whatever whatever they're doing, those actions are going to evict the cash, so that they I think you said this earlier,

225
00:50:25.570 --> 00:50:40.750
Jason Bahl: he said. Oh, it's working too good. So one of the things we we work with with them. Um, and there might be some finesting still to happen there. But, uh, the idea is like what you can have, like a middle ground of the cash and validation strategy

226
00:50:40.760 --> 00:50:55.080
Jason Bahl: by default, the cache and validation like I mentioned It's gonna it's gonna purge caches. If you edit a post or a page or a user or whatever it is. If you edit a node or an object, it's gonna call purge on that. Id

227
00:50:55.090 --> 00:51:07.400
Jason Bahl: so any anything in the cache that was tagged with that Id will be evicted. So if I have my homepage that has one hundred posts, any of those at one Hundred Post gets edited, the homepage is going to be evicted.

228
00:51:07.560 --> 00:51:20.310
Jason Bahl: So what what you can do like you can filter the the headers that are returned in the Graphql query. So like what let's say, let's say their cash strategy would be like um

229
00:51:20.410 --> 00:51:35.740
Jason Bahl: instead of instead of evicting the cash for any edit to any of the one hundred posts. Maybe they only wanted to evict when one of the top ten posts was evicted like, maybe maybe if there was a one of the top one hundred, but maybe is published yesterday, or whatever

230
00:51:35.780 --> 00:51:52.079
Jason Bahl: we can let it ride out for five minutes for natural expiration, right if it's one of the top five or ten posts. If that's edited, let's purchase the cache so you can filter the headers that are tagged, which is that were casual tag or the object cache will type the query with

231
00:51:52.090 --> 00:52:09.409
Jason Bahl: um. So you you you have control like filters and stuff where you can override some of the defaults. Um! To play nice for your your situation. Um. So like scenarios like that is, I guess what i'm looking for like Dixie, or to help us identify that like Oh,

232
00:52:09.420 --> 00:52:17.329
Jason Bahl: we're caching accurate, or we're about. We're invalidating the cache accurately, but it might be more than they want it. Um.

233
00:52:17.340 --> 00:52:37.480
Jeff Everhart: The other strategy, though they could potentially just have smaller quarters on their homepage that I've got to make my tech tech Twitter drama joke about having one thousand Rpc. Calls to look at home. Page here. So this might be if you got a sufficient cash.

234
00:52:37.490 --> 00:52:43.819
Jeff Everhart: Make those thousand Rpc. Calls, but it's a it's it's all a balance right like

235
00:52:43.850 --> 00:53:03.629
Jason Bahl: a lot more more smaller queries versus one big query, like there is a balance at one point, like too many requests, is going to be painful, but, like one big request is also going to be painful, so trying to find that balance and what works for you, and what what works for your users?

236
00:53:03.640 --> 00:53:04.700
Jason Bahl: Um!

237
00:53:04.860 --> 00:53:15.109
Fran Agulto: But I think that's it. I think that's a good find, though, as far as the stereotyp, and like that in the community, because I think getting more granular on how they want to evict what

238
00:53:15.140 --> 00:53:19.539
Fran Agulto: is definitely wouldn't Only be the use case, Jason, for that, like

239
00:53:19.640 --> 00:53:28.349
Fran Agulto: they brought this up to you. But I think more people would use it on their own uh sites and whatnot some some other use. Cases, too, is like

240
00:53:28.360 --> 00:53:49.029
Jason Bahl: we. We track a lot of events that happen in wordpress. But there might be stuff that like you're like. Oh, how did you miss this, or what you know like this is common event that happens like, but it's not being tracked like. Why not like those kind of stuff if you're doing something and and you're noticing that stuff isn't evicting the way you would think it is or should be like.

241
00:53:49.040 --> 00:53:53.290
Jason Bahl: That's the kind of stuff we want to learn more about that. If it's from a custom plugin.

242
00:53:53.460 --> 00:54:10.310
Jason Bahl: You're probably gonna have to write some code to get the two things to work together or encourage the plugin developer to to whatever. And And that was kind of my next question. So like when you say custom plugin, do you mean, like some of the popular like Wp. Graphql add ons, are

243
00:54:10.320 --> 00:54:28.950
Jason Bahl: probably gonna need a little bit of custom massaging. No, uh, potentially. Yeah, it could happen at that level, or I don't know if you're if you're using, I don't know any any plugin that adds data to to wordpress that you can get back out in Graphql. It might

244
00:54:28.960 --> 00:54:45.680
Jason Bahl: like, Uh, there, there is a good chance you are using graphical extension for already. Um, But if if you're not like, maybe you registered a graphql field yourself to expose data from the plugin. Um, Maybe that plugin is storing data, not in a post type or

245
00:54:45.920 --> 00:54:54.270
Jason Bahl: post. Maybe it's storing it on the custom table or or something, if it is stored outside of like

246
00:54:54.420 --> 00:55:14.379
Jason Bahl: core data constructs and wordpress. We probably can't track the event. There is a chance like gravity forms. For example, there's gravity forms for W. The Wp. Graph kill forgot before extension. The gravy forms uses custom tables right and so, like the smart cache plugin can't automatically.

247
00:55:14.390 --> 00:55:15.209
Jason Bahl: I mean,

248
00:55:15.650 --> 00:55:33.309
Jason Bahl: we can't. We can't find all these different and how they do custom data, we could right? We're not going to right tens of thousands of Yeah, Yeah. So like the gravity forms Wp: graphical for gravity forums. Probably at some point,

249
00:55:33.370 --> 00:55:35.030
Jason Bahl: I imagine we'll

250
00:55:35.340 --> 00:55:44.679
Jason Bahl: do the magic for you that listens to how data changes and gravity forms and call a purge event in the same way that we do for core wordpress actions.

251
00:55:44.690 --> 00:56:00.979
Jason Bahl: In the meantime, I doubt it's their highest priority right now. The so. So you might. You might need to do that for your own site and kind of bridge. The two things um, or open a Pr. To Wp: Graphical gravity forms, or whatever who maintains that is

252
00:56:01.040 --> 00:56:02.889
Jason Bahl: stellar man. He's,

253
00:56:02.930 --> 00:56:06.929
Jason Bahl: I think he knows more about the we pick off than I do. So

254
00:56:07.440 --> 00:56:11.370
Jason Bahl: yeah, he's pretty awesome. He's awesome.

255
00:56:11.430 --> 00:56:15.359
Jeff Everhart: No, we should. We should.

256
00:56:15.370 --> 00:56:36.750
Fran Agulto: Oh, sorry. Um, we've got one minute. J. I gotta ask this. This is the frames I need to know, too, because I need to know, because you're the man who made me go out and buy an air fire with your tweets about air fried pizza, but air fried pizza is not the only thing that you eat out of your air, Fryer. What are your top? Five?

257
00:56:36.760 --> 00:56:50.100
Jason Bahl: Well, Pizza is obviously the best. So the secret to pizza, in my opinion, like go order, repeats and eat it just like from the restaurant, but order some extra. Keep it left over,

258
00:56:50.460 --> 00:56:53.659
Jason Bahl: toss a few slices in the next day Man

259
00:56:54.150 --> 00:57:08.710
Jason Bahl: Pasco left over pizza and pizza, brother, so so there's that um fries are pretty good. You can reheat fry like if you reheat them

260
00:57:08.720 --> 00:57:23.389
Jason Bahl: like you can't microwave fries. You can mean you can toss on the air, Fryer, and and he's pretty good. Um So you got fries. I've done a whole like a whole chicken in there. You take a whole chicken and season it up, Toss them there, fryer

261
00:57:23.500 --> 00:57:30.440
Jason Bahl: uh hot wings. Oh, good call! I didn't think of that.

262
00:57:30.720 --> 00:57:34.090
Jason Bahl: Let's see. Oh, I haven't tried it yet,

263
00:57:34.340 --> 00:57:52.460
Jason Bahl: but i'm probably gonna do it right after this call. I got a boosted corn tortillas in my fridge. I'm going to cut them up. They're from. Make a make corn chips. Oh, yeah, that would be good for teachers whatever. Oh, man, there you all all the Jason ball for more like

264
00:57:52.470 --> 00:58:08.119
Fran Agulto: i'll tweet a picture of these chips. Yeah, Because after yeah, after i'm done for. I'm going to the grocer, and i'm gonna i'm gonna i'm gonna try the um the chicken that you just I I didn't even think of chicken or wings to throw in. Yeah, I don't know why.

265
00:58:08.150 --> 00:58:10.359
Fran Agulto: Oh, we are good.

266
00:58:10.500 --> 00:58:14.339
Jeff Everhart: They come out really good, don't they? Yeah, the wings are awesome.

267
00:58:14.360 --> 00:58:26.359
Jason Bahl: You gotta experiment with it. See what works for you like? I like my wings a little more crispy, so like sometimes it takes a little while to get them there. Well, I pat my wings dry with paper towel, and then put a little Z in.

268
00:58:26.930 --> 00:58:54.479
Jason Bahl: I always mix them up. You see the baking powder baking, so that I forget which one I I have it in my kitchen. I can't remember which one is. You sprinkle a little bit of a It's not the it's not the arm and hammer. I think that's that's soda taking soda. Thank you. So yeah, I think arm and hammer is baking soda. Okay, you sprinkle a little bit on the wings, and it helps kind of keep the moisture out, and then they get a little more crispy.

269
00:58:54.550 --> 00:58:56.970
Fran Agulto: Uh nice, Okay,

270
00:58:57.010 --> 00:59:15.839
Fran Agulto: sweet. There you have it. Jason's top five hair fried and foods. Yeah, Jason. Thanks for coming on, man. Everything about this. This was a good podcast, and I think. Um, it's a game changer. The The plugins a game changer, and once um, it just gets more use, and iteration on it's it's

271
00:59:15.850 --> 00:59:26.709
Jason Bahl: it's going to be excellent for the community and everything. So I appreciate you, man

272
00:59:26.720 --> 00:59:50.049
Jason Bahl: uh Twitter, my handles, add Jason Ball, Ba. Hl. And then also at Wp. Graphql. On Twitter, and then uh github dot com slash, wp, dash, graph Ql: We find a bunch of repos there, including the smart cache repo, the the

273
00:59:50.060 --> 01:00:03.529
Jason Bahl: but uh, yeah. And then obviously Wp: Graphicalcom: You can find information about all this stuff there, too, and we'll we'll definitely leave Leave a bunch of links in the description and stuff one hundred percent cool.

274
01:00:03.980 --> 01:00:08.869
Fran Agulto: Well, all right. Rock on y'all.