The guide to connect AWS Amplify to any (AWS) service 2.0

I have written a few blogs about Amplify. One of my previous blogs was about how you can connect AWS Amplify to each AWS service with AWS Lambda and include the AWS SDK.

AWS SDK 2.0

When you did

yarn install aws-sdk

the full aws-sdk package (57MB) was installed and then you were able to import services like:

const AWS = require("aws-sdk");
AWS.config.region = "eu-west-1";
const pinpoint = new AWS.Pinpoint();

AWS SDK 3.0

With the release of @AWS-SDK 3.0 you are able to do modular package imports in React Native and Lambda now. For example if your want to access S3 (7 MB) in React Native without the Amplify framework. You can run:

yarn install @aws-sdk/client-s3

Look into this tutorial for more code examples:
https://docs.aws.amazon.com/sdk-for-javascript/v3/developer-guide/getting-started-react-native.html

Example React Native Component

In this example I will create a GeofenceCollection in the AWS Location service. I am making use of AWS Amplify for Authentication via Cognito, the main component is wrapped in withAuthenticator and I have logged in with a known user.

import React, { useEffect, useState } from "react";
import { StyleSheet } from "react-native";
import EditScreenInfo from "../components/EditScreenInfo";
import { Text, View } from "../components/Themed";
import "react-native-get-random-values";
import "react-native-url-polyfill/auto";
import Auth from "@aws-amplify/auth";
import {
  LocationClient,
  CreateGeofenceCollectionCommand,
} from "@aws-sdk/client-location";
import awsconfig from "../src/aws-exports"; // if you are using Amplify CLI

function TabOneScreen() {

  useEffect(() => {
    const CreateGeofenceCollection = async () => {
      const credentials = await Auth.currentCredentials();
      console.log(credentials);
      const client = new LocationClient({
        credentials: Auth.essentialCredentials(credentials),
        region: awsconfig.aws_project_region,
      });
      try {
        await client.send(
          new CreateGeofenceCollectionCommand({
            CollectionName: "Ramon",
            PricingPlan: "RequestBasedUsage",
          })
        );
      } catch (e) {
        console.log("Error", e);
      }
    };
    CreateGeofenceCollection();
  });

  return (
    <View style={styles.container}>
      <Text style={styles.title}>Tab One111</Text>
      <View
        style={styles.separator}
        lightColor="#eee"
        darkColor="rgba(255,255,255,0.1)"
      />
      <EditScreenInfo path="/screens/TabOneScreen.tsx" />
    </View>
  );
}

export default TabOneScreen;

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: "center",
    justifyContent: "center",
  },
  title: {
    fontSize: 20,
    fontWeight: "bold",
  },
  separator: {
    marginVertical: 30,
    height: 1,
    width: "80%",
  },
});

Make sure you add a policy to the authenticated cognito role:

{
    "Version": "2012-10-17",
    "Statement": [
        {
            "Sid": "VisualEditor0",
            "Effect": "Allow",
            "Action": "geo:CreateGeofenceCollection",
            "Resource": "arn:aws:geo:REGION:ACCOUNTID:geofence-collection/*"
        }
    ]
}

More resources:

AWS-SDK V3 API Docs

https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/index.html

AWS SDK V2 API Docs

These docs are much better, to understand the input params.
https://docs.aws.amazon.com/AWSJavaScriptSDK/latest/

Blog about performance improvement

https://aws.amazon.com/blogs/developer/modular-packages-in-aws-sdk-for-javascript/

Launch announcement

https://aws.amazon.com/blogs/developer/modular-aws-sdk-for-javascript-is-now-generally-available/

Polyfil import

I had some unclear errors, but you need to install and import two additional packages.

import "react-native-get-random-values";
import "react-native-url-polyfill/auto";

See this issue and documentation:
https://github.com/aws/aws-sdk-js-v3/issues/2288#issuecomment-824454312
https://github.com/aws/aws-sdk-js-v3#getting-started

About me

I am a doing (side)projects with technology like AWS Amplify, ReactJS, React Native and EXPO. I am an AWS community builder. I am a huge fan of AWS Amplify and blog about certain topics that come along with it. If you have any questions related to the framework, React of React Native then you can always reach out to me.

Twitter

Do you want to be updated about new blogs?
Follow me on twitter: https://twitter.com/ramonpostulart

Comments

[kieronjmckenna]

This is helpful, but it seems like we need to create a new client for every operation which is not ideal. Any way to have a centralised client?