Fauna Live! - Using Next.js with Fauna and GraphQL

[Music] hello hello hello thanks for joining up on alive i am joined today by lee robinson lee say hey to everybody hey everyone happy to be here and thanks for having me yeah thanks for joining us uh super exciting topic for me today so we won't we won't put too much into the lead in um we're going to build next yes fauna and craft well and all of those are things that you know a little bit about you balls yes absolutely absolutely you are you are here to be my crutch through next just in particular as i've said in public many many times i am horrible at the front end development it is not a joke um but i think we will get through this together it's an opportunity to learn yeah it's an opportunity for everybody else to watch me fail while i learn which i am totally fine with um it's why we're here right so there is let me drop a link here for everybody there is a blog that we'll be working from and that's there you can just go to fauna.com blog as well hey any ideas about who the author of this blog was very eloquent i don't remind her high quality yeah it was lee whoever wrote it did a good job yeah it was fantastic they're like hey could you review this and i was like i don't need to like this thing this thing beautiful thank you it is a great blog though and it it takes you from uh there's a there's an official starter now for there's a with fauna starter for next js right that you know we'll get into all this we'll show we'll show you um but it takes you all the way through to using graphql uh to get your data in and out of fauna which is you know a pretty easy pretty good pattern so um let's see before we start building you and i were talking right before the stream started next js conference coming up yes you want to talk about that a little bit for the people yeah absolutely um by the way i should have probably introduced myself um for for those who don't know my name is lee uh and i'm the head of developer relations for burcell and xjs which ties in great to nextjs conf because we just announced our second annual next years conf on october 26 next month and yours truly will be there speaking so that's super exciting uh you can go to nextgs.org conf to get your ticket there's some fun ticket options uh i i personally like the retro like 80s themed one with like the cool colors synth wave or whatever they call that that's the one i chose yeah i'm not gonna drop my badge link here in the chat we'll put this one up instead but that is the one i chose so yes big fan of that one too yeah yeah super excited for that so um sign up and we're gonna well we haven't announced it yet but the call for papers link is in the footer if you would if you're interested in speaking so feel free to send over that and yeah we'd love to see everyone there awesome i'll be there uh i hope everyone else will join as well so where were we now that i distracted myself which will happen again throughout this stream be prepared totally fine we were talking about the fauna starter that is in the next js repo right that's right i should probably show everybody what that looks like huh yeah aha so here's the repo as well the fauna graphql guestbook starter we'll get into this with the blog that we'll walk through but the code's up there as well so you can just build this way yourself however you however you want to integrate it into your own project we're going to walk through this today and see some of the other stuff that we can do uh with nexus for cell fauna graphql cool i think i'm not sure but i think this is mahmoud hi mahmoud thanks for joining us we like to we like to call out people that join us okay for the next next jsconf as well so all right let's get into it let's get into it y'all are awesome tired of hearing me talk so um maybe while i get here you can tell everybody what next.js is from the blog maybe people don't know absolutely yeah so nextgs is a front-end framework built on react and essentially it's trying to help give you the best developer experience ultimately ending in the best user experience so we feel that those two are very tightly coupled and correlated by enabling developers to create faster applications we can ultimately create better experiences for the users of your site or your product and that's really core to everything that we do at resale and with next.js so we try to include zero config integrations for tools that you need to use as part of your web development tool chain so linting to make sure that your code is set up properly and following the standards your team wants to uphold you know typescript so that you can have you know warnings and checks before your code gets into production to make sure that it's performing properly and finally we also adversely create the you know optimal platform to deploy and host your next.js applications nice not only nexjs though right it's true it's very tightly integrated with next.js i come from a serverless background so when you write next.js includes you can write serverless functions right there in your app in the api or pages api directory and um and those get deployed directly as functions on burcell which is super convenient so that the integration like you said the developer experience is fantastic you can ship really quickly with it uh but it's not only for next.js so i do want to i do want to call that out because when we get into my account you'll see there's there's a little swelt in there don't yeah oh don't be mad oh no no we we love all of the other frameworks um we maybe we'll have to do another stream on those some other time but yeah we see a ton of people using spelt kit or nux or just you know normal vanilla react if they would like as well too so we try to try to work well with with all the tools that teams are using yeah and so one of the things you point out about next is it's a it's an opinionated version of react and that was one thing i stumbled on early like i am really bad at front end that's not a joke but i had written some react and you need opinions and react there's very much the ecosystem feels like there's a thousand ways to do every task you can imagine and you never really know which one's better whereas uh next.js just sort of narrows that down and makes here's here's a set that you may not love each one individually but together once you're invested in it it all works really well together that's the thing i like about it so it's a fine it's a tricky fine line to balance because there is such thing as too much opinionation as well too where you're putting guard rails really on what developers want to do so the way i look at it when i think about the react ecosystem as a whole is kind of a similar idea of a blessing and a curse that it's a la carte you can pick and choose what you want to do the blessing is that you can mpm install react hyphen pretty much anything with just an incredible you know community of tools and and packages the the con of that or the curse is that for beginners it can be difficult to understand the the trade-offs or when to use one over the other and especially i think that's why you see the rise of like the boiler plates or like the starter kits trying to make it easier for for people to get off the ground i mean that goes back you know as far as you needed a boilerplate for setting up your webpack your babble configuration which ultimately you know led to like create react app and things like that so what we try to do is be opinionated about things that we care deeply about that will help you with your developer experience and ultimately your your user experience but then provide ways for you to opt out when it makes sense when you need to do custom things and also integrate with whatever api or database or you know external service you want to use um and make that feel like a part of the framework yeah and i think i think it feels really nice too so let's uh let's get into it oh wait sidebar you mentioned webpack i'm really mad at the webpack team right now you know why please do i know why no you don't know why they know what they know why i run slam into some uh some import issues with them lately um i will i'll mention it if you can send me a link i will i'll send it to you there's a expansive issue filed so um anyway uh and then the other thing you said was like opinionated frameworks right developers uh this is a jay nyer at aws said developers love opinionated frameworks until the opinions don't match their own i might be paraphrasing a little um but then that that escape hatch needs to be natural and that's another space that i think next js has done a really good job um so let's look at it yeah how do we go here why versailles with next i feel like we've talked about that um why fauna with next.js that's been that's been 30 seconds on here if you're on the fauna channel you probably know why fauna with nexjs fauna is the data api for modern applications that means that you can store and retrieve your data just as you would interact with other apis stripe twilio algolia all the things you're familiar with for your database as well it's got a serverless operations model nothing to provision you don't have to worry about vpcs firewall rules all this stuff right so it really simplifies it scales with your use and you pay for the value you get native graphql api which we're going to use today just a real real easy way to get started you can sign up with your github account for a free tier this hasn't been updated in our docs but we've massively expanded our free tier look for that to be public in the docs this week i feel like since you gave the cfp information i should give this information yeah a little teaser you know a little teaser but free tier is expanded to five gigs of data so a pretty big pretty big jump there in how much data you can use while you're trying to figure out uh is is it a good fit i'm sorry while you figure out that it is a good fit there you go confident i'm confident that you'll get there so that's why fauna why fauna with next like we talked about you can access it via graphql or you can access it as an api like you talked about the enhancements to make it feel integrated so that's why fauna and wyversell yeah you talked about this a little bit the next.js template and the vercell integration we'll see that today in the post super easy i do like to okay the environment variable in my versailles project so let's go ahead and do this here i'm going to take this off screen real quick give me just a second here give ourselves well let me see i got to move back and forth because i want you to see how easy it is to create a database you click create a database and we do next js with fauna here and create and that is provisioning a global globally distributed strongly consistent acid transactions database it's that fast so we're done there this will be our database for today go in here security create a new key and this is the part that i'm going to do off screen don't worry i mean you could i'm going to delete it yeah i tear everything down as soon as we're done anyway and i have been known to expose a secret or two on stream from time to time so you know that's that's why i create new ones um let's see what's the order here we need to do a new project first i think that's right are you wanting to get started by deploying or do you want to start manually from the command line let's start i'm a i'm a command line so let's start manually from the command line and we'll uh nice we'll copy it into our fauna admin key later right once it gets deployed yeah we can do that okay super so mpx my friend create next app that makes sense if you're coming from react and you're used to create react app that fauna example that's the that's the repo that we dropped for you previously i'll put that back in the chat again um yeah basically what this is doing is if you don't provide an example it just sets you up with the you know default starter project for nextgs but then you can also use this example flag which reads from the examples folder on github for next yes and the parameter after that or the argument is the name of the example that you want to use and then the next one is what you're calling your folder locally so gotcha i um i don't know how long this is going to take i may kill this we may we may let it run to completion i just wanted to see what the uh what the default looked like here yeah um shouldn't hopefully take too long yeah um it's it's an m1 mac yeah see i've had really good experience with this so um let's see what we have here for the default one real quick oh do you know the uh level that's what depth oh yeah might need a equals i don't know it's dash l i'm hardheaded about using um there we go there we go okay so yeah this looks like pretty familiar next stuff that we've seen um pages where we include our our usual stuff we there we go all right so there it is that's our default it's that easy um let's go back and let's let's do this the right way what did we copy from before this oh y'all fun fact if you're on a mac if you hold down the alt or option key and then click in the terminal you can put the cursor exactly where you want it oh wow that's using macro over for decades literally and like learned that this year that's pretty nice yeah you're never too old to learn something new i haven't started to get used to using like option um to and then left or right to jump in between the commands that's helped a little bit yeah jump in between words the thing that always gets me with those is underscores don't break words but dashes do and i always get it backwards as i'm running through but you know we all have our problems right so we got we got a with fauna app here next created database generating admin token i did that click new key save the token well i'll save it it's sitting there in my browser where you all can't see it so all right npm run setup let's see it's probably gonna ask me for my key right it will it will and then you can paste it in let's look at what we're gonna do real quick rather than just you know walking through the blog post let's uh let's let's color in the the lines around here scripts set up so here we have we're going to read some files we create some indexes we update some functions so this is just setting up our the schema of our fauna database basically right we're gonna ask for our admin key create a new client check to see whether it's prepared if so don't do it if not then we're gonna walk through the schema that you've already provided looks pretty straightforward right so let's do that now yeah i love including setup scripts like this just to simplify the the onboarding as much as possible so that you don't have to manually type in a schema or you know manually configure things as much as we can automate as possible the better i think yeah i agree i agree uh you got to reduce that friction right i gotta let me see if i can sneak this back in here just a little bit at a time without showing you my key this is what you're going to see those those lines you see successfully imported schema created fauna resource created environment local file was secret and i can clear this and bring it back down always be see protecting your secrets right so so we're at this point right here right we've set up our schema i can get out of here and we can bring this here was just that other window off screen so we can bring this back down and look at what we've created we've got this guestbook entry collection collections are like tables in a document database right it's where your it's where your data is stored in any number of collections we gave ourselves an index latest entries which indexes based on the creation time so this allows us to pick you know the most recent five ten however many via their creation time so that's i can you can see where that's going to be useful and then a function to list those latest entries now this this i definitely want to talk about um user-defined functions in fauna uds that's what this is uh if you're an older developer like me sorry an experienced developer like me then you'll probably remember stored procedures from databases back in the day they are back in a big way and one major advantage of them is all of your business logic lives with your data and so as data has increased in size and scope you don't have to load it out somewhere spend time loading it transferring it across the network perform some compute on it send it back store it again you do it right on top of your data it's also encapsulated so if we invoke this function via graphql from our client or if we invoke it via a serverless function via next.js apis or via long running application that we host in our own data center doesn't matter same inputs in same outputs out and it's it's all being done the same way regardless of what language we call it in as well so big fan of this approach super happy to see it included here in the in the example app is new yeah yeah what's old is new and and this is a really a key component of building successfully with fauna is encapsulating your rules and user-defined functions your business logic here and yeah i'd love to hear more on on the concept of stores procedures or just like user-defined functions in general from you because i think it's one of those things for me as a front end developer turned full stack that you might not see the value of when you're getting started because you haven't built something that requires something like this you're just doing kind of the the crud style applications create read update delete but then once i started to do more full stack work and i was exposed to you know an older mysql database that had you know stored procedures set up or like an ms sql database you start to see the value of some of those things especially when you look at the newer versions of the modern stored procedures we can call them yeah yeah the the easiest on-ramp i would say is if you're familiar with graphql that's especially like your progress like you said as a front-end developer becoming a full-stack developer so when you look at the typing that graphql offers you and that type extends to queries and mutations right each of those queries and mutations is a function call it might be a function call in a server that you wrote yourself with sangria or something in a layer with prisma or user defined function in fauna but it's all kind of irrelevant it's the the graphql schema is the declarative interface of i'm going to give you this and you're going to give me that and there's nothing in there about how and that's that's the really powerful concept because the how can evolve over time i'm going to ask you to list all users authorized to read a document for some kind of security system right and at the time that we would create the system the requirement is you have all full-time employees can read the document contractors can and you implement it and then one day that changes it's all full-time employees who have done this training can read this document and then it's all full-time employees in the new york office during business hours who have completed this training and as these requirements iterate and evolve nothing is changing on the front end i just want to know who's authorized to read this document and you're going to give me back a list of employees and so the fact that that's encapsulated in a single place that can call that business process or that that data access pattern as as a business process is the the real power there uh the the criticism of user-defined functions especially in fauna is uh they can you have to learn how to write them right it's another domain of knowledge to learn we are doing a lot of work like you talked about to smooth that process today sort of everything's hidden if you use graphql uh one of the big things that that i'm trying to do is show you what that hidden magic is with hopefully the end goal of exposing it to you so that you just have a starting point um but again think about your queries and mutations in graphql those are user-defined functions and in fauna they are so it's a one-to-one mapping but conceptually it's the same so i i'm gonna i'm gonna hit pause here because i can go on this topic for a while this is this is a favorite that was helpful right on top of your mind yeah i mean i'm not going to hit pause yet you can also define your your authentication inside the function for attribute based access control which is sort of what we were hinting at by the evolution of that business requirement um you can you can do all manner of work inside that udf um that really makes it a powerful full back end for your your application when you're storing and retrieving data but let us not spend an hour talking about user defined functions let us return to one last thing i want to show this guestbook role that we created has its own key nice and and the guestbook role this is a best practice as well by the way for if you're doing anonymous access which we're doing in this app um the guestbook entry can create write and read guest book entries on that collection and it can read from the index to search but it can't delete or modify the history sidebar on this and it can call the function as well the function allows it to read from the index this history this is a like a mind-blowing feature so i don't want to spend too much time on it fauna has temporality you can query your database at any point in time so that's what's enabled by the history we can build our app today and we'll walk through it and we'll add a couple entries and then we can back up and say at five minutes ago list the most recent entries and the ones newer than five minutes won't appear there because they don't exist yet the ones previous will now be moved up the list so you can see how that can be really useful for debugging moving back and forth through temporal data if you're writing the same data with any set of of consistency and does that just look at like utc timestamps or how does that how has it actually persisted into history let's put a pin in that let's go back to that yeah when we have some data in our database because it's a very very clear answer when we have some documents to look at yeah it's going to be very abstract otherwise time travel yeah we actually call it that from time to time nice yeah you get it you get it all right so back to our blog we've run our setup script that's awesome um connecting to fauna in our application we can use the graphql request library did we need to add this or is this already in there do i have visual studio it's already already set up so this is mostly just explaining how it works a little dive into the example so if you were to um you know cat uh whatever your command was to show the file was it c-less or something like that or you can do it oh yeah that's a that's a z shell plug-in that colorizes less and cat nice yeah nice but uh yeah if you go to the library folder and then fauna basically the the the application structure that i like is to in my next.js apps or just kind of in general is trying to have separate files for each of the different external services that i'm connecting with granted you know on a large enough application this will get a bit more complex but for this example you know inside the library folder we have the fauna file that's the self-containing file with all the logic you need so it's it's managing creating the connection making your graphql client you know passing the the secret that you need to authorize and then you'll also notice we export different functions inside of here for the different queries or mutations that we're going to do right and so these you've done you've hit another one of my best practices which i love which is one user defined function per data access pattern right or one query per data access pattern you can tell that you're doing the same thing here for use in your components uh rather than overloading a single query you're you're splitting them out so that they can evolve over time which is another thing that we that we suggest builders do so this to me is pretty clear uh you know we've got the inline graphql here i'll point out that again per the title of this stream we're using graphql um to access fauna in this blog or in this app rather than uh accessing it directly via fql and the fauna driver which is a great approach i'm a big believer in like change one thing at a time right so if you're changing your graphql provider don't try to change everything out all at once if you're already familiar with graphql learn how graphql works with fauna and then maybe start making modifications so and that's the great thing about graphql too is like sure there's some specifics of fauna here like the timestamp underscore ts but for the most part like the the schemas of graphql that's because it's an independent spec whether you have your graphql database self-hosted somewhere and you're trying to migrate it to fauna you can reuse a lot of that code so you don't have to rewrite everything from scratch yeah yeah it's uh i'm a big fan that does leave me i don't think we talked about the graphql schema here so fauna gives you a graphql playground there's a step in that setup script where you uploaded a graphql schema and we fonify that schema a little bit for you by adding some directives and then like you talked about the the ids and the time stamps in the the data types that you specify then we also give you these queries and mutations the four access patterns and then i can tell you've gone through and defined some more here yourself so good stuff uh it also gives you a playground so we could take these same queries that we have here um or mutations get rid of that leading fella and we could add our own data in here and run them in the playground to make sure that we get the experience that we expect to get we'll probably come back to that in a bit um i did want to touch on one thing real quick object oriented programming um when i think and and this we're taking a walk in the park here so this is we this may be completely wrong i tend to think of a front end as like a collection of composable objects or maybe maybe components aren't objects maybe they are maybe because they're composable maybe it's more functional and so i would have my um like my my entry guestbook entry would you make that a component like an entry list would that be a component and entry details would that be a component how do you think about yeah organizing components objects is there any overlap am i conflating too many things right here yeah so the great thing about react and the revolutionary mental model was that it helps you break things down into components and really deconstruct how you build applications the best mental model in my opinion is the lego brick so where react is essentially you know a series of legos that you can use to construct components next js is the lego starter pack it's like a it's a complete collection of legos that are already um you know given to you in a template or in a constructed form but you still have the flexibility to take out legos or swap legos as you want so because of that component model users have the ability to essentially make their files as long as they would like or as little as they would like componentize as much as they want or as little as they want so from a from an application perspective when you render it out on the page it's really just one big component so you could technically leave it as just an entire component now for maintainability and just collaborating with the team in general we don't recommend that also performance can can get tricky depending on how large your application is so the way that we break it down in xgs is there's really two separate concepts you have your traditional react components which you can see in the components folder and then you have pages and pages are a bit different uh they're a next.js specific thing so when i go to pages slash index this is what we call file system based routing so this is actually you know localhost 3000 the index route of your application is hitting this code so this file exports a component and that's what's served up by react index.js for this uh specific file so if i add more files here pages slash about and i export a component there it's a completely different route in our entire application you know our website dot com slash about and critically next.js optimizes this for you such that if i go to the index route i'm only loading the code for that route if i go to the about route i'm only loading the code for that route so that your application stays fast as you add you know thousands of pages potentially right and and so what i'm hearing is next is not a single page application it's not a giant bundle that gets downloaded all at once because in fact next defaults to static rendering right the default approach yeah so by default what nextjs tries to do is called automatic static optimization so it's trying to help you get the best performance possible whenever it can so for example on an index page if i'm not doing any blocking data fetching so if i'm not doing some kind of api call that needs to happen before the page gets rendered nextgs is going to try to automatically make that static for you and pre-render that content into html now on the single page app versus multi-page app or mpa nextgest was really rooted in the origin of the enriched mpa experience or multi-page app experience which is still respecting that you have different points or entry points into your application across different routes not having a single index page that contains the entirety of your application where routing you know only happens inside of that route so it defaults to the enriched uh mpa experience while also still supporting the single page app experience too if you prefer to do that so it really comes down to your product preference or you know depending on what you're trying to build because you might want that mpa experience if you are you know trying to get the best performance possible right but then there are some benefits that the single page application experience brought to the ecosystem like pre-fetching links when you load the page so if i'm on and that's really what made single page apps seem so fast it felt like you were navigating on a native app on the web because it was really just instant when you clicked to the next part of the application so nextgs tries to give you that as well such that if i'm on the index page i can and i use next link it will pre-fetch for example the about page and make it feel instant when you click on that next route that's a little side tangent but i figured i should mention it no appreciate it helpful for me i i am familiar with the next link and with that characteristic i just want to see if it's in here but it's not that would be yeah we could do it though that one right and then use that instead of the links that we have look that would just be from next so i'm gonna unwind that change yeah um yeah yeah let's get too far afield yet we can come back and and poke around in a minute for sure um let's see so so we've gone through sort of like what happened in fauna we've gone through what gets constructed what we haven't done is run this app yet so i kind of feel like let's just run it and start uh yolo and some data into fauna right nice so compiled successfully we can go back over here we had that running oh it already it already loaded for us it's smarter than me it's there you go pre-fetched feels like a native experience here lee has anybody ever said that before that's where that's the goal yeah i want to i want to grab another question from mahmoud real quick while we're doing this can you generate the graphql schema from the collections not on september 14th 2021 mahmoud not yet but this is a this is a common ask and a common request and and more than this just to keep the two in sync or aligned right um we have a tool fauna schema migrate that allows you to manage your infrastructure as code the biggest ask there is to allow that to manage the graphql schema as well and then to make the other elements aware of the components that are created by the graphql schema that's a pretty heavy lift but it's a pretty important lift so it's something we're we're looking for i would say probably the biggest thing you can do to help that out would be to go to that repo which i'm about to put the link here and plus one official support there's an issue in there um on a schema migrate there's an issue in there official support for fauna schema migrate go give that one a plus one a thumbs up however you you like an official support would include there's also a graphql schema issue in there as well that is the path on the way to what you're asking for there so completely makes sense completely understand the use case i hope to get that out for you soon uh but as of today no so here's our guest book your name my name is rob and i am learning next js and graphql amber cell and a bunch of other stuff should probably focus i'm just testing how much how much do we actually allow ourselves to get in here yeah i don't know if there's any uh input validation length on here no does it have markdown support no no that would be a fun addition though see what happens i love i love just you know oh well your name what emoji avocado you know just just look and see see what gets what gets supported and what kits so far so good right i'm curious how this is gonna render in the dashboard i've i've always wanted to do a project where i start naming my collections emoji functions and other things with emojis it's like the ultimate have you seen people do css css selectors with emojis i love that oh gosh i can't believe that actually works but it does oh that's awful but if i knew how to do it i probably would but this is uh this isn't let's let's bring this back up in a minute because i know um stale while rehydrate revalidate ah very close well at least at least i've read it once i told y'all see this is the thing about making no claims as a front-end developer i have an unlimited mistake balance there you go or for any front-end concepts that i can make so this one yeah this is nice it even renders the emojis yeah it does right there in the console for us so we've got all these in there markdown hello um this you know interesting key value stuff um this time stamp here this is unix timestamp converter epoch converter there we go is that right hey halfway through this i'm like man i hope i hope this is actually what's going on here i hope this is the right answer because we're about to see very publicly um this is the current unix epoch this is the basis the foundation for the app um so let me let's go into the shell for a minute we're going to do a little bit of fql the final query language yeah let's see it two size after before i think we can use null for those um we're going to call a user defined function named list latest entries and this one again because this is like one of the few fql oops herbs that i know the format for because again good practice is to have this be the only one that you're calling in your code right so it's call function names parameter list right in this case it was size before and after i think we can get away with just giving it a five no expects an array with three elements so i think we can make a novo yeah super so give me five entries anytime we only have three so that works out really well now let's look here this is the time that we wrote our last so they're in reverse order here because they're reading this is list latest entries it's chronologically sorted by that index so it's giving us the top five in reverse order this is the middle and this is the first so logically if we take this timestamp and subtract one we shouldn't see anything after that or if we add one then we should only see it as the limit right or we can actually query at that timestamp the format for that one is and it's uh at i'm stamp expression i believe let's uh on a fql app i'd rather get this one right then uh you know i like it i liked it that it showed the time it took to run the query as well in the dashboard that's nice it was like 14 milliseconds or something yeah oh look i got it right oh it's always a good day when i remember signatures yo i look up everything my go-to comment is i can never remember how to find this the length of a string because i can never remember how to find the length of a string in any language um but yeah the time elapsed there you also get information here when we hover this is the metadata about that query itself so how much time did it take by 10 bytes out you can calculate your read ops write ops compute ops which are your pricing dimensions in fauna you can see we didn't write anything so we get a zero that makes sense read ops were 11 because we went all the way across that index and then compute ops are one one compute op is 50 verbs so you'll see that doing this expression again won't change our compute ops so we're going to replace expression with what we had here and for our timestamp we're just going to take let's take the first one and add one to it and so that's one millisecond in the future maybe microsecond i don't know it's one tick in the future after our first entry was created we run this query and we get only that response which to me is is pretty much indistinguishable from magic right we know we have all five or all three in there but we're interacting with the database at a point in time which is this timestamp so again if we were to i'm not sure what happens when you do it exact let's see okay exact it includes it if we only run this part oh yeah hold on i didn't highlight everything that's my fault if we only run this part we get everything again and per our last hypothesis if we change this to be and tick before that you should have i was in a real time i put too many nines time travel time travel doesn't work that way right we're still limited well all right i see what i did you know and there we go highlighted the wrong thing here we go so again we have two so we can see how we can move that timestamp back and i just realized how close that is to my camera when i do that i apologize i'm a mover on stream first principles of live streaming sit very still and don't move and i'm like swift oh i'm always i'm always shifting so i feel i feel that i shift quite regularly we see again like i said the compute ops are at one and we could actually make this same modification inside our application we can go back over here where is our well that's complicated because we're using graphql so there is a path here we could tell graphql in our schema to use a resolver that's a user defined function and then um did you do that in your schema is that how we get there probably is isn't it let's look at the code let's see what we're doing yeah let's spelunk let's excavate list guest book entries query entries you pass all this information so i think what you did is use the resolver yes yes you did very nice use the resolver list latest entries so again this is back to our earlier conversation of udfs and store procedures you've got your type that's coming in and um the guestbook entry and the resolver that is invoked to give you that guestbook entry this is a query that takes no arguments and again returns an array of these guestbook entry types and as you've correctly commented here these are generated by fauna for us so good documentation here like it but because we've done that we can go back over here to our user defined function where are we map over that that's where you're you're paginating against the match the easiest way now i'm going to be honest i don't know how far out i can wrap this with an app so we're going to find out right now we shall find out we're just gonna see what happens here at that time do all that stuff will it take it i'm thinking no i think the query has to first invoke a lambda but yeah yeah i didn't i didn't think that was gonna i didn't think that was gonna fly and it maybe let statement may not allow it either let's see nope allowed it so now what we'd expect over here is if we go back to our project oh that disappeared it recognized that we came back it refreshed the date was that was that stale while revalidate did we just see swr in action is that what just happened there yes so let's put that comment back up here and let's talk about that but let's also see when we have a great game now right i'm so glad all this works you know why it works because you made it not me that's why it works um okay so i am censored rob and stop censoring me actually i shouldn't make light of censorship censorship is a serious issue that affects a number of people let's call it future rob and this message will not appear on the page but it will appear in fauna right because we've defined our latest queries now to stop at that point in time unless it's doing optimistic ui and uh updating the client side cache we're going to find out i don't remember oh the variables the variables but no matter what if we hard reload this page it will revalidate get the new information and it won't see yeah let's see what happens let's see what happens first we expect this to appear in fauna so we'll run that thanks for signing the guestbook it doesn't appear here it looks like it's actually taking the results of the query let's dig into that app real quick first let's check our collections and we have future rob is here along with avocado neither of them are appearing on the page because of our redefining that function so if we go back in here and un redefine map function it's a word and then we go back over to our page there you go i can talk through the swr really quick while we're here so as you visualize there what happened is you refocused on the page and your code automatically went and fetched the latest data and what swr is is a react hooks fetching library that allows you to hook up to your api or your database of choice so you refocused on the page it said hey the data that we have here for the guestbook was stale let's go revalidate this and get the new information and then update our client-side cache of what these guest book entries are and put them on the page is that i'm reading this comment by uh this is mahmoud i think we should have mahmoud join us on stream sometime yeah knows what's going on yeah this is a great this is a great point because basically what happened was when you hit sign and we can pull up the code for this in a second when you hit sign it did an optimistic ui update so it manually updated the client side cache but then it actually got back the real data from the server and the server was saying no no no we're actually going to hide the message from future rob don't show future rob's message and that's why if it's slow you would see the flash so with a slow network here and you hit sign it should still appear instantly okay let's try it um we've got network tools in google chrome we've throttled it down to a slow 3g connection um i'm not going to mess with anything else let's see if we see this briefly it may not appear on stream if it doesn't we'll we'll just disconnect entirely and see what happens right but i i feel like i saw that blink there it's their slow message interesting so that no that's that's what we wanted because we still have the full function so that was slow it went out and it waited until it got back from the server yep before you pull up the code and you go to uh yeah in the index where you're at and then the um the code for triggering the uh on submit you'll notice that we're putting the entry inside of fauna so we're actually taking that payload we're doing the graphql mutation and then this mutate function for swr is saying the the path that we've defined in the initial hook on line 24 that path let's go ahead and or mutate and get the latest information so we if we wanted this to be optimistic what we could do is remove the await from put entry so it's no longer blocking on you saving the data and it's immediately optimistically mutating the client-side cache so then even if your network was slow it would still look as if it happened instantly now there's trade-offs to this the pro is that if you're building something where the majority of the time it succeeds and you want to have an instant uh reaction essentially for this and you're confident in the you know the stability of your infrastructure then this is actually a much better user experience because it immediately appears the trade-off for the con is for kind of mission critical or important things you probably don't want to assume ever like if you're doing signing your payment here you don't want to just assume it works you want to show that loading spinner and make sure that it actually went through yeah that that makes sense as well with a data store like fauna where everything is a strongly consistent transaction when you get back from us that it happened it happened everywhere right every single thing is a strongly consistent transaction so that's probably the model that you'll want to build with unless you have another reason like you talked about earlier like data that's not critical frequently offline to make it network interruption tolerant etc i'm gonna go ahead and send this um this is the quick update now so yeah we still have the slow 3g network we saw that took a few seconds to come back but it should still appear here right away right i think what we'd have to do is go into mutate and tell swr how to add that new data to the cache because what's happening right now it would just be a little bit more code what's happening right now is it's still hitting the api to fetch the data from the server but what you can do is you can actually tell it hey we already know the data it's in the payload we already know what they're trying to add so let's just go ahead and do it for them but you made a great point when you were talking about strong consistency because ultimately this comes down to strong versus eventual consistency and i feel like the swr pattern is generally for applications where you're optimizing for eventual consistency on your front end right i would rather see my data immediately and then eventually you'll see it elsewhere right um now it's it's separate but related from strong consistency in your database right right it's interesting though i think how there's parallels between both of those kind of mental models on how you think through the data structure of your back end as well as your front-end flow yeah i and to a certain extent it's indicative of how you you have to understand at least a little about both right no matter how much you try to abstract away with one or the other no matter how good a front-end framework gets at letting people like me present data from a data store or no matter how good of a service like fauna gets at letting front-end developers think about only storing their data as an api um realistically whole applications are going to there's there's a venn diagram there there's an intersection of the things that you have to think about with your app um and you're gonna have to have a little bit of both at least a working understanding absolutely um if you pull up the index code again i might be able to explain this a little further too if you scroll down to the bottom i believe uh there's it gets static props and what this is doing is it's fetching the latest guestbook entries on the server and computing a static version of the page so when you deploy your page if you weren't using swr you would just see whatever entries it fetched at build time right and then if you added a new entry you wouldn't see anything update because it's not updating on the client side swr is enabling that swr is enabling you to see those updates on the client side the interesting thing here is this revalidate prop which is actually enabling the developer to use eventual consistency without realizing they're using eventual consistency so as a front-end developer you don't even need to really know that but that's what it's doing under the hood so basically you deploy the static page let's say it has you know 10 guestbook entries right and we're telling our application every second we want to go fetch the latest data and make it eventually consistent in all the places where our application is deployed so this happens in the background through the same stale biorevalidate mechanics and eventually all locations are updated with the newest generated version of this page that has the latest guestbook entries so it's non-blocking and it's a again it's a trade-off you make if if the eventual consistency model makes sense here it's a phenomenal way for developers to use that without having to think about the logistics of of how you would structure that which it probably aligns with your mental model coming from databases and backends for how you think about that yeah yeah it does nice all right well hey this has been fantastically thank you for joining us thanks to to everyone else who's joined us in the chat today i know that the apple event is starting in less than one minute and uh it's 15 seconds and i don't want to i'm gonna be there yeah so so we're out of here basically um normally we would raid somebody else's channel but i'm just gonna be honest with myself about where everybody else is going to right now so we got to go visit tim apple yeah that's right tim apple thanks so much for joining us lee thanks to everybody who who came don't forget to uh to subscribe join us next week and uh follow us on twitter our handles are right here so have a good one everybody thanks rob

Channel: Fauna Inc.

Views: 225

Keywords:

Id: cCD62m6yIXk

Length: 60min 32sec (3632 seconds)

Published: Tue Sep 14 2021