Fauna Crash Course - Covering the Basics

what's up guys welcome back to the channel and in this video we're going to be talking fauna now if you've never worked with fauna before this video is for you i'm going to show you the basics of how to implement fauna with an xjs application i'm talking how to create documents update them delete them and even use indexes to make complex queries easy now this video is sponsored by fauna but there's a reason that we've decided to collaborate together so i'm a big fan of fauna and the reason behind this is twofold firstly they allow to use both graphql and their own fql language to get all of your data or update your data or make any queries so i like the flexibility of being able to use graphql when i feel like it or fql if you prefer the second reason is one of the things i hated most about being in the jam stack is connections to databases if you're using a more traditional database you have to sort of maintain database connections and make sure that you don't connect too many times or you have to remember to close those connections too well with fauna that doesn't exist you're making transactional api calls to the database so each time you make a call to the database it's one transaction and you don't have to worry about opening or closing or keeping things connected it's all done via apis so i'm also going to be doing two more videos with fauna over the next two months now these videos are going to be driven by you they're people at home so if there's something you want to learn about fauna let me know in the comments below and i'll make sure to include it in the video because what i want to do is take you through a journey of learning fauna and i really want to make sure i'm covering topics that you care about so if you're ready to learn the basics of fauna let's start digging in and start looking at some code so before we get started and we talk about how to set up fauna and get that working with a project i thought it'd be a good idea to at least explain what we're doing so this is a ui that is essentially a to-do's list that allows you to do a few things first it allows you to add a to-do it allows you to complete a to-do it allows you to delete a to do and it also has this completed section that allows you to see all of the completed twos that have been finished so what we're going to do right now none of this code actually works so if i type something in here and hit add it just refreshes the page if i click this nothing happens and if i click delete again nothing happens so right now it's a very bare bones ui now we're not going to build this ui out it's already be preview for you and you'll be able to find a link in the description to the github that you can use as a template so you just go to the github hit the template button and then you'll be able to clone it from there so now we talked about that let's jump into the fauna ui and talk about how to set up a database once you've signed in and how to get the key that you need so this is the fauna db dashboard when you have logged in to your account now you can see i already have a database here and that's because i was testing and making sure everything worked exactly the way that we wanted but we can create a new database here and i can show you how it all works so when you select create a new database it's going to slide in this version and it's going to ask you what you would like as the name so let's call this to-do's list and let's select a region group now you have a few options here and i'm gonna select united states just because that's the one that's closest to me um you can select europe or classic and depending on which one you select will be a very important piece that we need to talk about so i'm going to select us and it says this region requires that your drive is configured with a specific endpoint so if you select classic here you won't have to put in a specific endpoint it will just hit whatever it needs so i'm going to select us and we'll talk about how to change this setting we're not going to use any demo data we're going to create all of our data ourselves so once you hit create it's going to spin up a new database for you and it's going to say hey create your first collection and now you can think of a collection as a table so if you've come from the world of sequel you can think of it as a table so when you select new collection it's going to ask you for the collection name so we'll call this to do's and then we'll hit save and it will say collections to do is create it now this point you're inside the collection and technically we could write a new document using javascript or we could actually connect this to our project and use this to insert the collections now we are going to come back to this at some point and create an index and this index is a way for you to easily be able to browse and collect the data so if you imagine you wanted to see all of the completed to-do's we could write an index that gives you the option to see all the completed ones all the ones that aren't completed so it makes it really easy to make requests without actually having to worry so now that we have this set up and we have it installed one thing we need to do is create a api key that we can use so select this security button on the left hand side and select new key and then give it a roll of server and then give it an optional name i'll just call this the to do key and hit save and you'll see on the screen right here there is a key it's only displayed once so make sure that you store this somewhere secure so that you can use it over and over again if you happen to be deploying this and you need the key again or you delete your.m local and you need it so once you click off this screen and you you have this key you will won't be able to see it again you'll have to revoke the key and add a new one so just keep that in mind and that's all we need from the setup right now so make sure you copy this and put it inside a.m local and we'll talk about what that dot inflow call should look like right now so here we are in the dot m local and i've created a new uh environment variable here called fauna db secret key and go ahead and ins after the equals drop in your secret key and then we'll be ready to start using fauna db so now we have that the next on our list will be to install the fauna db package that we need so do yarn add fauna db and that will install the fauna db package that we need to make this all work so now we have that and it's installed we're going to be creating a bunch of apis here and each api is going to do a specific thing so we're going to have one api request that does the ads one that does the complete one that does the delete one that does the get all of the to do's and then one more that does the get completed to do so it gets all the ones that have already been completed so under the api we can go ahead and delete this hello.js we won't be needing this and then under this api we're going to create a folder for each one and we can do add dot to do and then another one and call that complete dash to do and another one delete to do and we need the gets here so you can do get completed and finally get to do's so now we have all of these each one of these is going to have an index.js file and i find this option here easier to use in general so this is a preference thing but i like to segregate my api points by folder and then create an index.js inside of them so we're going to start with the add to do's and this is going to give us the ability to create a document inside of a collection now this document is going to take in the title a note created at updated at and if it's completed now one thing to note is the way that the language works with the fql is it's very similar to javascript functions as we're writing this because we're using the javascript driver it's very similar to using javascript functions to create what we want so to use 400 db we need to import that at the bottom so we can do 400 db equals require fauna db and then we need to create the query so we can do const q and i'm just using q as an example so let's actually call it query and say fauna db dot query now that gives us the ability to make queries on behalf of fauna db then we need to tell it that we need to create a client that will allow us to actually make the queries so we do const client is equal to new fauna db dot client and then inside of our client is where we're going to do two things now if you selected classic as your option for where you wanted this done if your options were us europe or classic now if you did classic you won't need this you only need one part of it but if you selected one you're going to need to make sure you use the right domain so because i selected us we're going to need the secret which remember comes from our environmentals here so we can do process.m fauna db underscore secret underscore key now because i selected us we actually need to provide a domain because this key is segmented to that domain so like if you don't tell it that hey this is on a us domain what will happen is it will give you an unauthorized request because it's trying to use just the classic routing and it won't work so we're going to db.us.fauna.com and that will give us the ability to use the us version then we're going to make the api part which is modules exports equals async rec res for request and response and inside of here is where we're going to make our request now inside of our to do components here we have one called add to do and as you can see here we're using two inputs one is for the title and one is for the note so we know that we're going to need to include both the title and the note in our request down to fauna db because those are user inputs so just like any other kind of api request we can actually pull these out from the request body so we can do title common notes and this will destructure these values for us and we can say equals request dot body dot data then we can do our try and catch here so we can do try and this is where we're going to actually make a request to fauna so we can say constdbs equals await client query so we're saying hey we're going to make a client query here and this client query is going to say query which is our former db query here we're going to make a query and say query dot create so we're saying hey we're going to make a create here and we need to tell it which collection so we're going to say query dot collection and then we give it our collection name here so if you forgot what your collection is you can go back to the faunadb dashboard and say if you go to this uh section so db overview you'll see to-do list and then to do's so it's to do this slash to do's so the collection name is to-do's so we can drop that in there now to do's and then we can put a comma here in between our two parentheses and then we can open up our object here and this is the part that we're actually going to pass in data to our query so we say data comma we can say data colon and then another object and then we can give it all the pieces that we know so we want to give it a title and that title is going to come from this so we can do title colon title and then we're going to give it a note so we can say note is equal to note and then we're going to give it two things here the created at and updated at and we can use just date now to give it a date time stamp so we can say and say date dot now and that will give us in uh unix timestamps that we can convert later as needed and so update that will also be date now because technically we have created and updated it at the same time and then we're going to give it a boolean here of complete it i'm going to say false so we're saying when we make this db request here we're going to query and use the create function for the collection to do's and then say this is the data that we want to be included with our request then if it's successful we'll do a response if it's not successful then we'll do something else so underneath this request here we can say rest status is going to be 200 and we'll do json and we can put dbs here and we'll just return everything that gets responded and then we can do our catch statement here so we can say catch e console.log [Music] e so that we know there's an error message and then we can return a status of 500 and inside of our json here we can write error message and then e dot message and that will give us the error message that's responded from our fauna creation so let's format this really quickly and hit save and now we have a nicely formatted piece of code so let's talk it through one more time before we actually attempt to use this so what we're saying here is we want to create a connection to fauna db query and create this client that will allow us to make the queries on our behalf then in our standard next js api response and request we're going to destructure the requestbody.data which is going to hold both the title and the note that the user wants to use as a to do we're going to then attempt to try and connect to our database and make a query based upon a creation using the collections to do's with the data title notes that it was created at what time it was updated at and when it was if it was or is completed and obviously we want to set that to false because they just created this as an option then we're going to respond back with the database response which should be everything inside of our dbs and then we're going to catch e if there's anything we're going to log it out and write an error message so we can hit save here this is ready to be used so now we need to update this add to dues to actually do something so the way the ads to do is going to work is we're going to use use date and then we're going to put both the title and the note in a use state and then use that to create our requests so we can import use date and that's going to come from react and then inside of our function here for add to do's before our return statement we're going to do title set title and that's going to be used and we'll set that to an empty string then we can copy and paste this and set this to note and set note because those are two pieces that we need for our apa requests then we can also set a const here of loading and then set loading because we want the button that we have down here to to have a little spinner or something to show that we're actually doing something at the database level and now we are ready to essentially use this to do some sort of work so right now these input fields don't have any way to handle a uh the value or the unchanged as we go so we need to make some edits there as well but first what i'm going to do is i'm going to actually launch this so we can see it side by side and we can understand both the ui and the code together so we're working in this section here we're looking at this ad to do's and we want these to do's to have the values for both the title and the note of these use dates so that we can track as the user inputs so we can do a value here if the value equals title and that will give you the ability to track this value so we say value equals note so now we have those one thing we need to do is actually handle the unchange so to handle the unchanged we're just going to write two quick constants up here we're going to say const handle title change we're going to set it equal to event and then we're going to just say set title equal to the event target value and that will essentially just say hey every time someone updates this title set the title to that value so now we can take this handle title change and put it as the value here we can say on change equal to handle title change and that will handle title changes then we can just copy this and paste it here and say handle note change and then we'll just set notes equal to the same thing and then we can set the value here on change equal to handle note change now if we hit save here what we'll find is we can enter something in and we can delete them out but this button itself is where the magic happens but we need to disable this button if someone we don't want someone to send fauna db to empty strings right so to to combat that we can do two things we can set this to disabled when the title is equal to an empty string or the note is also equal to empty string and that'll do for now so you'll see it is immediately disabled if i type in one it's still disabled if i type in two it's not so now we have that disabled we can add one more tribute here called is loading and we can set it to that state of loading and hit save so now we kind of have everything ready to go what we need to do now is actually handle what happens when a user clicks the button so the way this is going to work is we're going to make a post request to our api that we created so this api right here so to do that we're going to use fetch now if you've not used fetch before that's perfectly fine i'm going to explain it as we go along but let's hide this sidebar and talk about how fetch works so fetch requires a request option of method post it needs to know what kind of content we're sending and then the body data so we can actually handle this above our state management here we can say const request options and set it equal to an object and then we can say method post then we can set the headers and we'll say the headers are an object and the content type is going to be equal to application slash json so we're telling it we're going to send json to it then we need to send the body so we can give another one here called body and we can say json dot stringify so string fi and inside that we're going to have data and then we inside of that we're going to have title and we're going to set that to title so we're setting an object of the name title to the value of this title then obviously we need notes and then we'll set that to notes and then we can hit save here [Music] and now we have some request options now we have the request options we just need to handle the on submit so underneath our handle change here we can write const on submit is equal to an async function and the first thing we need to do is set the loading equal to true now that will stop a user from multiple requests to our foreign db we don't want that we want them to hit this button and then wait until we're done then we need to prevent the default because we're using a form here we want to prevent the default functionality so we just say e dot prevent default then to use api requests we can use await fetch and what's great about next.js is that you don't need to give it uh the full url you just need to give it a slash then say api slash add dash to do now you'll notice that that matches if we look at our explorer again that matches the api name here but we don't need to add the index.js next shares is smart enough to say hey this index.js is clearly what we want so now we've got that we can say hey please try this out but we also want to send it down all of these request options so we say request options and then we can just do dot then and the dot then here is going to just set the note and the title and loading back to uh default so we can just say set note and let me just word wrap this so it comes down here we can say set note equal to empty string and then we want to set title to empty string and we also want to set loading to false so we can just say comma set loading to false so now we have set loading to false we can also do a dot catch so dot catch so if anything bad happens we can say e and then we'll just do console dot log e and we'll also do comma set loading to false and hit save so let's just talk about this one more time before we actually use it so what we're doing here is saying hey when they on submit set the loading to true prevent you from trying to refresh the page for us then we're going to make a call to our api point with our request options which are here we're going to tell it it's a method of post here are our headers and here is the body we're then going to if it's successful we're going to then set the note the title and loading back to false and if not we'll catch an error message so to use this all we need to do is add the on submit handler to our form so we can just write words on submit equal to on submit and hit save now this is ready to test so we can go to add to do here and type testing one two three exclamation point testing testing and hit add to do now we don't actually know what happened because one when we click this we expect it to be positioned down here so that we can see it but we currently know that we're not actually getting that data from a database and this is just the stock one that i've given to you so that's fine but did it successfully do something or did nothing happen at all so let's go back to 400db and check to see if that's true so here we go testtest123 creator at this time updated at this time and completed equals false so that really does work the way we intended but now we have this if we try and query this data it's going to be a bit of a pain we're going to have to do a very long complicated query to ask for the uncompleted to do's to display right here so that's the power of fauna we can now make an index here and say new index select our to do collection give it a name so let's give it a name of uh to do's index and the terms here which are optional are terms fields which document fields can be searched leaving it back means that you can't specify a document to be searched on so we want to be able to use data dot completed and that gives us the ability to say i want all either all of the completed or all of the non-completed to-do's so if we hit save now we have this like way to search documents so if i set this to fql because ours is a boolean so we need to use the fql option versus a string or a number and if i type the word false in here and type search you can see that immediately that one test to do that we created is returned so now we can use this index to retrieve our to-do's for the bottom section right here so let's go ahead and do that really quick and then we can talk about how we set a completed one and how we can delete one so we're now inside the get to do's api and we're going to make an api very similar to the one that we just made so if we go here to speed up a bit of time we'll take the first top section and drop that in our query and then close out our api request so then we can do try just as we did similarly and then do const dbs equals await client query so we're going to make another query using our client here and then we're going to use query dot map so we want to map over some data query dot paginate so we want to paginate the query and we want the query to dot match so we're telling it we want to match on something and then we're going to use our index so query dot index then we give it the index name so it's to do's index and then we want to say comma false here and remember if you go back to faunadb really quick and we look at this again the to-do's index has this option right data completed is either false or it's true so we're saying hey we want the false option here so anything that is not complete make sure it matches on that first then we can say that we have this query and then we just need one more piece to this query so if after our map section so here in between that we need to do ref and then query dot get ref and then we put a comma here and now we have this query this essentially says hey just get me all of the ones that are referenced in this query then we can say that point if we're successful we should just turn return a status of 200 dot json and then to do's dbs.data so return all the dbs data as to do's then we can do our catch statement so if something terrible happens which you know sometimes it does we can say response.status 500.json and then we'll just do error dot e dot message and that gives us the ability to request all kinds of to do's that have not been completed based upon this false query but what we can actually do is take this and copy it and under our get completed we can make a single line change and make this work as well so in here if we wanted all the completed ones we can set this to true and that will give us the ability to query both completed and uncompleted to do's so now that we have those two what we can do is inside of this to do's we can start making requests to grab the ones that have not been completed yet so we're going to use something called swr which is stale while revalidate which is a nexus uh or at least jam stack specific stairway revalidate and it's one of my ways i prefer to make client queries so to add that all you need to do is do yarn and swr and that will install the package that we need so now that's installed we need to import that at the top so we can say import use swr from swr now this is going to be really good because what swr does if you've never used it before it allows you to make requests and also get updated data if someone for example was to tab off a screen and come back and look at our application we would want them to be able to get the freshest data so we would actually make a request on their behalf behind the scenes and update anything on the screen so we're going to use something called fetcher and fetcher is just the way that we're going to handle our request and we're we're going to return json from it so the easiest way to do this is to do confetti equals dot dot args so we're going to pass in some args then we're going to tell it to use fetch and then dot dot args so we're going to take in the arguments then we're going to make fetch use those arguments and then dot then so at the end just respond back with rest.json then the way to use it is very similar to maybe apollo coin if you've used that before we're going to have a data and an error we're going to say equals use swr so use swr then we're going to pass in the api request so api slash get to do's and then comma fetcher and at that point now we actually have the ability to pass in some some of the fields so then we can do some error handling so we can say if there's an error or if there's no data and if there's an error we can say return div failed to load and then if there's no data we can just say loading and we could put a spinner here or something else but that's not really a requirement for this example so now we have this all we need to do is now handle the data in this section so we can just do a map here and say data to do's dot map and then inside of the map we'll call it a single to do and an arrow and say inside of here for each one of those we should return a to do and inside of that to do should be the data so we can do key equals and then whatever key that we want so i'm going to use to do dot timestamp or ts and then to do equals to do and that will be the data from our returned allotment here so we're saying for each to do here so we're going to pass that along and then we can close this out and hit save now what should happen now is if we go back to our local host and launch the application what we should see now is what's coming back from the database once we've made the updates to the actual um screen here because right now in our to do which handles each individual to do it's just gonna have nothing so we need to fill out the value the id and then the title and the note so we need to pass in the to-do so we can say we're passing in the to-do for this to do the value here is actually going to be the id from the database now the way to get that is to do to do dot ref and that's returned in our requests and then we can do at ref so we want the ref.id and that will give us the value and we can also set the id to that because they are obviously individualized as it is an id we're not going to do this yet so let's do the title which the title will just be to do dot data to do dot data dot title and then for the note it will be very similar it will be to do dot note and hit save and then we have this working so let me just back up one more time because quite a bit happened there so we are getting the to-do's here and we are returning this as the to-dos and we're returning the data from the database then in our to-do's we're requesting that data and then saying if there is any data please just return it and we'll map over that data and we'll pass it along to our application then in the to-do's we're saying give me the value which is the reference id number so that we know which one it is for each value and id and then we want to display the title and the note to the user so now we have all that let's launch our code and i'll meet you back in logos 3000 where you should now see new data so here we are now we can actually see this testing123 test test so let's add another one uh this is great fauna really rocks and click add to do but it didn't actually update at the bottom and i don't see any changes but if i tab out and tab back in now the date is there not ideal but we can fix that by using something called use mutate which we'll get into right now so we're back inside our ad to do here and what we can actually do is make a request to mutate through swr so we can say import here and say import mutate from swr and hit save and then we can use this mutate and what this music does is essentially say hey anybody that's using this api tell them that they have to revalidate our data right now so don't wait 30 seconds don't wait until they tab off i need this data right this second so what we can just quickly do is say inside this then before we set anything to blank or loading we can just say mutate and then give it the api so we just say api slash get to do's make sure we put a slash in the beginning and hit save and then we can just put the comma at the end save it again and then go back to our localhost and now what should happen is now you can see it's instant so we can say f e f e f e hello and hit add and immediately it's there so now we actually have something that works really well so now we only have two things to really do with this section and then we just need to finish completing our completeds so let's work on doing our completed so to speed up some of the time i've just created the same kind of api request now we could extract this all out and make this its own api helper but for this course i want to make sure you understand that this is required for every request so now we need to essentially take something from our to do here and say when somebody clicks the button we want it to do something right so we know that if we send this down we should use the id to handle the changes to complete the to do because the id which is generated by fauna is individualized to each item because heaven forbid someone has the same you know to-do title or to-do name we don't want to update two by accident so we know that's what we're going to get so let's take the id and say request body dot data dot id so similar to our other one we're going to take in something from our request body which is named id and use that to make a request then we can say try and inside of our try statement we're going to connect to the db again so const dbs awaits client.query and say we're going to do an update statement this time so the way the update statement works is query dot update and then we need to give it a reference and the reference we're going to use is the collection plus the id that's generated by fauna so you do query dot update query dot ref and then inside of that we need query collection and then put in to do's because that's our collection name and then we just need comma id so we're telling it hey this has to completely match before we can do anything else so don't try and update any other value except from the one that matches this id in this collection then we can say what data do we want so inside an object we can write the word data and we can just say completed true and that will set the completed variable from false to true and then we do updated at and set it to date dot now and then that query is complete and we can say if there's for some reason an error message we can do catch and we'll set this to e and then inside of here console.log similar to all our other ones res.status 500.json error [Music] e dot message and then we just need our response from this right so we can just do res dot status 200 dot json and we can just use whatever is returned from dbs now we hit save let's talk about this one more time so that we fully understand it before we implement it what we're saying is is hey connect to the database and make a query of the type update then we need a reference to do the update for so we're saying find the reference that has the collection of to do's with the id that's coming from our request if you find it go ahead and set the data equal to true for complete it and update it to write this second then if that success will respond back else respond back with a 500. so now we have that we can just go to our to do here and change this on change value to whatever we need it to be so all we need to unchange to do is complete the to do so we can do that by just taking our request options here as we did with our first post so if you remember in our ad to do's we had this request options so we can copy this because it's exactly the same idea and say we want to make this request option but the data here is going to be data id and then the same as our ref here so we can pull this ref and just drop it in here so now we have the request options all we have to do is make a request to the api so we can say const complete to do equal to an async e and then do prevent default to stop it from trying to do anything funky and then say await fetch and then to the api which is slash api complete to do and send down our request options comma request options so that will send down this section here and then we can do dot then and now that we know about mutate we can actually use mutate to handle them updating the screen for us when it's complete so we can just say we need mutate from swr take the mutate then take the then here and say we need you to do something so why don't you go ahead mutate and then slash api slash get to do's and make sure we spot api right here as well and then we can just handle the catch too so we just say catch e console.log e and hit save and now we have this complete to do that's going to do a fetch to this api complete to do then if it's successful we'll mutate by saying hey go and revalidate that data right now it will say okay i'll make a partial request oh yeah i see that something's changed let me update the screen for you and then we'll catch any mistakes if we've made them then all we have to do is change the on change from console.log to complete to do and hit save so now we should be able to go back to our localhost and test this really quickly so let's open up localhost here and click this button and you can see it gone away and if we click this button it's gone away if we click this button it goes away so that's all working as expected so now all we have left is the delete functionality and the delete functionality works similarly in the sense to this but with some slight variation so let's go back to our code and make those changes we're in our to-do index.js and i've just copied the top section to save time for us i'm going to const id is equal to request body dot value.id so we're going to get the value from our request body and then we're going to do a try again and say try dbs equals awaits client dot query so hey make a query again for us client we'd like to make a query dot delete so we're saying hey go ahead and delete that query.ref so on the reference of query dot collection so on the collection of we'll say to do's and then finally after the to do's we'll do a comma here and say id and we can hit save and say catch and let's just write our catch statement it's the same as every other one so let's just copy one here and say we want this catch and then if we hit save so that we can kind of talk about this before we do the response we're saying hey go ahead and make a query again but this time let's delete whatever we're sending to you let's make sure that the query matches this collection and the id that i'm providing if so go ahead and delete it else if there's an error catch it and then if there is a successful we can do as that is 200 dot json dbs and hit save so now we have this delete functionality and it looks fairly similar to other ones you've done we're just using the delete query and then looking for the reference we can now use this in our delete to do so inside of our delete to do which is in our to do section here this is where we're going to handle the deletion so this value is passed down from props so if you look at this to do here you'll notice that this value for our checkbox is actually this value here which is the reference number so we're using the same reference here and that's passed through our data and if you want to check that out you can look inside our checkbox here and you can see the same values here are used throughout so now we have that value we can take that and use it as part of our request so the first thing we need to do is create request options so request options is equal to method and we'll set that to post then we need to set the headers and the headers will be the same as before so we can just say headers content dash type application slash json comma body and then set the body to json dot stringify and then inside of our string form we're going to have a value here and this value is the value that we're passing along then we can say const delete to do so please delete this to do that will be an asynchronous function and we'll pass in e to handle prevent default and say e dot prevent default don't do anything funky then we do await fetch then api slash delete to do comma request options and then dot then and the dot then as before will do something so for now we'll just do an arrow and what we can do is actually mutate it again so we can do import mutate from swr take the mutate and say hey you know what if it's good mutate it so we'll just say api slash get dash to do's otherwise dot catch e and then we'll say e and then console.log e and then hit save so let's just talk about this one more time before we actually put it in here we're saying hey we're going to send down this value that is our to-do's value then we're going to make this api request to delete to do's and this delete to do's is going to take that id and delete it based upon this reference here so we're going to say hey in this query as long as this id matches go ahead and delete it then if that's successful we'll mutate them otherwise let's log out an error message and then all you have to do is update this click functionality and say to do and hit save now if we go back to our application and test it let's see what happens okay so here we are back in our application and if we click the delete button it should just be removed and there we go so we successfully now deleted this now the only screen left to update with some sort of fauna is this things you have done and we already did the index for that so the api is ready to go we just need to update this page so let's go and check that out so here we are in the completed to do section and what's great about this is that we already wrote most of this code in our previous one so we can do import use swr from swr and then if you go back to your to do's we can take almost all of this and use it as we need so we can copy this code here and drop this in and change the get to dues to get completed and that's our code right here that just is looking for the same index except from when it is set to true so we can hit save here and then all we have to do is take our data so so this is the section we need to update now that we're fetching this data so inside of here we can do a map so we can do data dot to do's and this is just a safety check to make sure optional chaining to make sure that if there's no data we don't display anything and we can say to do so data to do's map to a to do and then inside of here we'll do our return so inside of here's where we're going to return everything so we can cut this and drop it in here and this will be where we do our work so we have a field here called key so we can just do to do dot ts for timestamp and that will handle our key then we can do to do data.title because that's our title field this is our note field so we can just do note and then finally this is the date field which is a bit more complicated because currently we have a unix timestamp and we don't want that we want an actual date so we can just do new date to do dot data dot updated at so the updated time to locale date string and close that out and hit save and at this point this should all work and we should be able to see our completed to-do's so let's go back into our local host and make sure that work and here we go now we have data that is being displayed we have the completed date we have the notes and the titles for each one so now we have a fully functioning website so we can add another to do here so a new to do awesome click add and then that gets added here we can add another one another to do cool and and then we can mark this one as completed and we could delete this one go to our completed and then this gets added with our new to do so everything is working as expected so i really hope you enjoyed this fauna db basics crash course it gave you everything that you could possibly need to use fauna with fql from a next js standpoint now before i finish this video i want to make something clear this was clearly sponsored by fauna but we have free reign so i'm going to be doing two more videos with them and i am allowed to cover any topics that you could possibly want so if you've played around with fauna but you want to do some sort of complex queries or you want to see the graphql version or you want to know how to migrate data from one database provider to 400db we can do all those things if you want to learn how to secure an api using auth0 we could totally do that too i'm open to options and i really hope that you'll leave a comment below and let me know what you want to see because i want to make videos that you want to see and so does fauna so until next time see ya

Channel: James Perkins

Views: 682

Keywords: Fauna Crash Course, Fauna Basics, Fauna Nextjs, Fauna with Next, Next with Fuan, Fauna Crash Course - Covering the Basics, Fauna 2021, FaunaDB, nextjs crash course, next js crash course, nextjs 2021 crash course

Id: ihaB7CqJju0

Length: 58min 23sec (3503 seconds)

Published: Thu Aug 19 2021