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

Full Amplify video tutorial series -- • AWS Amplify - full tut...
If you want to add data to your React app but don't want to have to build an API then this is the video for you.
Learn how you can use AWS Amplify to create and access a DynamoDB table in the easiest way possible.
Starting Code: github.com/Sam...
Finished Code: github.com/Sam...

[@milesrichie928]

If you're running into an authorization error. In your schema you now need to define an @auth. To give the owner (Whoever is signed in) all privileges by default do this: type Song @model @auth(rules: [{ allow: owner }]) { id: ID! title: String! description: String! filePath: String! like: Int! owner: String! } Then push again and you should be authed.

[@milesrichie928]

You also need to have fields in your item for _lastChangedAt & _version

[@zaydenzhu1585]

Hey Sam, I followed your tutorial and everything works except that unforunately when I fetch data from DynamoDB after I manually add items to it, I always get an empty array (i.e., song list is [] with length 0, no error) no matter what. May I ask if you could advise me? Thank you in advance! :)

[@CompleteCoding]

A few things to check - Is the Dynamo table in the correct region - are the correct values being passed into the fetch - is there anything on the raw data response to indicate what went wrong? You could also check the Amplify Docs. A new version of amplify came out since this video so things may be changed if you're using the new version.

[@arunasrikamakshir2677]

I have the same issue right now, could you explain how you fixed it please

[@yijieyang6863]

Met with the same problem

[@einterval]

I too have had this issue - any updates on this? Thank you

[@phantazzor]

do you need to put JSX to all your files or only to the app ?

[@CompleteCoding]

If you are creating components that render then it'll need to be jsx

[@khandoor7228]

This looks amazing Sam. Also just wanted to thank you, I just got my AWS Developer Cert and your videos helped me do that! Also thanks for using Material-ui, my fav CSS framework!

[@CompleteCoding]

Nice work! Those developer certs aren't easy.

[@patshalaaa]

Awesome ...loved it and subscribed too

[@waytospergtherebro]

Move your hands around a lot to simulate human emotion.

[@rafaelmoraes1483]

Hi Sam, great video! I created an item with an attribute of type stringset on my dynamoDB, and I wrote the graphql schema for that attribute as devices: [String]. When I try to run the API graphql graphqlOperation mutations update, it changes my devices attribute in the dynamoDB to type List from StringSet! Do you know what I have to edit for this not to happen? thanks, Rafael

[@CompleteCoding]

I've not come across this issue before. I know that the schema for storing arrays is always lists (using [{ S: value}] ) and that has been a frustration of mine for a while. I assume that the way amplify is passing the data in graphql is not forcing the type of that array to be SS. If I find a solution to this I'll let you know

[@programmusicuk]

brilliant, thanks Sam, I've been looking forward to sitting down and working through the Amplify tutorials

[@CompleteCoding]

Great to hear!

[@gnw2110]

Sam, I found this video and found this very useful. I followed the same exact steps in the video, however I got "unauthorized" error in the Console from fetching the data. Would you mind telling which code or setting that I should look at? Appreciated!

[@CompleteCoding]

Amplify has a new API so things in this video are slightly out of date. Check the Amplify docs for the newest methods

[@HassanNaveed24]

I am facing the same issue, if you resolved this then please tell me.

[@martyoneill3468]

did you discover this?@@CompleteCoding

[@mikechen467]

it's weird that I can't get access to my DynamoDB items. The console shows "Not Authorized to access songList on type Query" I added below auth but still with no luck. @auth( rules: [ { allow: public, provider: apiKey } { allow: private, provider: iam } { allow: owner } { allow: groups, groups: ["Admin"] } ] )

[@galecogames]

Hey Sam! Hope you are doing well. I have a question, when I type the following line on my code "const clientList = clientData.data.listClients.items" I receive this error: Property 'data' does not exist on type 'GraphQLResult | Observable'. Property 'data' does not exist on type 'Observable'.ts(2339) Any idea on how to fix this? I have watch the steps multiple times and everything seems to be correct, the only difference is that I'm using TypeScript instead of JavaScript like you, not sure if this might be affecting. Any help would be appreciate! Thanks for this amazing tutorial btw.

[@giucof.]

Hello, when I try to fetch the song I get this error:Not Authorized to access listSongs on type ModelSongConnection anyone can help me?

[@CompleteCoding]

There is a new version of amplify which has changed the way that you authorise queries. Search the new Amplify docs

[@RaulGlasgow]

need to add authmode to get this to work

[@themetguns]

1:54 I have a problem, I can’t choose Cognito user Pool in authorization type for the API, please help

[@JC-nw5zv]

Hello I got "unauthorized" error in the Console from fetching the data.

[@normankidhoma9897]

See you in the next one

[@Kylegil00]

when i load the page i get this error in the console. *Error: "Unauthorized" Not Authorized to access listFiles on type ModelFilesConnect* but i can login fine. List files is your song list

[@giucof.]

me too

[@Kylegil00]

@@giucof. This worked for me, this is not the best way but it works. input AMPLIFY { globalAuthRule: AuthRule = { allow: public } } # FOR TESTING ONLY! type File @model @auth(rules: [ { allow: owner,operations:[create,update,delete,read] }, { allow: public, operations: [create,update,delete,read] }, { allow: public, provider: iam, operations:[create,update,delete,read] }, ]) { id: ID! name: String! description: String! content: String! filePath:String like: Int owner:String } When doing the querys i had to change it to: const filedata = await API.graphql({query:listFiles, authMode:"AMAZON_COGNITO_USER_POOLS"});

[@giucof.]

@@Kylegil00 thank you!

[@CompleteCoding]

There is a new version of amplify which changes the way you declare authorisation on a query

[@markkim9765]

Can you link the GitHub repo?

[@CompleteCoding]

Here you go Starting Code: github.com/SamWSoftware/amplify-react-tutorial-project/tree/amplify-login Finished Code: github.com/SamWSoftware/amplify-react-tutorial-project/tree/amplify-db

[@herbertk9266]

Thank you

[@LeonardoArangoCifuentes]

Hello Sam, Thank u again I have this error: Conflict detection (required for DataStore): Disabled and it does not allow me to choose cognito, api key is chosen by default ? Select from one of the below mentioned services: GraphQL ? Here is the GraphQL API that we will create. Select a setting to edit or continue (Use arrow keys) Name: amplifyreactapp Authorization modes: API key (default, expiration time: 7 days from now) Conflict detection (required for DataStore): Disabled ? Here is the GraphQL API that we will create. Select a setting to edit or continue Continue ? Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)

[@CompleteCoding]

This isn't an error I've seen before. I wonder if there was something already set in your AWS account, or a limit on the permissions your IAM user has, which changes what options you have?

[@theincubatorspirit]

Hey bro, please can you make your vs code font size a little bigger. Thank you.

[@CompleteCoding]

What screen size are you watching this on? The font is already on zoom: 3. If I make it any large then I'll have to constantly scroll and that will be more distracting to watch.

[@hazardplayz5173]

I got the "error on fetching songs" after creating a new item in DynamoDB (locations: null, message: "Cannot return null for non-nullable type: 'String'…) Could somebody help as I am stuck here.

[@CompleteCoding]

one of the properties in your Dynamo table doesn't match the property defined in the graphql script.

[@oscarmdiaz]

I have really found this tutorial very helpful in getting a start. Do have a question. Does anyone have a suggestion on how to troubleshoot when there is a 401 error. It is an "UnauthorizedException". Thank you.

[@CompleteCoding]

that usually means you're calling an API endpoint that doesn't exist.

[@Sefkopo]

Great Tutorial Sam I could follow all the steps very well. I have build your app but i am now struggeling to transport this knowledge into my app. I tried to figure out a way to use my existing authentication and userpool witch uses Cognito as well. But i can't figure out how to manage this exactly. I am using "amazon-cognito-identity-js" to authenticate the user and store session data. Do you have any pointers on how you would make that work?

[@CompleteCoding]

If you are using Amplify, you can just manually change the user pool, identity pool and app ID in the aws-config.js that is in the base of the repo.

[@ParagDeshpande99]

Hey can anyone provide info on how can I perform all the above activities on an existing dynamo db table? Whenever I run amplify add api, it creates a new table, instead I need all apis configured to my existing table.

[@CompleteCoding]

this isn't something I've done before but here's probably your best bet. The Amplify docs are ususally pretty good docs.amplify.aws/cli/storage/import/#configuring-iam-role-to-use-amplify-recommended-policies

[@MuhammadAli-jg2xl]

Could you share what VSCode plugins you are using to autocomplete code snippet? thanks

[@CompleteCoding]

It is built into VS Code. Here's a video I made on it kzbin.info/www/bejne/iYXHfKGgdrh6l68

[@retex73]

Covers all the info you want, I just wish I didn't need to play it a 2x speed lol. Please don't take a breath between every word

[@CompleteCoding]

I have a LOT of viewers who are non-native english speakers. I get a lot of messages thanking me for speaking clearly. And as you say you can speed it up 2x

[@christiankiss1736]

beautifully presented. Thank you very much.

[@CompleteCoding]

Thank you :)

[@evanserickson]

Can't add to the dynamo db table. The JSON format doesn't work for me. Why?

[@CompleteCoding]

1. Check that the database exists in the AWS console 2. Look at any error messages in the chrome console 3. Look at the message you get in the network tab of your Chrome devtools when making the create request My guess would be that the data isn't the right structure but that is just a guess.

[@graphiclife5416]

You can easily hack number of likes. Likes counter should be server side.

[@CompleteCoding]

This was more of a way to show a simple mutation in graphql. You definitely could break this if you wanted likes on your song

[@jacovanbiljon]

Great Video! Thank you Sam. It's hard to find good examples of how to "update" a table on DynamoDB. At the moment I'm trying to add a nested object in my table (with '1 : 1' and '1 : many' relationships in the Schema). I've found plenty of examples of how to set up the Schema to do this, but I'm struggling to find examples of how to update the the DynamoDB tables with these connections from React. Do you know where I can find examples / tutorials / documentation that show this?

[@CompleteCoding]

I found this video, not sure if it will answer all your questions but might be a good start. kzbin.info/www/bejne/m4a0p6arhJt4pLc

[@vmailtk5]

How do you stop someone from spamming the like button, ie, a user should only be allowed to press the like button once per song

[@CompleteCoding]

At the moment you can't. To do that you'd have to store which songs a use has liked and stop them from liking a song again. I'm planning to add a few extra videos on the end of this series to add this and a few other bits of functionality

[@nitinjha3718]

Hey Sam for login Page how we show our own login page and connect on amplify?

[@CompleteCoding]

I've actually got a video on creating a custom login screen. Check out the rest of the amplify series in the playlist

[@jiansu]

This is awesome, thank you so much

[@CompleteCoding]

You're very welcome!

[@binluo8263]

If I want to send the DyanmoDB data to other component, what I should do ?

[@CompleteCoding]

There are things called change events in Dynamo where any time you write, update or delete something, you can trigger another service (like lambda). You could use this or you could build a more traditional API which puts the data into Dynamo and then into your other services.

[@CourtSchuett]

This is a very good video. Very helpful and easy to understand.

[@CompleteCoding]

Glad it was helpful!

[@hareeshbadiger8167]

Not able to get data from dynamoDb.. It saying that "the following types do not have '@auth' enabled. Consider using @auth with @model- Todo" How to enable the @auth plz help me

[@CompleteCoding]

Have you followed the full series? In the first video we set up amplify with auth kzbin.info/aero/PLmexTtcbIn_hvPcUm3oAufCtH7dwNAC-g

[@hareeshbadiger8167]

@@CompleteCoding thank you.. right now I am working with listtodus .. when code loads which throwing empty array.. " listTodus: {items: Array(0), nextToken: null}" .. anyway created some data's in dynamo DB. (at you showing in video 17:44)

[@oscargm1979]

@@hareeshbadiger8167 Hello! I have the same issue.I load an empty array.Did you fix the problem? Can you share with me what you did to fix it?

[@binluo8263]

If somebody delete my DynamoDB table which I created fllow you, how can I restore my table ?

[@binluo8263]

I recreate another table OMG~

[@CompleteCoding]

Sounds like you solved it :)

[@BenjaminAugustLiterature]

Extremely well made video. Answered every question I had!

[@CompleteCoding]

I'm really glad it was so helpful.

[@sergezeda9738]

Thoroughly enjoyed this tutorial. Thanks Sam

[@CompleteCoding]

Thanks Serge

[@DrFaseehAhsan]

Can I use this same workflow to work with React Native??

[@CompleteCoding]

I've not done it but I'm almost certain that everything will be the same with Native

[@jamesbotwina8744]

My Songs table was not created in my AWS console. Any reason why this might happen?

[@jamesbotwina8744]

I looked in the wrong location, damn!

[@CompleteCoding]

Haha I've done that so many times. One that often catches me out is being in the wrong region

[@case_tips]

Thank you for awesome tutorialx

[@CompleteCoding]

Glad you liked it so much

[@sureshkhirwadkar]

copied all the code word for word but cannot get the like button to update the number of likes. cannot figure out where i am going wrong at all, copied the code word for word. all compiles fine, just doesn't update in the table.

[@CompleteCoding]

Check the data stored in Dynamo and if it is called 'like' or 'likes'. I did two versions of this and i think I mixed them up at one point.

[@sureshkhirwadkar]

@@CompleteCoding thanks I just copied your code and it worked. even diffchecker couldn't find a difference but yours worked and mine didn't :) great series btw really helpful to those just starting like me

[@CompleteCoding]

@@sureshkhirwadkar I hate those kind of issues. I've had it where it was a single typo or extra comma. Glad the series is good

[@tylermorales9043]

This is exactly what I have been looking for. Thanks so much for the video series!

[@CompleteCoding]

I'm glad the series is useful

[@awswithmicha8665]

Sam, you're a lifesaver! Your videos are exactly what I've been looking for. I've a small question. How would you use `API.graphql(graphqlOperation(createSong, {input : newSong}))` and update the songs array? To be more specific, how do you create a newSong object where the id is generated automatically and other fields are taken from a form?

[@CompleteCoding]

There are two ways to do it. Add a unique ID before passing it into 'newSong'. const newSong = { ...formFields, ID: uuid() } Add the ID in the graphQL resolver. The first option is probably the easiest and the way I would do it.

[@lookbook_letsgo]

Thanks for the video. I want to know how to use existing table in dynamodb in aws amplify too! Could you post it ?

[@CompleteCoding]

I've never tried doing that but from some searching it does look like you can get it all set up.

[@lookbook_letsgo]

@@CompleteCoding Could you give me a search keyword for that?

[@SyedAli-kr6qw]

32:15 great tutorial. One thing I want to share is that onClick needs that empty arrow function otherwise the event will trigger as soon as the page loads.

[@CompleteCoding]

Yes, this is one of those things that caught me out a lot when I first started learning react

[@sivaprasadgalla3883]

if i want create a AWS amplify project I should have AWS account ? or can i use another person AWS account please give the solution

[@CompleteCoding]

Creating your own AWS account would be easiest. Then you have full access to the account. If you use another person's account then they have to give you access. Giving other people full access to your AWS account is not advised so I would be surprised if you could find someone who would let you do this. Any cost you make on the account will be added to their bill

[@sivaprasadgalla3883]

@@CompleteCoding thank you for your response I'm getting error Resource is not in the state stackUpdateComplete Please solve the error

[@CompleteCoding]

@@sivaprasadgalla3883 That sounds like a cloudformation error. Amplify may be using cloudformation behind the scenes. look in there and see what state your amplify stack is in

[@sivaprasadgalla3883]

@@CompleteCoding okay TQ

[@agalloch88]

this video covered exactly what I needed for my project. huge thanks, Sam!

[@CompleteCoding]

Glad it was what you needed

[@alpeAtYT]

Exactly what I've been looking for, thanks for the great content!

[@CompleteCoding]

No problem!

[@marcuszierke7930]

Great video, very detailed explanation - thanks a lot! I was wondering why you didn't mention / show how to access "your" data? Meaning the way you build the app would show all songs to everyone and not the ones that belong to you, right? How does one achieve that? Just returning graphQl query results filtering by userId? E.g. why isn't the owner attribute the userId? Do you have a video showing that as well? Cheers, mate!

[@CompleteCoding]

You can do that in amplify but that requires creating a new query like - getMySongs(). You would then have to define the resolver to limit it to songs where userID == requesterID. I don't have a video on this but will have something similar in an upcoming video on the serverless series I'm making at the moment

[@marcuszierke7930]

Hi @@CompleteCoding , thanks for the reply! That's how I usually set it up as well. I was wondering if there is a logic already implemented in the Amplify-AppSync-GraphQl universe where this kind of happens automatically?

[@marcuszierke7930]

Hey Sam, after days of searching I found a real good article how to do this without resolving the queries / mutations yourself: www.instamobile.io/react-native-tutorials/aws-appsync-react-native/ (make sure to also follow the first part linked on the very top of the article!). I thought this might be helpful for you as well in case you want to do another tutorial with auth. Thanks for the great tutorial! Cheers!

[@phantazzor]

how to get params ? /:id

[@CompleteCoding]

Amplify uses graphql so you don't use query strings. All parameters are passed on the body of the request. If you're talking about creating an API Gateway endpoint then it's event.queryStringParameters

[@asisaasseily1039]

Fantastic tutorial! Thank you so much Sam!

[@CompleteCoding]

Glad you liked it!

[@landk8625]

I got the "error on fetching songs" after creating a new item in DynamoDB (locations: null, message: "Cannot return null for non-nullable type: 'String'…) Could somebody help as I am stuck here. Thank you so much.

[@vmailtk5]

look at the full error, some fields are mandatory but you don't have them filled out

[@landk8625]

@@vmailtk5 Thank you so much. I will try and keep you updated! Merry Christmas!

[@landk8625]

@@vmailtk5 Hi Nadim I have removed the acclamation mark (!) at the end of the {filePath: String} and run amplify push again but the "error fetching song" still there. Please correct me if I am doing something incorrectly. Thanks.

[@landk8625]

It works now!

[@CompleteCoding]

Great. Being able to work through problems is something you'll always have to do as a developer

[@fleminlouis6861]

How to have the same page without auth (for public access)

[@CompleteCoding]

Check out my other video in this series: kzbin.info/www/bejne/on6yh4Nnjp2phcU here's the full playlist if you want to see the rest too kzbin.info/aero/PLmexTtcbIn_hvPcUm3oAufCtH7dwNAC-g

[@fleminlouis6861]

@@CompleteCoding Hi Sam, Thank you amazing content out there.

[@fleminlouis6861]

@@CompleteCoding while creating API in dynamoDB it automatically takes id as primary key, in my case I wont something like ListId.

[@CompleteCoding]

@@fleminlouis6861 When you create the database, you define what the primary key is. In your code you should find the schema at amplify/backend/api/songDB/schema.graphql in there you change the id: ID! to ListId: ID!

[@fleminlouis6861]

@@CompleteCoding thank you for your response. This did not work for me. I tried same approach but in dynamo dB I can still se Id in Partition Key

[@sanjitdaniel4588]

Brilliant! Keep it coming!

[@CompleteCoding]

Thanks! Will do!

great tutorial, congrats!!!

[@CompleteCoding]

Glad you liked it!

[@chatchaikomrangded960]

Love it.

[@CompleteCoding]

Thanks

[@salehalbananh2281]

Perfect!

[@CompleteCoding]

thanks

[@MrRishi24]

Great tutorial, very explanatory and covers all the basics. Thank you Sam.

[@CompleteCoding]

Glad it was helpful!