Call the Create API

Chapter Comments
103

I am calling the create API and have hardcoded the string to test out my API right now:

async function createProfile(param) {
    //apiName first param coming from index.js
    //path second param coming from endpoint path
    const jsonData = "{\"content\":\"hello world\",\"attachment\":\"hello.jpg\"}";
    return API.post('notes', '/notes', {
        body: jsonData
    });
}

But when I check dynamoDB, all I see is an entry created with just the userId and createdDate. There’s no content or attachment values populated from the above jsonData.
I can see this in the cloud watch logs which means the request is making through. But again no data in dynamoDB:

(4ce87038-204b-4d46-982b-15add74b9e5a) Method request body before transformations: "{\"content\":\"hello world\",\"attachment\":\"hello.jpg\"}"

Any idea where I might be wrong and is there any way to debug the serverless create endpoint by stepping through it in some IDE?

104

Hmm any idea why the jsonData is encoded as a string?

You can compare it to what we are doing:

105

I am keeping it in the same format as this example: Can’t I keep it as a string for testing?

{
  "body": "{\"content\":\"hello world\",\"attachment\":\"hello.jpg\"}",
  "requestContext": {
   "identity": {
     "cognitoIdentityId": "USER-SUB-1234"
    }
   }
 }
106

Well on the frontend we are using the Amplify AWS library. It’ll convert it to a string. That example is from when we were testing the Lambda function directly.

107

Its resolved now! As you mentioned, I was stringify-ing the data in the UI. Thanks a lot :slight_smile:

1 Like
108

All of the notes section have an error related to a double / call to API. I replaced this

function createNote(note) { return API.post("notes", "/notes", { body: note, }); }

with this

function createNote(note) { return API.post("notes", "notes", { body: note, }); }

for everywhere there was a ‘/notes’ which wasn’t in the Routes.js

I honestly don’t know if this was the correct approach but it worked and fixed all of my headaches.

109

I think you might have set something else wrong along the way. Compare it to the GitHub sample repo:

110

I checked and all the config is exactly the same as in the example code, but this line 51 as you pasted it

return API.post(“notes”, “/notes”, {

was giving me an error, so I removed the slash and the error was gone

111

Weird. What about this line in your config. Make sure it doesn’t have a trailing slash.

112

If you are having problems with the page redirecting and you’re using Firefox Quantum, use Chrome or any Chromium-based browser. Firefox have this thing where it doesn’t allow CORS to run locally because it’s on HTTP instead of HTTPS

It’s like a safety thingy

113

Oh that’s interesting. Thanks for reporting!

114

Hello Team , First of all Thank you so much for creating and maintaining this project.
This is an amazing work !

I have been working on adding more features to the that implementation and have a question about amplify Storage data upload.

I noticed that you guys use 5MBs of max file size and understand its probably more or less related to S3 max chunk size upload which is also 5MB.

However if you needed to upload files that are larger that 5MBs how would you go about this. Because after removing the limitation in React i still get an error from amazon :

[50:08.104 AWSS3Provider ManagedUpload - error happened while finishing the upload. Cancelling the multipart upload Error: Request failed with status code 400]

it would be great if someone has worked on this and can help… anyway i have a meeting with amazon support this week and will post here any updates later on.

1 Like
115

Hmmm that’s odd because the 5MB limit is very arbitrary. It should word for larger files as well. Did you figure out whats going on?

117

hey Jay, yes. I ended up talking to aws support. Amplify does not support file upload larger than 5gb(this is called multipart upload). I had to use lambda. This is a really bad limitation of amplify.

i apologize for the type . its 5GB not 5MB :frowning:

118

Ah okay that makes sense. It’s a large enough limit for other folks. What are you planning on using these uploads for?

119

well in my case , i guess unlucky :slight_smile: users upload audio conversations for analysis and they are sometimes larger. But its not so bad because i found a workaround with lambda.

1 Like
120

I get this issue as well. Did you find any answer to your question?

121

I am also getting the 403 here. Where are you getting this response output? Thanks

122

hi everyone. i’m getting a CORS issue when I try to add a note (no attachment yet). The weird thing is, the data is going in the database. But I get Network Error returned to me. Please see attached screenshot

Screen Shot 2020-11-12 at 5.14.57 AM
Screen Shot 2020-11-12 at 5.14.57 AM2574×1510 430 KB

I didn’t encounter any of this in the previous chapter though. Any leads please? Thank you.

123

Hi, I tried redoing everything from the start but I got stumped by this same issue - “No ‘Access-Control-Allow-Origin’ header is present on the requested resource”. During my tests, my backend works well, but when I use it with the create frontend, I get this error. I know it’s calling the Lambda function because the data is being displayed in Dynamo DB. Any leads please? Thank you.