Using aws-sdk with amplify and React
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?
javascript reactjs amazon-web-services aws-sdk aws-amplify
add a comment |
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?
javascript reactjs amazon-web-services aws-sdk aws-amplify
add a comment |
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?
javascript reactjs amazon-web-services aws-sdk aws-amplify
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?
javascript reactjs amazon-web-services aws-sdk aws-amplify
javascript reactjs amazon-web-services aws-sdk aws-amplify
edited Nov 14 '18 at 4:10
DarkSuniuM
7881019
7881019
asked Nov 13 '18 at 23:11
eyupeyup
211
211
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
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.
add a comment |
Your Answer
StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");
StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);
else
createEditor();
);
function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);
);
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290879%2fusing-aws-sdk-with-amplify-and-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
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.
add a comment |
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.
add a comment |
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.
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.
answered Nov 14 '18 at 0:52
Nicki KleinNicki Klein
515
515
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53290879%2fusing-aws-sdk-with-amplify-and-react%23new-answer', 'question_page');
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown