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

Поделиться
HTML-код
  • Опубликовано: 28 окт 2024
  • НаукаНаука

Комментарии • 144

  • @khandoor7228
    @khandoor7228 4 года назад +4

    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
      @CompleteCoding  4 года назад

      Nice work! Those developer certs aren't easy.

  • @programmusicuk
    @programmusicuk 3 года назад +2

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

  • @tylermorales9043
    @tylermorales9043 3 года назад

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

  • @agalloch88
    @agalloch88 3 года назад

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

  • @SyedAli-kr6qw
    @SyedAli-kr6qw 3 года назад

    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
      @CompleteCoding  3 года назад +1

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

  • @sergezeda9738
    @sergezeda9738 3 года назад

    Thoroughly enjoyed this tutorial. Thanks Sam

  • @BenjaminAugustLiterature
    @BenjaminAugustLiterature 3 года назад

    Extremely well made video. Answered every question I had!

  • @milesrichie928
    @milesrichie928 Год назад +2

    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
      @milesrichie928 Год назад

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

  • @alpeAtYT
    @alpeAtYT 3 года назад

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

  • @CourtSchuett
    @CourtSchuett 3 года назад

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

  • @galecogames
    @galecogames 2 года назад

    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.

  • @asisaasseily1039
    @asisaasseily1039 3 года назад

    Fantastic tutorial! Thank you so much Sam!

  • @zaydenzhu1585
    @zaydenzhu1585 2 года назад +2

    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
      @CompleteCoding  2 года назад

      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
      @arunasrikamakshir2677 2 года назад

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

    • @yijieyang6863
      @yijieyang6863 Год назад +1

      Met with the same problem

    • @einterval
      @einterval 11 месяцев назад

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

  • @patshalaaa
    @patshalaaa 11 месяцев назад +1

    Awesome ...loved it and subscribed too

  • @gnw2110
    @gnw2110 2 года назад +1

    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
      @CompleteCoding  2 года назад

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

    • @HassanNaveed24
      @HassanNaveed24 Год назад +2

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

    • @martyoneill3468
      @martyoneill3468 Год назад

      did you discover this?@@CompleteCoding

  • @sanjitdaniel4588
    @sanjitdaniel4588 3 года назад

    Brilliant! Keep it coming!

  • @mikechen467
    @mikechen467 2 года назад

    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"] }
    ]
    )

  • @jacovanbiljon
    @jacovanbiljon 3 года назад

    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
      @CompleteCoding  3 года назад +1

      I found this video, not sure if it will answer all your questions but might be a good start.
      ruclips.net/video/eUQvsuO6EnU/видео.html

  • @phantazzor
    @phantazzor 3 года назад +1

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

    • @CompleteCoding
      @CompleteCoding  3 года назад

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

  • @rafaelmoraes1483
    @rafaelmoraes1483 4 года назад +1

    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
      @CompleteCoding  4 года назад

      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

  • @christiankiss1736
    @christiankiss1736 2 года назад

    beautifully presented. Thank you very much.

  • @themetguns
    @themetguns 2 года назад

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

  • @MrRishi24
    @MrRishi24 4 года назад

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

  • @Kylegil00
    @Kylegil00 2 года назад +1

    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.
      @giucof. 2 года назад

      me too

    • @Kylegil00
      @Kylegil00 2 года назад +2

      @@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.
      @giucof. 2 года назад

      @@Kylegil00 thank you!

    • @CompleteCoding
      @CompleteCoding  2 года назад

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

  • @marcuszierke7930
    @marcuszierke7930 3 года назад

    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
      @CompleteCoding  3 года назад

      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
      @marcuszierke7930 3 года назад

      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
      @marcuszierke7930 3 года назад

      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!

  • @awswithmicha8665
    @awswithmicha8665 3 года назад

    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
      @CompleteCoding  3 года назад

      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.

  • @Sefkopo
    @Sefkopo 3 года назад

    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
      @CompleteCoding  3 года назад

      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.

  • @JC-nw5zv
    @JC-nw5zv 2 года назад

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

  •  3 года назад

    great tutorial, congrats!!!

  • @case_tips
    @case_tips 3 года назад

    Thank you for awesome tutorialx

  • @normankidhoma9897
    @normankidhoma9897 Год назад +1

    See you in the next one

  • @jiansu
    @jiansu 4 года назад +1

    This is awesome, thank you so much

  • @sivaprasadgalla3883
    @sivaprasadgalla3883 2 года назад

    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
      @CompleteCoding  2 года назад

      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
      @sivaprasadgalla3883 2 года назад

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

    • @CompleteCoding
      @CompleteCoding  2 года назад

      @@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
      @sivaprasadgalla3883 2 года назад

      @@CompleteCoding okay TQ

  • @MuhammadAli-jg2xl
    @MuhammadAli-jg2xl 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад

      It is built into VS Code. Here's a video I made on it ruclips.net/video/STdKnjASGaM/видео.html

  • @binluo8263
    @binluo8263 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад

      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.

  • @hazardplayz5173
    @hazardplayz5173 2 года назад

    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
      @CompleteCoding  2 года назад

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

  • @nitinjha3718
    @nitinjha3718 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад

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

  • @oscarmdiaz
    @oscarmdiaz 3 года назад

    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
      @CompleteCoding  3 года назад

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

  • @evanserickson
    @evanserickson 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад

      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.

  • @DrFaseehAhsan
    @DrFaseehAhsan 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад +1

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

  • @ParagDeshpande99
    @ParagDeshpande99 2 года назад

    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
      @CompleteCoding  2 года назад

      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

  • @hareeshbadiger8167
    @hareeshbadiger8167 3 года назад

    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
      @CompleteCoding  3 года назад +1

      Have you followed the full series? In the first video we set up amplify with auth
      ruclips.net/p/PLmexTtcbIn_hvPcUm3oAufCtH7dwNAC-g

    • @hareeshbadiger8167
      @hareeshbadiger8167 3 года назад

      @@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
      @oscargm1979 2 года назад

      @@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?

  • @chatchaikomrangded960
    @chatchaikomrangded960 3 года назад

    Love it.

  • @salehalbananh2281
    @salehalbananh2281 3 года назад

    Perfect!

  • @LeonardoArangoCifuentes
    @LeonardoArangoCifuentes 2 года назад

    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
      @CompleteCoding  2 года назад

      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?

  • @jamesbotwina8744
    @jamesbotwina8744 4 года назад

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

    • @jamesbotwina8744
      @jamesbotwina8744 4 года назад

      I looked in the wrong location, damn!

    • @CompleteCoding
      @CompleteCoding  4 года назад +1

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

  • @giucof.
    @giucof. 2 года назад

    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
      @CompleteCoding  2 года назад +1

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

  • @lookbook_letsgo
    @lookbook_letsgo 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад +1

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

    • @lookbook_letsgo
      @lookbook_letsgo 3 года назад

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

  • @herbertk9266
    @herbertk9266 Год назад

    Thank you

  • @binluo8263
    @binluo8263 3 года назад

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

  • @theincubatorspirit
    @theincubatorspirit 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад

      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.

  • @markkim9765
    @markkim9765 4 года назад +1

    Can you link the GitHub repo?

    • @CompleteCoding
      @CompleteCoding  4 года назад

      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

  • @vmailtk5
    @vmailtk5 3 года назад

    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
      @CompleteCoding  3 года назад

      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

  • @RaulGlasgow
    @RaulGlasgow 2 года назад

    need to add authmode to get this to work

  • @fleminlouis6861
    @fleminlouis6861 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад

      Check out my other video in this series:
      ruclips.net/video/lMOVP1Y8vOc/видео.html
      here's the full playlist if you want to see the rest too
      ruclips.net/p/PLmexTtcbIn_hvPcUm3oAufCtH7dwNAC-g

    • @fleminlouis6861
      @fleminlouis6861 3 года назад

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

    • @fleminlouis6861
      @fleminlouis6861 3 года назад

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

    • @CompleteCoding
      @CompleteCoding  3 года назад

      @@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
      @fleminlouis6861 3 года назад

      @@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

  • @retex73
    @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
      @CompleteCoding  Год назад +4

      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

  • @phantazzor
    @phantazzor 3 года назад

    how to get params ? /:id

    • @CompleteCoding
      @CompleteCoding  2 года назад

      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

  • @waytospergtherebro
    @waytospergtherebro Год назад

    Move your hands around a lot to simulate human emotion.

  • @graphiclife5416
    @graphiclife5416 2 года назад

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

    • @CompleteCoding
      @CompleteCoding  2 года назад

      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

  • @sureshkhirwadkar
    @sureshkhirwadkar 3 года назад

    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
      @CompleteCoding  3 года назад

      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
      @sureshkhirwadkar 3 года назад

      @@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
      @CompleteCoding  3 года назад

      @@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

  • @landk8625
    @landk8625 3 года назад

    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
      @vmailtk5 3 года назад +1

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

    • @landk8625
      @landk8625 3 года назад

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

    • @landk8625
      @landk8625 3 года назад

      @@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
      @landk8625 3 года назад

      It works now!

    • @CompleteCoding
      @CompleteCoding  3 года назад

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