I go to my react app and try to submit my note.
I can see my S3 bucket is populated.
But my note is not showing up.
When I submit the form the alert says this:
TypeError: Cannot read property 'length' of undefined
I added some console logs to my create.js because I figured it was the API that is failing me but my lambda doesn’t show any invocations yet it had to go off cause it added my file to S3.
I’m very confused on what’s going on in my AWS instances.
create.js:
import uuid from “uuid”;
import AWS from “aws-sdk”;
const dynamoDb = new AWS.DynamoDB.DocumentClient();
export function main(event, context, callback) {
// Request body is passed in as a JSON encoded string in 'event.body'
const data = JSON.parse(event.body);
console.log(data);
const params = {
TableName: process.env.tableName,
// 'Item' contains the attributes of the item to be created
// - 'userId': user identities are federated through the
// Cognito Identity Pool, we will use the identity id
// as the user id of the authenticated user
// - 'noteId': a unique uuid
// - 'content': parsed from request body
// - 'attachment': parsed from request body
// - 'createdAt': current Unix timestamp
Item: {
userId: event.requestContext.identity.cognitoIdentityId,
noteId: uuid.v1(),
content: data.content,
attachment: data.attachment,
createdAt: Date.now()
}
};
console.log(params);
dynamoDb.put(params, (error, data) => {
// Set response headers to enable CORS (Cross-Origin Resource Sharing)
const headers = {
"Access-Control-Allow-Origin": "*",
"Access-Control-Allow-Credentials": true
};
// Return status code 500 on error
if (error) {
const response = {
statusCode: 500,
headers: headers,
body: JSON.stringify({ status: false })
};
console.log(error);
callback(null, response);
return;
}
// Return status code 200 and the newly created item
const response = {
statusCode: 200,
headers: headers,
body: JSON.stringify(params.Item)
};
console.log(response);
callback(null, response);
});
}
serverless.yml:
service: notes-app-api
# Create an optimized package for our functions
package:
individually: true
plugins:
- serverless-bundle # Package our functions with Webpack
- serverless-offline
- serverless-dotenv-plugin # Load .env as environment variables
provider:
name: aws
runtime: nodejs10.x
stage: prod
region: us-west-2
# These environment variables are made available to our functions
# under process.env.
environment:
tableName: notes
stripeSecretKey: ${env:STRIPE_SECRET_KEY}
resources:
# API Gateway Errors
- ${file(resources/api-gateway-errors.yml)}
# 'iamRoleStatements' defines the permission policy for the Lambda function.
# In this case Lambda functions are granted with permissions to access DynamoDB.
iamRoleStatements:
- Effect: Allow
Action:
- logs:CreateLogGroup,
- logs:CreateLogStream,
- logs:PutLogEvents,
- logs:DescribeLogStreams
Resource: "arn:aws:logs:*:*:*"
- Effect: Allow
Action:
- dynamodb:DescribeTable
- dynamodb:Query
- dynamodb:Scan
- dynamodb:GetItem
- dynamodb:PutItem
- dynamodb:UpdateItem
- dynamodb:DeleteItem
Resource: "arn:aws:dynamodb:us-west-2:*:*"
functions:
# Defines an HTTP API endpoint that calls the main function in create.js
# - path: url path is /notes
# - method: POST request
# - cors: enabled CORS (Cross-Origin Resource Sharing) for browser cross
# domain api call
# - authorizer: authenticate using the AWS IAM role
create:
handler: create.main
events:
- http:
path: notes
method: post
cors: true
authorizer: aws_iam
get:
# Defines an HTTP API endpoint that calls the main function in get.js
# - path: url path is /notes/{id}
# - method: GET request
handler: get.main
events:
- http:
path: notes/{id}
method: get
cors: true
authorizer: aws_iam
list:
handler: list.main
events:
- http:
path: notes
method: get
cors: true
authorizer: aws_iam
update:
handler: update.main
events:
- http:
path: notes/{id}
method: put
cors: true
authorizer: aws_iam
delete:
# Defines an HTTP API endpoint that calls the main function in delete.js
# - path: url path is /notes/{id}
# - method: DELETE request
handler: delete.main
events:
- http:
path: notes/{id}
method: delete
cors: true
authorizer: aws_iam
billing:
# Defines an HTTP API endpoint that calls the main function in billing.js
# - path: url path is /billing
# - method: POST request
handler: billing.main
events:
- http:
path: billing
method: post
cors: true
authorizer: aws_iam