Faster GraphQL With GraphCDN

hello everyone and welcome to another episode of learn with jason today on the show we have max deuter max thank you so much for hanging out how you doing today thank you so much for having me i'm really excited to be here i am doing fantastic it is christmas season i get to wear my ugly christmas sweaters i have my rubber ducky here i feel 100 prepared look the duck ducky twins oh i'm sorry i didn't know you had gotten one of those that makes me so happy i had to i had to it's not like i have much of a choice they're awesome they're so good it's on my desk all the time i am i'm dropping a link right now chat you too can have your own party corgi rubber duck uh uh that's that is that is a delightful um let me i just realized i didn't turn on my lights back here what am i thinking how can you get into a coding stream without spooky lights in the back oh man all right everyone so uh i i feel like i've been i've been following your work forever you've worked on a ton of projects that that probably most of us have heard of but uh but just in case for folks who haven't heard of you do you want to give us a bit of a background on on yourself and what you've worked on of course thank you for that nice intro i don't know if that's true um but i've certainly died a lot of stuff just yesterday actually was a big moment for me because open source projects that i've created or co-created surpassed a grand total of a hundred thousand stars which is absolutely mind-blowing to me i remember way back in 2014-15 when i started with open source my first 500 stars felt like an insane achievement and i can't believe that i'm at the point where where we were talking about hundreds of thousands like that's just it's a mind-blowing amount i'm really humbled by the fact that i got to build things and invent things that so many people enjoy using mm-hmm and also a lot of people hate using so you know it's all it's all upside down you know i mean like it's it's not just all good but a lot of people enjoy using my stuff and that that makes me very happy and um very grateful to be doing what i'm doing so sorry that was a long rambly non-answer what i've what i've done is i've i've worked a lot in the react space um so if you're in the ranked space you might have seen react boilerplate back in the day you might have seen styled components um you might have seen keystone i've i've worked on a bunch of open source projects most recently i worked at gatsby before co-founding graph cdn i've done a bunch of stuff and that's why i'm here and i'm also equally a huge fan of you jason i'm i'm like i said really really excited to be here and to finally be a part of the learn with jason show very very popular i am i'm very happy to have you here oh ben thank you for the sub we're at a a 16 month streak that is uh that is wonderful and yeah i mean the the subs mean a lot y'all uh i mean we're going to talk a little bit about the sponsors later but the the subs also go directly to supporting the show and allowing things like live captioning and bigger and better ridiculous things to happen on the show so uh so that's very much appreciated um so max we we talked about uh about your background but i'm actually really excited about what you're working on now um and before we get into the detail details of exactly what you're working on let's let's set a little bit of context which is graphql has been it kind of splashed onto the scene it got a lot of press everybody was really really excited about it and i think we saw the the awareness of graphql maybe grew a little bit faster than the actual adoption of graphql thank you for the sub i like the the sub from the yeah that might be the first time that a guest has ever subscribed to the show live i got reminded i could remind you when bins up that was like hold on i got a thumb why am i well now you have access to that emoji you can bury yourself in boobs if you want uh finally finally but uh okay so so i feel like graphql has been one of those things that a lot of people are aware of um many people have wanted to use it have maybe tried it but aren't using it in production um what what do you think is the the what is your take on like how ubiquitous or or not graphql is that's a great question um i think graphql has certainly gotten a lot of steam and gained a lot of steam over the last years um it's it's it's grown a lot and i think what what what ultimately i think it's the same thing also with my open source projects when when people like using something it grows right because they just keep using it and they keep recommending it to their friends and they keep talking about it and they keep sharing it they keep wanting everybody else to use it and i think that is definitely happening with graphic the people that are using graphql they're huge fans and they're talking about it and that is just a really positive sign i think in terms of general adoption lots of big companies use it but it's still a minor percentage of risk right i think the vast majority of existing apis in in the world are graphql based uh sorry are rest based and only a minority are graphql based and i think that's going to change right i think over the next two three five ten years just like graphql has been growing for the past five it's going to keep growing right and more and more apis are going to be graphical based which is a really exciting time um wait does that mean i i can't be buried in boobs i wait we're just not reading the chat i know i'm having issues what am i even here for i am leaving i am leaving i i don't know what uh i don't know what happened today um we we appear to have a bug in the chat so it's not uh it's it's like working to a point i'm not 100 sure what happened so i'm gonna have to debug that later uh we'll see if it's if it's just this view or if it's all of them we switch over to pair programming but um yeah so so i would agree with your take that graphql is is still kind of in the minority it's it's you're seeing it in the cases where it is just purely obvious like you need a graphql api a great example of this is github uh shopify like these are huge data sets where building out rest endpoints where you could actually access all the data that you need for unique views is a nightmare you know we you get into github you say okay well i want the the repo and if the repo gave you an issues array with just ids and then you had to go send off another request for each of those ids to load the issues for the repo but then inside the issues you also had to go load you know individual requests for the ids of the authors so that you can show their profile pictures suddenly you're making like hundreds or thousands of requests for a single view and that's just not tenable right but github does a graphql api and suddenly you can dig into all that nested data in a single query and suddenly it's much more approachable and manageable um shopify similarly you know you've got products you've got variants you've got purchases you've got receipts you've got customers all that data is connected but not necessarily in a way that makes sense for a fully normalized rest api um you need that kind of bespoke like let me just get whatever data i need for the view i'm creating um it does feel like in a lot of cases that complexity is is maybe you know because i guess sorry let me add some context the trade-offs of building like a rest versus a graphql api like for a rest api if i can set up a route and then i can spit out some some json from that route i'm kind of done building my rest api in the strictest sense of the word and graphql it feels like is a little bit more of a lift to get started so where where do you think the line will be drawn on what should be graphql versus what should be rest are you suspecting that it'll be all graphql all the time or do you think that we're where it's going to be a balance that's a great question that i honestly don't have the answer to i think to me as soon as i start working with other people and other people have to use the thing that i created graphql starts making immediate sense because they can look at exactly what i've done they can look at exactly the kind of data the shape of the data that they've gotten and they don't have to talk to me they don't have to just send a request and hope that i always send back the same thing they know i will right because it is graphql because it is specified um and to me that's just like i would i've worked with rest apis both as a from the developer but also i've implemented a few of them and it's i would always grab graphql now even though there's like a slight startup cost maybe that is also getting lower over time as where people are building tooling in the community it is just it works so much better as soon as you are in the team and almost anything i've ever done has been in the team right and so yeah to me that's the point where it's like you know yeah i could just return some json but really do i want someone to have to look at this code to figure out what data i'm going to return nah man like just just make it a graphql api you know what i mean um and i'm sure there's use cases where you have data that just doesn't make sense for graphql right i haven't come across any personally but i'm sure they exist right i'm sure there's use cases where you're like i have no relations i only need a list of data of things like why do i need graphql for this that doesn't make any sense right i always want the same data just give me that goddamn data i don't need that extra level of abstraction and that's fine right like that's that's cool i'm sure those use cases exist but the ones that i've had graphql has been incredibly valuable for yeah and you know like i'll i'll give you a use case that i have where i i built both the graphql and a rest api and i found myself mostly using the rest api is because i like list my episodes and my episodes don't really have a lot of relational data you know it's just a it's basically a list and i'm most of the time i'm like i just want to use like a quick fetch request and i don't want to have to remember how to like i know how to send a graphql query with just a fetch request but i can't i can't always remember how to do it but with a like a you know rest api it's like i just throw it throw that url into the fetch and i'm done um and so i i think you're right though that as data becomes more complex and i think the point of complexity that it needs to reach is pretty small um the trade-off of setting up graphql especially as the tooling is improving um i think when you when you look at you know something like say asura and how quickly hasura just gives you a graphql thing or like these these tools that you can get open source tooling that'll like will auto generate your full graphql api with typescript autocomplete for the sdk that will give you and like all this there's just so many incredible tools out there that are making this way less intimidating and um and then the other thing that i've seen people talking about and watch how quickly and smoothly i do this transition max this is going to be this is going to be masterful so the other thing that i see people complain about with graphql is that when you're looking at rest rest is easy to cache it is easy to reason about you get http status codes that correspond with what happened from the request and that with graphql you can't do that as easily because graphql you always send as a post graphql will always send you back at 200 and you'd have to then parse the res the response which means that caching isn't as easy because you can't do url based caching anymore and i have a feeling you've got uh you've got some thoughts on that absolutely um first of all i'm just going to answer the question from chad and mullerman that is indeed a reindeer a ninja riding a reindeer i don't know if you can see that hold on let me move to the other side that is a ninja riding a reindeer which is of course the most christmasy thing you could wear right like what else would you be wearing for christmas i mean come on you know like you gotta you gotta be wearing that um what's interesting before i answer your specific question what's interesting i think always is tools tend to break down at transition periods um what i mean by that is for example say we make it really easy to build a graphql api from scratch right like you're using azure you're using steps and you're using one of these tools that gives you an auto-generated graphql api that works great to get started but then maybe as as you build a team and as you start scaling it becomes a little bit more difficult right and maybe you run into some problems and you have to work around some of the limitations in the system on corollary on the other on the other end of the spectrum like if you're github you've built so much tooling around your graphql api that hundreds of engineers can work on it day in day out and it doesn't break and it and it works and the scheme is consistent and there's a bunch of tooling there to make that work at that scale you could take that same setup and you could use it for your learn with json website and it would be really tedious to work with right like that makes no sense and i think often when people talk about trade-offs in engineering because everything ultimately is a trade-off they often don't realize that they're talking about different contexts right um and i think graphql is great for some context and it's not great for other contexts and you can't just say oh yeah graphical is great for everything but then someone else comes and says no i have this one context where it doesn't work right so graph kills and somebody else goes no but i have this other context so graphically is great right like that's a that's an unnecessary discussion you're into you're living in two separate worlds where you're like this person has a use case where it works there's a person who uses word doesn't that's fine right like the traders just don't fit um and i don't know i think that that makes sense i i just gotta sorry i just gotta go back to chat for a second before i go back into serious mode the classic story of the samurai on rudolph of course of course don't you know it's it's not it's not it's not rudolph the red-nosed reindeer it's rudolph the red nosed samurai riding on the radio that is what we're looking at here you know the reason they needed reindeer and and why they needed rudolph specifically wasn't because of of fog it was actually because of a smoke bomb correct of course of course when the ninja throws a smoke bomb how are you going to know where everything is [Laughter] um but yeah i think you're i think you're right i mean and i think that one of the challenges that we have is that um tool like front-end tooling and and database tooling and all these spaces are they're growing rapidly they change quickly and that leads to what i would consider to be a little bit of extremism we we look at tools and we want to believe that any given tool is going to solve all of our problems and we've also got a problem where there's an incentive for companies to tell you that their tool will solve every problem and and so you get a little bit of like you know if you if you depending on which dev rails you follow on twitter and i'm guilty of this you'll you'll see them say oh yeah you can build anything you want no matter what this is the best place for it and and it leads to that kind of well okay well then that means the other devraj say no no no your platform is garbage only my platform works for everything and i i i'm happy to see that at least in certain parts of the industry we're seeing more of a leveling out where what we're really looking at is you know for me at least the the sign of wisdom and maturity in a developer is an unwillingness to say that anything is a perfect solution you know i i i made this joke a couple times but sunil pai said uh you know silver bullets only work on werewolf shape problems and and most of our problems aren't in fact werewolf shaped so you have to look at everything in terms of like what's the pragmatic approach to this we have a problem to solve every tool is good at solving some problems better than others so you have to evaluate everything in the context of the problem that you're trying to solve and not on the raw merits of a tool um and those trade-offs some of them are universal trade-offs like writing everything in javascript has a universal trade-off of it's in the browser and people can turn off javascript right so that is a universal trade-off and something that you can discuss kind of broadly but like should we build a single page app versus a server rendered app it really depends on what you're building um so so in that you know knowing that that's the case um when we talk about graphql let's assume we found a use case we know that it's the right use case for graphql we've we've decided to go all in on it but then we start to run into some of the trade-offs like we we do have that problem where we only get a 200 http response whether it passes or fails and i can't use the url to cash on and you know i'm i also have this problem well what if i get really aggressive about my caching but then i've so i've got my list of things but then i somebody creates a new thing how do i know to invalidate that cash i can build all this stuff manually and you know back when i was at ibm rolling out graphql in 2015 i did write all this stuff myself and it was horrible right it was one of the biggest pain points of adopting graphql was trying to figure out you know i'm i'm in there as a front-end dev trying to build redis caches and stuff it was not my it was not my happiest moment as a dev so where like where does i feel like this is the space that you're very invested in solving how are you approaching it like what what are you doing at graphcdn to make this more manageable you know i will say one more thing about the whole trade-off thing there's one classic answer in software engineering that always applies and it's it depends always depends that is the only thing that is universally true it always depends and actually let me let me tell you the story of why i a graph student and then maybe that leads me into some of the trade-offs that we make and and where even it is useful um and then maybe that because you know i'm a founder so i can actually talk about the negative aspects of of my business you know i please i was a little bit scared i think i know i when i was an employee saying bad things about the the things that i know everyone worked on um is a little bit scary but i don't have to have that fear anymore so i'm happy to talk about the limitations and where it doesn't make sense but i think where where graffiti came from is that i was i was working on a product called spectrum and which was this community platform and really a lot of open source people mainly were using it and we were trying to take this chord and make it a little bit more structured and then just make it public in like the internet and what that was trying to do is when people were having interesting conversations in a disk in a community then other people could find them right if you were having a conversation about style components or about graphql and you were figuring out a problem and you talked with someone else about it and you figured out that content all that knowledge was suddenly discoverable on google and because it was something discoverable in google other people that had the same problem could google and find your solution and of course for us also that meant that we had a growth loop right we had a way to get more people into the product which was actually it grew a lot more quickly than we originally expected and we went from almost no one using us to hundreds of thousands of people using this every month very very very quickly quickly but that came with scaling problems right we were essentially two designers and me and i'm like a javascript engineer with mostly the frontend background and so i was suddenly tasked with my job changed right from try to build something that people want that could maybe help the world to you have to run infrastructure at scale right and i chosen a really annoyingly bad database called rethink db that just didn't scale very well and so we we had tons of downtime and it was absolutely terrible and i i realized you know we have this use case where we have all this data and it's the same for everyone everyone that looks at our website sees the same post sees the same threads it's the same comments right it's all the same data it's all public anyway it's the same for everyone and so really i could just put a cache in front of that and i would probably get a 95 cached rate right they could reduce the load on our stupid database by 10 50 100 x it just didn't exist right we were using graphql and i just could not cache the graphql api out of the box so the exact same thing that you were just talking about i went and i made like this redis cache thing that never really worked very well it barely reduced the load it was br it broke itself all the time like it was just a terrible terrible solution um and that's really where graph cdn came from i was like okay this other people must have this problem right like we are not the only ones that have that use case and this is also where the trade-offs come in we had a perfect use case for caching right most of our data not all of it but most of our data was public and most of the data was the same for every person looking at it so that is an ideal use case for caching right if a user comes and visits a post why do i need to go to the database to load that data it hasn't changed in three years why am i going to the database to load this post data again that doesn't make any sense and that's sort of the corner of the way i think about caching is it's it's it's like an axis it's like a two-axis graph right on the one axis you have is your data public or is it private on the other axis you have is your data are you read-only or read-heavy or and or are you right heavy right because um so we had a use case that was public and read heavy the data was the same for everyone and it it was mostly red ideal use case for caching so other extreme would be something like for example an error tracking service right that is write heavy and super private data right error tracking services ingest hundreds of hundreds of thousands of events aggregate and process them into a thing and then a developer hopefully looks at that thing once and it never happens again right so your cashier rate would be zero percent because you would never go look at the same data twice hopefully right um and so that's like the at the opposite end of the spectrum that's like you would not cache that there's no point in adding caching to that exact at all you have much bigger problems on the ingestion side and then there's like use cases in the other two like sort of middle spectrums right and then you have things like um i don't know for example a stock market app right that is public data it's the same data for everyone but it changes every second or so right like maybe even more often so even if you could cache that it's like well but would the capacity be very high right like if i'm looking at a stock it's it's going to be out of date in a second right like even though everybody looks at the same thing not so clear anymore um and so it it it really depends on the use case you have and i and that's the way i think about it right is do you have a read heavy or a write heavy use case and do you have public data or private data and the honest truth is most use cases fall somewhere in the middle and they are very very varied right so if you think for example about an e-commerce store which is one of our most common use cases for graph students specifically some data there is probably getting read heavy right if you think about products that is super public and super reading our customers get 98 cash in rates on that fantastic for reducing load but then your shopping cart is private and right heavy right right people add 15 things to the shopping cart before looking at it once and then hopefully checking out why would you like there's no point in caching that um and so usually is usually fall somewhere in the middle that was a very long and rambly answer i hope that that kind of made sense no i think it it it does and and you know it's interesting too because you're you're talking about this in the the context of graphql but you know this is also like you can expand this out a little bit to just the web in general and you know one of the the core principles that i talk about a lot is like hey if you have data that doesn't change often why not pre-render the page so you don't have to think about caching databases at all right and in some cases that absolutely makes sense um an api makes a little bit less sense like you're not going to try to cache an api permanently as static files that doesn't make sense but you can uh if you've got a like you know on the the learn adjacent side i cache all of the episode listings by pre-rendering them instead of trying to load the data on the client side and cache it and then you know make sure that people are getting a primed cache instead of hitting the origin there's just no origin it's just the data is pre-compiled there um but as you get into things that are more private when somebody logs into a dashboard of course you don't pre-render that that doesn't make any sense they it's it's one person's data you absolutely don't want someone else to see somebody's cache data like you know there's there's all sorts of reasons why you wouldn't cache that and that's when you move into different forms of of rendering um and so yeah i think this this makes sense in it and it's it feels more universal than just graphql as well this is this is sort of a you know that's that pragmatic mindset toward you know choose the choose the tools that make sense when you're we're dealing with large public data sets caching pre-rendering whatever you want to do to reduce the load on your origin great idea private data sets maybe not a very very high frequency change data sets maybe not um but so so this is really fascinating and you you mentioned that ecommerce is a is a common use case um do you do you find that like are when you're setting up graph cdn on one of these things is it are people just only using graph cdn for a portion or have you have you kind of set it up to to handle like oh well we won't actually cash this we won't cash your your card so you're you're kind of passing through when it makes sense and you're letting people make those decisions in your platform versus having to partially onboard exactly um so we give people really fine-grained control we have a concept we call cash rules which is similar to cloudflare's page rules if you've used those before essentially they let you say if the query that we're looking at right now that is going through the gateway contains the type product then cache it for 10 minutes if the query that comes through the through the gateway right now contains the type user or shopping cart then don't cache it or cache it specifically to that user right and so you have very fine grain control you can say look i'm passing all my traffic through but i'm only really interested in caching these specific queries or these specific types or these specific fields right and you have this very fine grain control where you can say okay for this use case makes total sense this use key is private data we're going to cache it per user but not really worried about it for this use case it makes no sense at all we're not going to cache it all just pass it through and i think the interesting thing about graphene is that we do more than just caching right we also provide people with analytics and we provide them with performance monitoring and error tracking and so um people still pass all of their traffic through us because they want to see those features even when they're not seeing even when they're not using the caching for everything right yeah when they're only using it for a portion but we absolutely give people that control because they need it right almost no api is just public or just private or just read heavy or just right heavy right it is almost never that black and white and so people really need that level of control to be able to use this at all because otherwise they'd just be stuck yeah absolutely well cool so uh i i feel like at this point it probably makes sense to start looking at at how to use this i feel like we've got a good kind of philosophical foundation of let's do it the trade-off so let me switch this over into pair programming mode at which point we will find out chad please please try if the poop thing works i i feel very sad that i'm not that i haven't been showered in boops yet i feel very sad about that i'm i'm very sad that i who knew that things would just break when i haven't touched them i'm i'm imagining that i probably let something like a token expire or something but so let's uh let's do a quick shout out to our uh live captioning we've got rachel here from whitecoat captioning taking all these down for us so if you want to see those they are on the home page of the site like they are every week thank you so much for that that is made possible through the support of our sponsors we've got netlify fauna and off zero all kicking in to make this show more accessible to more people which i very much appreciate and oh boy lots and lots of boobs are happening none of them are falling down no okay well at least they're in chat at least they're in chat they're in the chat uh yeah so okay um we're also we are talking to max today make sure you go and uh and talk to max on twitter you can give them a follow uh we're talking about graph cdn specifically today and at that point i am now just max what should i do first if we want to try this thing out well first of all i will just say there's one more plug that we have to do before we jump in which is if you don't have one of these things yet go to the learn with jason shop freaking buy one because they're freaking amazing i'm just gonna do the plug for you get one of these they're amazing jason's gonna post a link in chat i'm sure i just dropped a link in chat uh yes you can you can absolutely go get one of these uh these rainbow corgi ducks um yeah i think i just have a bug like in general on my site today and i don't know what's going on okay we're gonna debug that a different day um but some something's up let me know if this doesn't how many things really broke and that's weird something is is very slow it feels like i don't know exactly what's investigating i feel like the boobs are a big part of the stream like we yeah um yeah i'm not 100 sure what's going on something i'm getting 502s from my api that's always nice unexpected oh cool okay well we'll uh we'll dig into that after the stream figure out what's going on is it like my whole thing is down now that works i don't know i don't know what's going on y'all um i'm i'm gonna guess that i did something silly and and have uh just need to go and do a quick uh quick quick investigation of my functions error logs that i'm not gonna do right now [Laughter] um but yeah so so let's see here we we are going to dig into um into graph cdn and to do that we're gonna need a graphql api which you have set up for us so let me grab this and uh so i've set up a very simple graphql api based on a template by ibrahima 92. go start that repo because it's a really great template i just took that and extended it ever so slightly added some more mutations that we're going to need today but great template go start on github he really deserves some stars um i don't know if he's watching probably not but hopefully hopefully he gets some stars from this so i've prepared this this graphql api and what i would recommend we do is just let's create a simple website for it it's a list of projects let's just try and render it so you can create new ones um and maybe update an existing one and then let's try and grass to the end to it let's just let's just go from there the whole thing is deployed on netlify of course um so there's a there's a metallify app domain that we can visit afterwards as well and where everybody can play around with the api and then hopefully we can see the impact of caching and invalidation and everything else great okay so what i have done just so everyone who uh wasn't following my terminal input can see is i um i use a format on my computer where i just keep everything organized by like github style after that i do the exact same thing i do the exact same thing it is so major key it makes my life so much easier highly recommended so i have cloned the serverless graphql airtable extended repo and i just made sure i was using i mean what a gorgeous name easy to remember easy to type super great laying back fantastic okay and so now we have in here um a a serverless function and netlify is configured to read that serverless function out of here so we have uh we've got our apollo server we have some type desks let me make this a little bit bigger uh we're pulling in the details about getting projects so let's see if i can infer based on what's in this file and this is i think where the power of graphql becomes apparent because chat i would encourage you to follow along as well see how much of this just makes sense by reading it and how much you know about this api just by looking at the definition here so we have a type of project okay so i'm i'm assuming this is an api about projects and for each project i have an id a name a description and a date good uh we have an input okay so this is a a api where i can add projects so we can add a project name description date we can update a project again id name description date and then we have queries down here which will let me get all of my projects and that's an array of projects a project with an id so i can search for an individual project and that'll give me a single project which is why it's not in brackets and then we have a mutation to create a project or update a project both of which use these these inputs that correspond and return the project that was affected did i get it right 100 and i just now realized there's an inconsistency in there that's making me nervous already the mutation is called create project but i called the input add project that is all right it's all right okay and so then in resolvers we have uh the query projects which maps to query projects runs a function called get all projects which i'm assuming returns an array of projects project itself returns a get project of args i'm assuming the args are going to look like id and and whatever in an object um in a mutation we feed in the fields from the the project input create same thing we feed in the the args and these all map to utilities that do air table stuff which we're not going to get into today but that we just know we know that these will work um but i do notice that i have some keys that i need to get now you have sent those to me so i'm going to grab them out of in the meantime j molly was you're absolutely right if you actually want to use airtable as a graphql back-end check out baseql bassql is really cool and gives you just a graphql api for any ar table base it's really smart the reason i didn't use that here is because we're actually going to look at the invalidation later and i wanted to make sure that we have a place to add that code so i needed to write a graphql api myself but really cool if you actually want to do this baseql highly highly recommend it really cool project yeah yeah yeah um let's pull up baseql actually so we can show everybody this link 100 and head over here make sure that shows up in the show notes for people because that is going to be that is going to be easier but yeah we want to be able to we want to be able to play around and break it right so exactly exactly we could not break this we want to break it a little bit so i'm going to make sure that we can do that so i i've added my environment variables and now having done that i'm gonna use i'm gonna run npm install to get everything that we need because we have a few dependencies here air table apollo server lambda um apollo server lambda why do we need that i honestly don't know maybe that's oh apollo server lambda yeah that's what we need yeah yeah that makes sense um okay so we have a server lambda function graphql and then when we run our nullify function we can just run nullified dev and it's going to pick up our functions so if i go to um functions graphql so dotnetlife functions nullify functions graphql and you turned on the playground thank you for that of course of course so now we can run a query so uh i'm gonna just prefix this with query and and i'm gonna put a couple of these in here so let's load all projects um and i'm going to do one of these this is my favorite i'm gonna hit control space and it shows me everything i can get so i can just grab these things right out of here i'm gonna get the the name we'll get the description and let's get the date and then i'm going to run it and thankfully i've already put some things in there otherwise this would not be an empty list but i've got stuff in my your table this is wonderful and then we can show one of the more powerful features of graphql which is that if we don't need the date for example we just drop it and then we don't get that data and this is really important when you start thinking about apps that do server side rendering or or rehydration or anything like that if if you're using for example um astro remix next etc and you make a query for data it doesn't just like know what data it's using and stick that into the page it actually stores the responses of queries as json that it then ships to the browser so you want to make sure you're not over fetching because if you if you query for data that you're not using it'll get sent to the browser even if you don't use it um this is actually the the kind of the the unfortunate and slightly funny cause of that uh like viewing sources hacking breach because uh there was a website here in the u.s where government site had had queried everything about people including like social security numbers like stuff you definitely shouldn't be querying they weren't using it in the output on the page but because they'd queried it it got stuck into that json file so somebody could get into the json and just pull all this user data which is why it's so important that you uh pare down data with rest you'd have to run a like a map and you know remove all the fields that you're not using or some other transformation on the data with graphql you just remove the field you only want the name we got you look at this you want a list of names if i can oh my god i can't can't type though look just a list of names that's all we're sending to the browser now i think the interesting thing is it it really starts becoming powerful once you have relations in there right this simple api doesn't have any relations it's just a list of projects but you can imagine that you have projects which have authors which have their own list of projects and then maybe they have teams and organizations that manage those projects and so you have this super deep relation thing and you don't always want all of the relations but sometimes you want some of them right if you're looking at a list of projects you probably want to show every project's name and then it's author right when you go to the authors page you want to show the author but then maybe also all of their teams when you go to the team page you want to show all of the people in that team etc etc right and as you as your use cases become more complex your graphql api becomes ever more important because suddenly you don't have to fetch all the data always at once even though you don't even need it you can just get exactly what you need that's it and that's really really really nice not just for security but also for performance and just general developer productivity it's just nice yeah it's it's really really nice um let me add so what i'm going to do is just add some some query variables here and actually i don't need to do variables yet let's not get ahead of ourselves i'm just going to drop it into the string and i'm going to take this one perfect move over here and here's a cool thing when i try to do this now it gives me an option which is why i added these names so i'm gonna load project by id there we go okay nice now i want to add something and i'm going to say add new project uh and in here we can create project here we go create project and that takes a project and inside here i need a name i need i have to actually fill these out first don't i need a description and i need a date i just don't know why you're doing this i just want to very quickly call out i know that you've shown graphql on this on on the stream multiple times before but he's jason's using this api without having ever seen it before like literally right like he's never used his api before he's never queried for projects he's never created one he's never done any of this before and he just goes into the playground presses command space or control space sees what's there and just goes and does it and i think that that is an incredible incredible thing about graphql that i absolutely love and i think that's really under-appreciated a little bit i i know people appreciate it but like it's awesome you know i mean like that just is just great like you could just go in and do this like it and everything is just gonna work and it's going to tell you exactly what you need to do ah right just makes me happy to see that you know it really is nice and then we can get back the id and the name so i didn't create an id so this should theoretically do that for us okay now we have a new id and if i load all projects there it is go here's our new project so yeah just to reinforce what max just said i i don't know what the air table looks like i've never seen it before um i've never looked at this graphql api before but because of the autocomplete and the the schema that was enough for me to know what was possible and to just do it and i i think that that self-documenting nature and here's the other really really important thing the documentation is the code so this isn't a case where they can drift out of place where like i start and i have this beautifully documented api and then oh no something's on fire i fixed it didn't have time to update the docs now it's inconsistent like i have to update the docs as part of fixing the api because of the way graphql is designed and that is a really really powerful way to look at this 100 and uh it just makes me happy to see you do this yeah it's just and i i think also like an important call-out is here it's really important this only works because graphql is a specification right someone sat down and very clearly defined what it means for an api to be a graphql api and that might sound like a minor point but that's really important because that means you can build a graphql playground once and it works for any graphql api no matter what graphql api you create no matter which one you use it's just gonna work and that is one of the most important and most powerful things but let's go and create a website for this incredible graphql api that we've now been talking about for 10 minutes that doesn't even do that much what what's going on here how dare you oh my god my emmett emmett why no i'm gonna have to figure out how to write a doctype from scratch okay so we're gonna go doctype html uh i'm gonna get some of this wrong yeah and i am 100 gonna get all of this wrong i don't what else what else do we need in here we need a a head tag we need a body tag yeah gotta have a body got it um we'll just i think we might just have to let this be a little bit wrong because i need like a meta care set utf 8 how wrong is this i need i need a content viewport i'm going to skip it i'm going to just say let's just set that up and then i'm going to stop and restart the server so it picks up that uh that local file for us and then when i come back out here we have we have that oh it thinks it's nun jux that's why this didn't work okay let's let's try this one more time ah good catch chats here for devstreams appreciate you and python python before okay this is really this is this is amazing you can just stream yourself coding and people will fix your code for you how good is that like be like jason here's what you're gonna do man i wish i had that but i'm calling as always there's someone sitting in the back being like max you gotta do this instead like this is wrong yeah and it's nice that it's it's like real people in the chat and not just my inner monologue telling me i'm wrong we appreciate you chat um yeah mega pair programming mob programming chat programming all all of those things so let's uh let's do this [Laughter] absolutely get up co-pilot we don't need you robots we got the we got the community um so here's what i'm going to do i'm going to set up a quick function to load all projects and that is going to uh let's get a response and that's going to be a weight fetch and we're going to get our own api so we'll go to netlify functions graphql and i'm going to send this because this is a graphql post we always have to send graphql as post i guess we don't have to but that's the convention um i don't need any headers right um you will need a header to set the content type to jason um that's actually one of the most common mistakes that people make is we we in our engineering interview we ask people to build something with graphql and that is the most common thing that people miss can you remind me how this works you you add accept um it's accept application slash json and then the other one is content type application slash json not my own name what am i doing and then it's content dash type uh and that is application slash station as well and that just tells both the browser that tells the server that the browser is sending json and once json back right that's essentially what this is telling the server which is really important because otherwise your graphql server will try to load your query data from somewhere completely different because it doesn't realize that what is json so super important thing that people often miss okay so now we're going to show maybe my third favorite thing about graphql which is that we ran this and we made sure that it works and now i just get to copy paste it into my app nice so that will give us our our projects um now that we have this i can do uh the like most bare bones logging hey at least you're not using log4j you know what i mean like you're more secure than most java apps oh goodness sorry that was that was low that was low that was a low giant that was a low job it could happen to you just as badly uh let's see response dot json is what we'll get back and then we can um how do we want to do this we uh look for now let's just console log it let's make sure it works and then we call it which i named this load all projects all right so let's start there we'll head back to our home page i'm going to get the console open and i'm going to stick it to this side because most of what we're going to do today is actually going to be in the console nice so here we go we've got our list of projects so let's get these on the screen i'm going to simplify this data a bit by return well let's get let's just get projects out so we can destructure a little bit drop our projects in reload nope screwed it up uh oh because data data all right so now this is a classic here's where all right so now we actually have an array and this this is not my favorite thing that i've ever written but i'm gonna i'm gonna leave it alone because it does the job and this is not gonna be production code um now that we have our product wait this is not production code jason what do you mean i thought we're building a business here like what are you talking about my hacky graphql api airtable thing isn't isn't production code what do you mean uh let's okay so let's uh let's see list of projects and then i'm going to put together an unordered list and for ease of use we're going to give this a a class of projects so then down here what i can do is i can get our project list will be document dot query selector projects and then i can remember the last time i did all this stuff manually i know it's been a while right oh my god so we can then do a for each project and inside of here we are going to uh we'll create a new item and that is going to be a document create element list item and then we can go item dot inner wait inner text yeah inner text i guess equals project.name maybe we just start there to make sure that this works and then we will project list dot append child item and theoretically speaking what happens at the end of that is we get a list hey look at it guys it works so now we've got that so then the other thing that i want to be able to do is actually create um i don't need this to be a section do i can just make it a form so let's make it a form and what we're going to do with our form is i will create a label and for this we need something to take in the name name description and date right so we can do name um and then we'll get an input id of name name probably name of name make sure that works it'll it'll work with just the name like it's not going to fail if i put it in okay no no so let's start with the name if we have time type text okay and then we'll do a button of type submit and we'll say save project and maybe what we should do here that was why i was going to do a section is so that i could add an h2 that says add a new project and we'll just move all of this beautiful up okay so here we can add a new project and in that project we're going to include a name so we need to have uh let's create form or something maybe that form yeah that works so we'll call yeah we'll call it ad form and down here we'll create a new function i don't like how we're doing that i'm going to do it differently let's collapse this one and i'm going to put this as another async function and we'll call this one create project boy this name this this naming inconsistency is real i know it's getting to me so we're going to create a project and that one is going to accept an event because we're going to attach it to the the form event submit so the first thing that we're going to do is event dot prevent default then we're going to use my favorite browser api that i've learned about recently which is the form data api from event dot target and now we can get the name from data dot get name and then what we can do is we want to create a project so we will actually take a lot of the code that we wrote in here which we could more more than likely abstract out a little bit but i'm not going to do it right now and we will instead of the load all projects we'll go back over here and get the create project and put that in here nope okay so now we've got the ability to create a new project but i want to do it by variable so now it makes sense to introduce variables yup and i'm going to include name and we'll just leave these other ones out for now and that should give us back our name and the variable that we need to send in is name which we pulled out of the form response okay then we check if the response is okay and we will console.log if i can spell it right response.json and this will just show us whether or not our uh our submission worked let's also refresh the screen that's just a window.location.com or something i don't actually know how to reload the screen we know the location will reload is that a thing it should should work i think um then down here we also want to add just uh okay we'll just add it just a little delineation of like setup versus execution um so we'll do a document dot query selector and that was create project i think i had four create form by the way i will also say i don't i don't know how many of you watchers actually i'm curious if you're in the chat right in there a yes or a one if you are a coder working at a company and right in there is zero if you're a student or if you're just learning coding or if you're you're new to it i'm really curious what the spread is and i say that because if you're a student and you're looking at this and you're like because we're joking that this is not production code this doesn't look too different from what people write you know what i mean like this is very similar to what you would see when you go work at a company it's maybe a little bit more different but that's fair that's fair yeah uh we've got a lot of ones coming in in the chat that's awesome so then you all know this is not that different from the code you write a little bit but not too much yep gotta got a couple students as well welcome and a professor hey cynthia thank you for joining um so let's uh let's try out web based submission and let's see if we got this right on the first try that this might be the first time i'm not lying when i say it worked on the first try incredible incredible i am very happy that that just worked on the first try holy holy buckets everyone um so this is i mean but this like look how cool this is all right but here's the thing we just did a bunch of stuff and we also created a potential problem for ourselves because note this is this is fine right like it's not the worst thing in the world but it does take a certain amount of time to make this happen so let's go to the network tab here and let's just look at what happens this takes let's make it a little bit bigger 400 milliseconds to execute and that includes like we have to go to the function which then has to go to air table which then has to come back get processed and then return us our data and if i had to guess i would say that probably the bulk of that is going to be the http request of getting over to airtable getting that data back which is not a problem like this is still plenty fast you know this isn't like uh oh no i'm in danger um but as we get more and more data and as the data that we have gets more and more complex it actually might start becoming an issue right so um what should we like how this is where i feel like i'd start looking at graphq or graph cdn how how do we use it to improve this experience let's do one more thing jason before we dive into graph cdn i wanna i wanna make sure that we do one more thing which is let's also update the project name let's let's add a way to just update the project name okay there's a mutation in there update project let's use that in another form somewhere can be super hacky but let's just make sure to add that because i i want to show you something afterwards when we're in grass city and that's really important okay so here's what i'm gonna do i'm gonna only fetch the id in the name and what i am going to do is i'm going to item add oh crap what is it it's uh attribute what are the data attributes set attribute i don't actually you know what sure i'm gonna do like this i'm just gonna set the id to project id so that we can pull it in and and grab it when we click on the update um and then like of course to update yes we need to uh what's going to be the e what's going to be the fastest way to do this um maybe we just update the title to something hard coded like let's just submit like let's just when you click on a title let's change it to you clicked on this project or something gotcha maybe okay yeah yeah let's do that so we will um we will add a let's do it like this we've got load all projects for each of these we can uh let's just say well while jason is thinking about this uh i hope the coding interview went well you got it first try so good luck on that uh on that job application those are freaking scary so i'm going to create a button and i'm going to update link on or add event listener and we'll make it a click event and in here we're just going to hard code this um we'll have we won't even need the event no no we won't even need the event because we've got it here we're defining it here so we'll be able to say um take this response oh boy we're copy pasting a lot of boilerplate for this but it's gonna be okay um we're going to take this code put it in here and what that code is going to allow us to do is you know what we can even make it a little bit more real world we're just going to call that button the redact button and we're just going to change the name to redacted how does that sound oh yeah that that that works okay so just a random button that does stuff it's actually you're redacting things you know what i mean totally what we planned at the beginning of the stream that's exactly how this website was supposed to work from the get-go all right so so our update link is going to be a button which means i should probably call it a button so our update button is going to say redact title and when you click it it will send off a request to update project and we don't need we do need an id so the id for the project to do that is over here somewhere i'm going to just use the this is how i this is how i develop in graphql i would just come out here type in mutation we're going to say update project i know we need an id so i'm going to put that in and then down here i'm going to start typing what was it update project that's fine and then that needs project and that is an id is that right that is actually an object that contains both the id but also the properties that you want to update so in this case we're going to we're going to do one of these beautiful right um what we will get back is going to be the id and the name exactly okay so that will work i'm not going to test it here because i want to actually see this happen so i'm going to drop this in oh i screwed that up let me get this out of here there's i think you did there's another thing at the top that's maybe too much oh what did i do oh boy i did all i made a whole mess in here didn't i foundation one three one extra okay let's just clean that up a bit uh right and then variables variables you want to pass in the id of the project rather than the name yes so let's add in the id which will be project.id so because we have access to that out here we don't need to pass it in or anything like that we we could um but we're not going to bother because this is faster and we're trying to prove something not write the world's best friend in code [Music] then when i go back here and refresh the page i forgot to append it so we're going to item dot append child and add our button uh update oh man does a pin child business reminds me that i once wrote a oh yeah okay let's let's see if it works before i tell my story so yo two-in-one shows i can't believe that that worked first right two times in a row here's the thing this will never happen again this is like this is one of those those once in a lifetime world record setting you know it's it's gonna just be we're getting right into the rut after that it's gonna get bad okay so we have now the ability to create and update and list projects and we've got about call it 20-ish minutes to set up graphcdn so let's see how it goes absolutely so first thing you want to do is sign up for graph cdn and then it's going to hopefully ask you to input a actually hmm do i need to deploy sorry yes i think you might need to deploy or actually no no no you you you don't you don't you don't we can use graph cd and cli because our engineers worked on something called gravity and surf okay let's sign up to graphs again and then ignore the entire sign up flow go to your terminal and run npm install global graph cdn in your terminal just oh just like all the way yeah just all the way just literally npm install global or website graph cdn exactly cli like that word not just just graph cdn oh just graph cdn got it yep and then run graph cdn login okay which will hopefully get you to the website and then get you back into the client you'll be logged in with the cli okay nice and now let's run graph cd and and i actually need some arguments that i don't know off the top of my head just try running that and see what it does it might give you an error that hopefully tells you what you need to do okay that is not what we want that's not what we want try running graph we might need a service already okay so you do have to run through the onboarding flow in the this is great user testing by the way um you you do have to run through the uh onboarding on the website because we do need a service or oh yeah try that oh yeah run graph student in it let's try it let's try it love help what is your production graphql okay hold on we have we we do have that we do have that we're we're fine on that phone let me let me give you that url because of course this is again deployed on netlify so oh you you deployed the this graphql uh api already i have already deployed it on graph on netlife you can also do it yourself if you want um i'm fine either way you know what let's yeah let's deploy it so here's what i'm gonna do i'm gonna we'll just run through the whole flow we'll do this really fast so perfect uh i am going to add a remote for the fork yes okay so now i have um somewhat confused myself by putting this into my own but now what i can do is i have um we have a get remote for it and so i have origin which is mine upstream and i'm going to git add all okay we're going to get commit and say i'm getting ready for graph cdn i'm going to push it off it goes then i'm going to network init and we're going to create and configure a new site put it on my team and we're going to call this uh graph cdn projects yes we're going to authorize with github through app.netify.com here we go excuse me i think i just bless you here we go why did you open chrome you weirdo this will happen fast oh boy got something caught in my throat this is gonna get exciting for all of us i'm gonna i can narrate jason's actions jason's opening one password he is putting it off the screen so that we can't see the length of his password okay he's using one password to get his github password and then he's going to authenticate into itself imagine if that was just your life imagine if just it's that imagine if that would happen every single time you did something how annoying would that be just have all of your actions i think oh my god i could you know i could actually get into having uh having a narrator i feel like that would be fun for me what on earth is happening right now it's so the problem that i'm running into is that i think i broke some some stuff on my browser i am logged in oh it so it was already going god that's super frustrating um there is no build command we're gonna deploy the current directory we have function setup good here we go adding deploy key to repository so i think i need to figure out why it keeps trying to open chrome because it that's not my default browser anymore um yep so that site is running and if i head over to app.netlife.com we will see here's my team here's graph cdn projects the deploy is starting up should happen nice and fast because it is uh we don't have to build it it's just gonna push these functions in the the index file up build ready to start did you hang on me starting up i'm gonna i'm just gonna let's try this one more time just in case there it is i did there you go very rarely i hit that but let's see are you using 16 13 1 good here we go this seems fine we don't have too many npm packages so this should happen nice and quickly off we go by the way people just to call out how quick is it to deploy something to the notify freaking good service i gotta plug your things now jason am i really plugging your things no i feel like you hit it i feel like you're plugging my things the whole time so i gotta i gotta do some reverse plugs have i mentioned yet if you haven't gotten one of these little um what are these little things what are they even rubber ducks rubber ducks man my brain farted for a second there i haven't got one of these rubber corgis really should get one okay so something that i wait there's a there's a there's a corgi emoji wait do i have access to that now you do you do indeed why did i get a 502 on this oh i know why i have a 502 it's because oh yeah i didn't uh set up my environment variables yet so watch this okay i'm not gonna run this on screen because i think it'll show the contents but you can run netlify end colon import and then the name of your end file and we'll just pull that into the app for you so i'm going to run this and it does indeed show the the values so i'm going to uh i'm going to show you just a just a little hint see here's what it did you see it over there isn't that great um so it just added those environment variables and now if i clear this i can bring it back over and i'm gonna do one more build so let's trigger a deploy here we go and this one will happen nice and fast because we should be cached should be how often have you messed up and shown inferiors on stream and had to clear every other services truly that must happen constantly right to the point that uh if if sound effects were happening uh ben would have just played the the hacker command um at one point in the past actually we we had one where the chat realized that i hadn't locked down an api yet so they went in and started editing the database in the background and we were just completely stumped as to what was going on because the data kept changing why isn't this working and then finally somebody edited the database to say you should probably lock down your api keys and you're like oh no chat so now there we go we've got our api keys in place and we have ourselves a a full working project and if we go to the network tab we can see you know this is happening nice and quick uh we once we get to the production servers we're a little bit closer to where i assume airtables production servers are so things start happening fast but they could be faster so wrecked now that i have this um my endpoint is going to be functions graphql right yup and if i go back to uh graph cdn init init yes this is my end point right over here yes okay exactly no oops oh it just did the thing for me nice okay perfect i have an org created service has now created a graph cdn service that's pointed at this graphql api we're now we're not actually going to use this graph cdn service we're just going to run graph cdn serve which is basically like a development this okay now we need to provide the backend port which is our local development port which i think is 80 80 or 80 this yeah okay do i need does that mean i need to start the yes you will need to start the server because essentially what we're doing is we're creating a graph city and service that's going to proxy through to this api so it's going to go to graph cdn and then go back down to you it's your local machine and it's going to proxy to your local graphql api and the second thing you'll need to do is do slash slash dash path um and do uh dot metallify slash dot net device dash function graph kill just so that it knows oh i'm procsing through to localhost 8080 okay function slash graphical right here i think that that should work do the thing let's see let's hope that this works man here we go let's tell that this works this is a life test we only recently added this to the cli so this might break and if it breaks we'll we'll have to figure out another way to do this but i hope that it works yeah cdn is running so now go to localhost 3010 and you should see a graphical playground now try running some craze and see if it works okay let me get our queries from over here i think it what nope here okay so we've got our queries i'm going to load all projects yes should i hit this tracing so um i don't actually know what that i i don't think that does what we want i think you just want to look at the so what is happening now this is going to localize 3010 gravity and serve is redirecting that to grassden it's going through our gateway and then it's going back down to jason's local machine to the local graphical api and it lets you look at your local graphical app and the reason we added is because for exactly this use case you want to change your graph api locally you got to also change your graphics and configuration maybe you got to do some stuff with graphite and we'll see what the cache does locally so that's why we have graph cd and serve and so now from the client from our website rather than hitting um oh this is just yeah this got generated for me which is really handy yes so this is now your graphics and configuration and this is one rule by default which just caches everything for five minutes which is exactly what we want okay um thalves asks in the chat is the gateway and netleyfair function no the graph seeding gateway graph scene is based on fastly so this is running on fastly in whatever is nearest to json right i don't actually know what the nearest probably probably actually don't know what the nearest pop point of presence for you is but the next metro city probably has one and so that is where fastly location is and that is where our gateways run anyways so now from the index.html file rather than hitting the local graphql api we want to hit the localhost 3010 api locos 3010 okay so i don't want to hit here we go let's go for every one of these nope i'm gonna go http localhost 3010 all right i don't need the path afterwards if you do the path afterwards right i don't need the path afterwards exactly just make sure i did that on all of them good okay perfect now so let's open the website and this is now powered by graph cd and if you look at your network tab this one goes to localhost 3010 and if you scroll down in the response headers there there should be some gcdn headers in there scroll down a little bit scroll down here we go it's the cache hit and we've already got a cache hit so now this is cached in graph cdn and look how fast that was just as a as a general like 20 milliseconds is much faster than the 400 we were getting before locally um so we have about seven ish minutes left um that's cool let me show you something that's really cool um if you try try to create a project from from the website just create a new project on here here no no no just just on on the actual right right right okay sorry jason [Laughter] create a project here okay so what's going to happen is this is not going to show up when you refresh try save project and then when you refresh it's not going to show up and the reason is because exactly it is now cached but the cool thing is click on redact title on any one of these projects do the same one that we already did sure and now it's going to show up all right so what just happened is the reason this works is because gravity then analyzes every query and every mutation that passes through the gateway and the project list mutation contains a list of four projects or now five projects right and we look at every single project and we go oh this is the project with the id x is the project with the id why it's the product with the id z and when you press the redact title mutation the update project which by the the redact title button it triggers the update project mutation and from that mutation comes back a project with the id x and now we know oh look we have the list of projects that contains the project with the dx and there was just a mutation that passed through our gateway that returned the project with your dx hold on we gotta invalidate that list we gotta kick that out of the cache right because that is for sure out of date so so when we know the id graph cdn can can infer that data is out of date but when we create a new project the id doesn't exist so it wouldn't show up anywhere so we would have to tell graphcdn hey when i create a project you also need to invalidate this list of queries exactly so we have an evaluation api and we don't have time to get into it unfortunately but you can basically just do a fetch call from the server and be like oh a new project was created let me invalidate the projects list because i know that a new item was just added to it got it that's really the power of graph cdn we do this automatically for every mutation where we can but then for some edge cases you still have the power of going in and manually saying hey look we created a new project let's just let's just go do this all right so where does one find here's the docs uh we don't have time to get into it but how do we is it manually manually purge okay try that and then there's a purging api explanation there and you can purge buy anything right so you can really purge by hey i want to purchase any query that contains the project with the idx or the project with your dy or all projects or anything you want and it's very very very granular got it okay that makes sense so so that uh that seems like something that would be reasonable so we could kind of get into mutation we would purge project with an id of whatever and that would that would clean the whole thing up okay you got it 100 cool and essentially we just do that automatically under the hood for mutations right we just go in and we look at it and we say oh look this mutation retained returned the project with the idx let's just purge any query that contains the project with your dx because it has probably changed um that's essentially how the automatic mutation in very simple terms works yeah so this i think this is a pretty quick uh pretty quick overview it's it's pretty powerful stuff um if i want to take this to production in our last couple of minutes here do i just swap out for my live endpoint exactly so you now have a live endpoint um if you go to your grassy and dashboard crescent io dashboard you will see the exact url and that is then pointed at your deployed api rather than at localhost right and so you'll have serverless graphql airtable extended here and so you have serverless graphql airtable extended.graphcdn.app at the bottom and if you click to the api playground you'll see the same thing and this is now pointed at the production graphql api taus good call out five million requests for free our free plan is insanely generous if you have a graphical api you can use us for a very long time for free that is very much on purpose we wanna we want developers like you jason or or me that use graphql for the personal website you should just be able to use us you know i mean like you shouldn't have to pay us money like we're happy to support you and so um everything counts as a request but five million gets you very far um that gets you to about probably a hundred thousand monthly pages maybe a little bit more somewhere in that order of magnitude okay so this adds graph cdn so i'm gonna push that up and does anything need to change for this to like i don't need to configure anything right it's just gonna work it's just gonna work that's it very cool and of course again to create project mutation we would have to add the fetch call into the um create project mutation in our backend to make sure that we invalidate when we create a project we invalidate the query but this this this will work and is this the sort of thing that like is the the long-term vision that i would be able to just add a rule or like a dependency in a rule that says these are the the mutations or queries that should invalidate this cache yeah that's that's very cool because that's what's also exciting about that is that you know that starts to open the door for like well now the computer can just do that for me because graphql is statically analyzable hooray exactly exactly jason get it that's why that's why that's why that's so powerful right like we can look at your graphically and we can go oh we know what you're sending here we know what we're looking at so everything's just gonna work and so let's uh let's just take a peek at how fast this becomes look nine milliseconds to get that graphql back and like even on on a tiny amount of data like that it is a noticeable difference like this is very very cool um chad if you all want to go play with this feel free i imagine all of the titles will be redacted very shortly [Laughter] but so with that um that is all we've got time for today it what should somebody do if they want to go deeper here what what are next steps for folks who are excited about learning more about graphql more about graph cdn more about graphql go just check out pre-made graphql apis right like go check out the github graph api show up shopify graphql api play around with them they're they're great ways to play around with things there's also star wars graphql api that doesn't even require authentication bunch of stuff if you want to learn more about graph cdn just go sign up we have a button there that says i don't have a graphql api show me a demo and we'll just give you a demograph cdn service and you can play around with that that points at the github graphql api so you can see what that feels like when it's super fast which is really really cool yeah this this was the the the uh demo thing the demo that showed up so i just clicked the use use demo data and it built this for me exactly exactly is there uh like a a first steps kind of yeah here we go yeah set up craft seating from scratch we have docks for everything our docks will need to improve as well we're working on those but they are they they should get you there hopefully um and if you have a graphql api that you're running in production hit me up feel free to dm me on twitter my my dms are open i'm happy to help anyone get set up with craft city and this is my job now uh thankfully which i'm very very excited about so feel free to ping me anytime happy very very happy to help um anyone get set up with graph cdn yes and if you want to see the code that we wrote today it's already it's already pushed up so you can see it here this will give you everything you need the site is again posted at graphcdnprojects.netfly.app you can find it there um max this was a this was a blast i really appreciate you taking the time to come on let's do a little bit of shouting out here we've had rachel with us from white coat captioning all day today thank you so much rachel for being here that is made possible through the support of our sponsors netlify fauna and off zero all of whom are kicking in to make this show more accessible to more people while you're checking out things on the site make sure you go and look at the schedule we have incredible stuff coming up with more being added every day we have we're gonna do a full stack serverless app with next and fauna we have uh some marketing automation with customer io that's gonna be a lot of fun trpc is very cool i have no idea how it works but i'm really excited to learn um super bass n8n automation slinky if you haven't heard about this is is very cool um and like how to write better content and a whole bunch more that i haven't added to the site yet so make sure you head over there hit this add on google calendar button to get it added on your google calendar you can follow on twitch and you'll get notified whenever we go live as long as you keep that bell rung and you can always find us on youtube if you want to re-watch any of the episodes you can just head over to the episodes tab to see those max any uh any parting words for the chat is before we wrap this up well i mean i feel like i'm i'm gonna do one more plug if you don't have the rubber ducky go get the goddamn rubber ducky what are you doing being in jason's chat you don't have the rubber ducky it is perfect when the website works go to get the goddamn rubber ducky it is amazing i have it on my desk all day every day it is the best rubber duck i've ever had it is also the only rubber duck i've ever had because it is the only one that was good enough to sit on my face called the jason thank you so much for having me this little duck is going to listen to me weep as i try to debug why my sight is broken for no reason uh max it's been an absolute pleasure i really appreciate having you on the show uh chat as always thanks for hanging out we're gonna go find somebody to raid i think that's it for this episode so thank you all very much we will see you next time

Channel: Learn With Jason

Views: 648

Keywords: GraphCDN, GraphQL, performance and reliability, smart caching, Max Stoiber, Learn with Jason

Id: _WUc6-ISiKU

Length: 87min 0sec (5220 seconds)

Published: Fri Dec 17 2021