Select your cookie preferences

We use essential cookies and similar tools that are necessary to provide our site and services. We use performance cookies to collect anonymous statistics, so we can understand how customers use our site and make improvements. Essential cookies cannot be deactivated, but you can choose “Customize” or “Decline” to decline performance cookies.

If you agree, AWS and approved third parties will also use cookies to provide useful site features, remember your preferences, and display relevant content, including relevant advertising. To accept or decline all non-essential cookies, choose “Accept” or “Decline.” To make more detailed choices, choose “Customize.”

Skip to main content

Getting Started Resource Center

Build a Basic Web Application

Task 3: Create a Data Table

In this task, you will create a data model to persist data using a GraphQL API and Amazon DynamoDB

Introduction

Overview

In this task, you will create a data model to persist data using a GraphQL API and Amazon DynamoDB.  Additionally, you will use AWS Identity and Access Management (IAM) authorization to securely give our services the required permissions to interact with each other. You will also allow the Lambda function you created in the previous task to use the GraphQL API to write to your newly created DynamoDB table using an IAM policy.

Key concepts

Amplify backend: Amplify Gen 2 uses a full stack TypeScript developer experience (DX) for defining backends. Simply author app requirements like data models, business logic, and auth rules in TypeScript. Amplify automatically configures the correct cloud resources and deploys them to per-developer cloud sandbox environments for fast, local iteration.

Implementation

5 minutes

AWS Amplify

AWS AppSync

Troubleshooting Amplify

Learn about Data

Set up Amplify Data

1. Update the resource file

On your local machine, navigate to the amplify/data/resource.ts file and update it with the code in this file. Then, save the file.

  • This code will define the schema for the UserProfile data model using a per-owner authorization rule allow.owner() to restrict the expense record’s access to the creator of the record

  • It also uses the field profileOwner to track the ownership, and configures the authorization rule to allow the postConfirmation resource. 

  • Granting access to resources creates environment variables for your function, such as the GraphQL API endpoint.

Screenshot showing the project folder structure in a web application tutorial, highlighting the 'resource.ts' TypeScript file within the 'data' and 'post-confirmation' directories under 'amplify/auth'.

2. Deploy sandbox

Open a new terminal window, navigate to your app's root folder (profilesapp), and run the following command to deploy cloud resources into an isolated development space so you can iterate fast.

npx ampx sandbox
Screenshot of a terminal showing the 'npx ampx sandbox' command and options for starting sandbox mode for Amplify backend deployments. The image is part of an AWS Amplify tutorial for deploying web apps using sandbox environments.

3. View confirmation message

Once the cloud sandbox has been fully deployed, your terminal will display a confirmation message.

Screenshot of a Mac terminal showing AWS Amplify profiles app configuration, CloudFormation stack ARN output, and sandbox deployment status. The console displays environment variables and completion messages for deploying an Amplify app using Node.js and AWS services.

4. Verify outputs file is added to your project

Verify that the amplify_outputs.json file was generated and added to your project.

Screenshot of a file explorer showing the folder structure of a React project named 'profilesapp' with the file 'amplify_outputs.json' highlighted. This file is located in the root directory and is used for AWS Amplify configuration outputs.

5. Generate GraphQL client code

Open a new terminal window, navigate to your app's root folder(profilesapp), and run the following command to generate the GraphQL client code to call your data backend.

Note: You will need to update the following command to use the path to the post-confirmation folder that you created in the previous step. For example: npx ampx generate graphql-client-code --out amplify/auth/post-confirmation/graphql.

npx ampx generate graphql-client-code --out <path-to-post-confirmation-handler-dir>/graphql

Amplify will create the folder amplify/auth/post-confirmation/graphql where you will find the client code to connect to the GraphQL API.

Screenshot of a directory structure for a project named 'profilesapp,' focusing on the 'amplify/auth/post-confirmation/graphql' folder, which contains TypeScript files: API.ts, mutations.ts, queries.ts, and subscriptions.ts. This image is used in Module 3 of a tutorial on building a basic web application, illustrating GraphQL integration in the project.

Modify Lambda function to connect to the API

1. Modify the handler file

On your local machine, navigate to the amplify/auth/post-confirmation/handler.ts file and replace the code with the code in this file. Then, save the file.

This code configures the Amplify using the env variables and sets the authorization to use IAM. It then generates a data client using the generateClient() function. Finally, it uses the data client to create a user profile by setting the email and owner based on the attributes of the signed-up user.

Screenshot showing the folder structure of a web application project with the 'handler.ts' file highlighted in the 'amplify/auth/post-confirmation/graphql' directory, used in Module 3 of the Build a Basic Web Application tutorial.

Conclusion

You have created a data table and configured a GraphQL API to persist data in an Amazon DynamoDB database. Then, you updated the Lambda function to use the API.