Working with Data in DynamoDB from React with AWS Amplify - Full tutorial

do you want to learn how you can use aws amplify to connect your front end to your back end databases in this video that is exactly what i'm going to teach you how to do [Music] hi guys my name is sam with complete coding where our aim is to make you into the best developer that you can be in this video we'll be having a look at how we can use aws amplify inside our react app to allow us to access our database on the back end using graphql there's a little bit of setup at the start but then accessing your data becomes really really easy so now we're going to jump into the code and see how we can set all of this up now that we're in the code we can start setting up our app to use amplify to access a database through the api to do this we need to go into our terminal and run amplify add api and this is going to boot us into a cli so the first thing it asks is what kind of api are we going to be using now if you've got a traditional existing rest api you can add that here but for now we're going to be going with a graphql api which is going to mean that we're going to create a new database as well we then need to create a name for this so i'm going to call this song api in here we have a choice of different authentication methods because we've already set up authentication using amplify and cognito we can use the amazon cognito user pool authentication method if you haven't done that you can use i am or you could use an api key now that we've set that up we don't need to do any extra configuration on this part of it so click no i am done so now we're asked if we already have a schema for now we don't have a schema so we can click no and that is going to generate a schema for us there are a couple of different options for different schemas but for this project we're going to be going with a single object with fields this then opens and sets up some extra code inside our amplify setup and it asks us if we want to edit the schema we're going to type y and it's going to take us to this schema.graphql and they've given us a default to do model what we're going to do is we're going to modify this slightly so that it works with our application so we're going to change this to song it's still going to have an id but instead of a name it's going to have a title which is a required string it's going to have as well a description which is also a required string it needs a file path and that is also going to be a string it has a number of likes and that is going to be an int and finally it has an owner and that again is going to be a string that is required now if we save that we have got our schema for what a song will look like so if we go back into our code it is saying that we have some options and we're going to be going with amplify push once this has checked all of the amplified details it tells us that we are going to create the song api and there's going to be no change to the existing amplify react app so it's asking us if we want to continue i'm going to select yes and what this is going to go do is it's going to go away and generate the graphql api so here it's also asking us if we want to generate the code to access that graphql api and i'm going to say yes we're going to be using javascript use the default source and select yes and use all of the defaults for this is just going to generate us some configuration inside our source which is going to make it easier for us to query this graphql api when we need to make changes or access the data this deployment does take a little while so i'll get back to you when that's done but for now it'd be really good if you've learned something new in this video to make sure to smash that like button so that more developers just like yourselves get to learn about this content and become better developers now that that has finished deploying we can see that we get a graphql endpoint which we could hit using something like postman and that would make a request to our dynamo database which has been set up as part of this process instead of that what we're going to do is we're going to scroll down to our app.js file and jump in straight away to adding some code to this to work with our amplify apis to display all of our songs so before we start editing this code i'm actually going to go into my app.js and change it to app.jsx that just means that it works better with our react code now what we're going to do is we're going to add some functionality to this app function to be able to query our graphql database so in here i'm going to create a new function called fetch songs and that is going to be an async function and what we're going to do is we're also going to wrap this all in a try catch just like that so inside our try we're going to say that we're going to get the data from our graphql database so const song data equals await and then we're going to use api dot graph ql and this api we need to import from amplify so import that up here and then that graphql takes a parameter of graphql operation which is also imported from amplify and that takes a parameter of list songs this list songs actually comes from if we look in our source we have graphql queries and there is a function called list songs which has been made for us by amplify to make querying our system and our graphql database much easier we also have get song and inside mutations we have create song opposite update song and delete song so here what we need to do is we need to import that function from the queries js file so import list songs from dot slash so sorry from dot slash graphql slash queries and that means that we're going to get back song data based on the song data this is going to have some extra parameters so we need to get just the list of items so const song list equals song data dot data dot list songs dot items after we've done that what we can do is we can console dot log out the song list and that is where we'll see our data and then we need to store these songs in our state so at the top of our app i'm going to add a new state for songs so we have songs and set songs equals use state and that is going to be an empty array to start with because we've got the song list here we can then do set songs passing in the song list and that is going to update this state which we can then use inside our app inside the error or the catch statement if something goes wrong with this api query or if one of these parameters doesn't exist we need to catch that so console.log and then a string of error on fetching songs and then log out the error itself now that we have this anytime this function gets called it will get all of the songs from the database and it will put it into that song's state this is great but we now need to be able to trigger that and we can use the use effect hook to trigger this once every time this app component is loaded so use effect and this takes a function and that function is going to say fetch songs and call that so if we left it just as this every time this app component re-renders it would recall this fetch songs that fetch songs would then set the state of songs which would cause a re-render which would cause an infinite loop to get around this you can add an empty array as a second parameter to use effect which says only use this once now that we have set this up we can go into our terminal and run npm start and what this is going to do is start our app and we should be able to see when this loads us hitting our api and that's all working this takes a little bit of a time to spin up as the development of this is being built and then we'll be able to see once we've logged in the access to our database so if we now log in so i've got an account with sam at complete coding dot io and paste in my password what's going to happen is it's going to open this up if i open up my inspector i can see that we have a song list with an array of zero this is because there aren't any data points in our database so that's what we're going to do next if we open up a new tab and go to aws what we can do is we can search for dynamodb and then just make sure you're in the right region for the account that you've set up so we set ours up in london because that is where i am nearest to so now we can go to tables and we see it we have this table called song and then a random set of parameters what we can do is we can go into items and click create item now in here we need to make sure this has all the parameters we need so if we go back into our code and into the graphql schema we can copy this and then below here we can start creating our first object so one thing we need to do is we need to make sure because this is all json that all of our keys are wrapped in double strings and then we can start populating this json so the first thing we need to do is add an id and for this we can just enter some random characters the title i'm going to call this my first song the description a test song for our amplify app file path at the moment we don't have one so i'm just going to leave that as an empty string likes i'm going to set that to have four likes and the owner to be sam williams as well as these default parameters we need to add two extra parameters which are required for items in the database the first one is created at and that needs to be a iso date string so to generate that if we go back into our browser and open up an inspector we can write new date dot to iso string just like that and that gets the iso for right now i can copy that paste it as my created act and we also need an updated field two which we're going to set to be exactly the same if we now copy all of that and we can actually cut that out of here as we don't want that extra stuff in our graphql file we can go close our console and paste that into here if we now hit save we can go back into our react app and refresh the page this time we still have the empty my app content but you can see that our song list has one item in the array and it has those details we've just put into our database that shows that our api is working so in the next step what we'll be doing is adding some code to display all of our songs so if we now go back into our code and go down to our app what we can do is we can add some extra content to this code here what we're going to do is after the header we're going to create a new div and that div is going to have a class name of song list inside that song list we're then going to map over all of our songs and create a new element for them so if we do songs dot map and that is going to map over each song and for each song we're then going to present that in a little card the way we're going to do that is by using a system called material ui so if we go into our terminal add a second terminal so we can leave our app running and do npm install dash dash save and then we're going to be installing at material dash ui forward slash core and at material dash ui forward slash icons so whilst this is setting up we can go back into the code and we can get ready to create our little cards so we're going to be returning and i'm going to use normal braces here because we're going to have a lot of lines and this allows us to return a multi-line react element in here we're going to have paper like that and we're going to add some extra parameters to this paper so the variant is going to be outlined and we're going to have an elevation of two and to show you what this is i'm going to jump across into the browser and search for material ui so materialui.com brings you to this site here it tells you how to install it and then if you click on the nav on the left hand side and go into components there is a massive list of components which make creating attractive looking apps much easier if we scroll down to surfaces we then have paper and this is what we're using we're going to use a variant that looks a little bit like this where it's been outlined and it just makes each of the songs stand out from the background a little bit if you want to see what it looks like in white you can click up in the top right hand corner and you can see that it's going to have an outlined border just like this so if we head back into our code we now need to import this mapper and the way that you import it is in here if you look inside the code you can see you can click that button and see that you can import paper from material ui core paper so i'm going to copy that head back into the code and paste that at the top i'm going to reformat this slightly so i'm going to deconstruct this off the structure this paper off the core and save that we now have our paper so on this paper we want to have a card so so it's gonna be a div with song card and inside this the first thing we want is a play button and the way we do that is we use an icon button which again is another thing from material ui so if we scroll up and down in here eventually we will find buttons and in here there's lots of different kinds of buttons there are contained buttons disable buttons text buttons but we're going to be looking for an icon button so here we go we have icon button and then you can import an icon so what i'm going to do is copy this and head over to my code again and paste that in and just line it all up we then also need to import this icon button from material ui core and go back down here obviously as a play button we want to change the delete to play and instead of having a delete icon we can go back into material ui and look for the icons so inside data display there is a list of icons and this has a table somewhere where we can select which of the icons we want to use so i want to search for play and here we have play arrow if i click on that it gives me the code to import that icon i can paste that at the top of my code copy the play arrow icon and replace replace that delete icon so that is a play button at the start as well as having a button we then want to have the song title and song owner i want these to be in a small group so i'm going to wrap them in a div and inside there then i'm going to have a div for song title and that is going to have a value of song dot title and then the next line is going to be another div with a class of song owner and this is going to have properties of song dot owner after the song title i want to be able to allow our users to like a song so i'm going to have another div which is going to allow the people to like or see how many likes each given song has we're going to use the icon button again so i'm going to copy that and this time instead of it being a play it's going to be like so i need to find a different icon back inside our material ui icons we can search for like here we have favorite which is the one i was looking for so i can copy that head back into our code paste that at the top and copy the icon name i can then replace this second player icon with our favorite icon the last thing i want inside this card is the description so i'm going to create one last div and call it song description and in here i'm going to put the value of song dot description and save that now that we all have this and we've still got our node running so if we go into our app we have the header image and then if we scroll down we have the play button my first song by sam williams a heart and then the description i'm going to make a smite modification to this like area and then we need to restyle this so that it works a little bit better the way that we're going to restyle this is in the like area as well as having the button we're also going to have the text of song dot like and go back into our code this will refresh and now we see that it's got the heart symbol and the number of current likes so in our app that is all we need to do in terms of the react but now we want to go into the app.css and change some things so that this app looks a lot nicer the first thing i want to do is make the logo a little bit smaller so change that to 10. i'm going to remove this logo spinner because we don't want a spinning logo and then the main thing is reducing the height of the header from a hundred view height which is the whole page which is why we had to scroll down to five view heights we're also going to change the flex direction and remove that so it now registers in a row if we now scroll down we can remove this keyframes as this is relating to that rotation and we can save this back in the app it now looks a little bit better it's not perfect but it's definitely on the way so now if we go back into our app css we want to add so instead of justifying the content by center in the header because as you saw they're touching each other and that's not great what we're going to do is we're going to change this to be space around and if we save that we now have these set spread out which looks much nicer now we can go down and add some styling for our card so the first thing we want to do is set the song card to have some more styles we want this to be display flex we want to say that we're going to justify the content to be space around and we want to put some padding on this and i'm going to say maybe 5 pixels as well as having the card slightly changed we want to change the song list so that is the div that contains all of the songs so we want to say that the song list and the changes we're going to be making to this are to say that the song list is also display flex and we want to say the flex direction is columns this time because we want to see each of the cards as a new row in there and if we save that for down we can then head back to our code and we see that already this is looking pretty nice there's some minor things that we want to change so if we go back into our code we can add a thing to the song title to make it stand out a little bit more so song title font dash wait and i'm going to go with bold and now when we go back we can see that my song my first song is in bold and that looks a lot better if we go back into our dynamodb into our table and open this up we can actually click on our previous item actions and duplicate and as long as we change the id and save this we'll now have two separate values so in our app when we refresh we now get two different songs so now that we are getting the data we want to be able to update it that means every time someone clicks on the like button the number goes up here but also in the database to do that we need to head over to our code and if we find our like button we can add an on click for this button so after this we need to add an on click and that is going to be a function that calls a new function called add like and here we also want to pass one extra thing in we want to pass in the index of the song inside this list so it's going to be the idx but where's this idx coming from well in this map you can get back just each of the fields or each of the items but if you add a second parameter you can also get the index of each of those so for the first song you'll have the data for the first song and then zero as that is the index for the second song it'll be the second song's data and then idx equals one which is the second index another thing we can do with this index is get rid of the error message we're getting saying that each child should have its own unique key we can do that by adding a unique key to this paper element which is going to be specific to each of the songs so what i'm going to do is i'm going to add a new property of key and in this key i'm going to use a template string and say that this is going to be song and then inputs the index here so i d x just like that and what that is going to do is it's going to mean that each of these children which come out of this mapper are going to be uniquely identifiable this means that react has a better time of re-rendering and it makes everything work that a little bit better now what we need to do is create this ad like function so if we go up to before this return statement and after the fetch songs create our new function so const add like equals an async function and this function takes the index and then goes into our function inside this function we're going to be doing some very similar logic to the fetch songs so we're going to start by wrapping everything in a try catch and that's going to help us catch any errors that happen in this process which means it's easier to use async await syntax if there is an error we are going to obviously console log that out so i'm actually just going to copy the fetch one paste it in and change the description to error on adding like to songs to song and then the error message now we get into the interesting part how do we update it so in the same way that graphql and amplify has given us this queries file it's also given us a mutations file and this mutations file is what we use to update or delete or change things in the database so we have the ability to create songs which we'll be doing in a later video we also have the ability to update songs and delete songs the one that we'll be going for for now is this update song so we're going to copy this update song at the top go back into our code inside app.jsx and then update that data so const song data equals await and we need to do something very similar to this top line here in the fetch so we do api dot graph ql and then into that we pass the graph ql operation and inside here we need to pass the query which is going to be the query the update some query that we got from the mutations file and then we also need to pass an object and that object needs to contain an input which is the data that we are going to update so for us the song data input is going to be the original song but with an extra like so what we need to do is first go back and get all of that data so the song that we're going to be updating is going to be const song equals the list of songs and then we're going to get that by the index so that is why we're passing the index in here so that we can get the exact song that we're working with now we can say that song dot likes sorry song dot like equals song dot like plus one so that's just going to increase the number by one one thing we do have on this song object is a created at and an updated act field and we don't want to pass those into this update because that is handled by graphql itself so we need to delete those fields off this song object so delete song dot created at and delete song dot updated at and that is now going to have our song data if you want you can console log it out here before passing it in but we're going to be passing it in here as our input so our input is going to be the song that we have updated here and it's going to return some song data now that we have that song data we want to update our song list so we're going to create a new song list const song list equals and then i'm going to spread the original list of songs that we're getting from our state we need to do this because if we just change the original list of songs react won't re-render so we need to create a new array with each of the songs in there now that we've got that we can update just the song that we want to update with the new data so song list square brackets idx so that's going to say find me the nth item on this song list and we're going to set it to be song data and as we found in here we also need to add some extra parameters before we actually get to our value so it's going to be songdata dot data dot update song and that is going to be the object that we have just updated now that we've changed that in our own internal song list we want to set songs and pass up that new song list so last thing we need to do is actually import this songs from our mutations so if we find where we have list songs from graphql queries we can also do import update song from dot slash graphql slash mutations and if we save that this should all compile fine and then when we go back into our app we can now click on one of the like buttons and see that it goes up to five if we click it one more time it goes up to six and if we click the second one once that one now goes up to five you might be thinking this is just working in the app and it's not actually updating the database to check that we can refresh the page and we still get the same numbers which means when we're getting it from the database these are the data points we're getting we can also look inside dynamo and if we go into tables we can find our song table go into items and if we scroll across we can see that the database value for the number of likes has also increased in this video we've looked at how we can set up an a new api using graphql and aws amplify what this will do is it will connect your front end react app to a dynamodb database on aws this means you can have a single place for all your data and you can really easily access it but also restrict access only to those people who have logged in to your app if you found like you've learned something new in this video it really helped me out if you smash that like button as it helps the youtube algorithm suggest this video to more developers just like yourselves and if you haven't done already make sure to subscribe down here thank you and i'll see you in that video

Channel: Complete Coding

Views: 24,115

Keywords: AWS, serverless, Serverless Framework, NodeJS

Id: kqi4gPfdVHY

Length: 43min 9sec (2589 seconds)

Published: Mon Aug 17 2020