Using aws-sdk with amplify and React

Question

I am having trouble using the AWS SDK for Javascript in a React app built with Amplify. I am attempting to write to a DynamoDB table after successfully uploading an image to S3. The image upload currently works but the SDK methods to write to a test DynamoDB table do not.

import React, { Component } from 'react';
import { Auth } from 'aws-amplify'
import { withAuthenticator } from 'aws-amplify-react'
import { Storage } from 'aws-amplify';
const aws = require('aws-sdk'); //"^2.2.41"
    handleSubmit = (event) => {
        event.preventDefault();
        if (this.state.file == null) {
            alert("File Not Chosen")
        }
        else {     
        const file = this.state.file;
        Storage.put(this.state.name, file, {
            contentType: 'image',
            bucket:'myapp-20181030214040-deployment'
        })
        .then (result => console.log(result))
        .catch(err => console.log(err));
        }

           Auth.currentCredentials()
           .then(credentials => {
             const dynamodb = new aws.DynamoDB({
               apiVersion: '2012-08-10',
               credentials: Auth.essentialCredentials(credentials)
             });
             let params = {
                Item: {
                "testKey": {
                S: "test1"
                }
                }, 
                ReturnConsumedCapacity: "TOTAL", 
                TableName: "test"
            };
            dynamodb.putItem(params, function(err, data) {
                if (err) console.log(err, err.stack); // an error occurred
                else     console.log(data);           // successful response
                /*
                data = {
                ConsumedCapacity: {
                CapacityUnits: 1, 
                TableName: "Music"
                }
                }
                */
            });
           })
    }

The first part of the handle submit works, up to the Storage.put, but the DynamoDB putItem method does not seem to do anything despite compiling. Can anyone point me in the right direction in using these together?

user_9336087 · Answer

You could use something like AppSync or API Gateway in front of your dynamo db api.

You can take a look at: https://github.com/aws-samples/aws-mobile-appsync-events-starter-react

For a sample using AppSync and GraphQL (backed by dynamodb)

or: https://github.com/aws-samples/aws-mobile-react-sample

which uses API Gateway to call a REST api to query dynamodb.This can be done easily by first calling amplify add storage and selecting NoSql Database and setting up your table using amplify and then calling amplify add api it will add a bunch of files as a backend for you that you can call to make calls to your dynamo table.

But also in the existing code you might want to try using the sdk with a proper import statement in react like import AWS from 'aws-sdk'; to see if it works.

Using aws-sdk with amplify and React

1 Answers