AI Enabled GraphQL with AWS AppSync

This app demonstrates how you can use a Lambda function as an AWS AppSync datasource to perform really cool operations and return the result in a GraphQL query. In this example, we build an app that allows someone to put the text they would like to translate into the app, the app then returns the translation into voice for the user to play back.

Getting Started

React Native setup

1. clone the project

git clone https://github.com/dabit3/appsync-lambda-ai.git

2. change directories into the project & install depencies

cd appsync-lambda-ai
yarn || npm install

Creating an S3 bucket

1. Visit https://s3.console.aws.amazon.com/ and click Create bucket

2. Give the bucket a name and choose defaults for all other options

3. Update line 46 in App.js to use the bucket name you just created (replace YOURBUCKETNAME and REGION):

const mp3Url = `https://s3-REGION.amazonaws.com/YOURBUCKETNAME/${sentence}`

Setting up the Lambda function

1. In the AWS dashboard, go to the Lambda console

2. Create a new function by clicking on Create Function

3. Give the function a name, choose the runtime as Node.js 12.x, choose Create a custom role for the role, give the role a name of lambda_ai_role & click Allow.

4. Click Create Function

5. Next, we need to add permissions to the Lambda function in order to access other services (such as S3, Polly, & Translate). To do so, go to the IAM console, go to Roles, find & choose the lambda_ai_role, and add the following policies:

• AmazonS3FullAccess
• AmazonPollyFullAccess
• TranslateReadOnly

6. Next, we need to update and add the actual lambda function we will be running! In the lambda folder of this project, there is a lambda function (index.js) & a package.json file. In lambda/index.js on line 8, replace YOURBUCKETNAME with the bucket name you used when you created the S3 bucket and the REGION where this project lives.

7. Finally, from within the lambda directory install the dependencies and then zip the folder into a zip file using the following command:

zip -r ../translate.zip *

Upload the zip file to Lambda as the function code and click Save

AWS AppSync Setup

1. Create a new AWS ApppSync API, choose custom schema

2. Define the following schema

type Query {
  getTranslatedSentence(sentence: String!, code: String!): TranslatedSentence
}

type TranslatedSentence {
  sentence: String!
}

3. Create a lambda function data source

• Click Data Sources
• Click NEW
• Give the data source a name, choose AWS Lambda Function as the Data source type
• For the region, choose the region where you created the Lamba function
• For the Function ARN, choose the Lambda function you would like to use
• For the Role, choose New Role

4. Add a resolver to the getTranslatedSentence query.

• Click on Schema in the left menu
• On the Right (under Data Types), click on Attach next to the getTranslatedSentence field.
• For the Data Source name, choose the new data source we just created
• Click Save

5. Add AppSync configuration to the project

Next, we need to edit the aws-exports.js file to specify our AppSync configuration. In the root directory of the React Native project, update aws-exports.js with your AppSync credentials:

const awsmobile = {
  'aws_appsync_graphqlEndpoint': 'https://xxxxxx.appsync-api.us-east-1.amazonaws.com/graphql',
  'aws_appsync_region': 'us-east-1',
  'aws_appsync_authenticationType': 'API_KEY',
  'aws_appsync_apiKey': 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx',
}