Amplify APIのfunctionディレクティブでLambdaを呼び出す

はじめに

例えば認証付きでAWS上で関数を実行したい時に、Amplify APIのfunctionディレクティブがとても便利でした。
今回はフロントエンドから特定のLambdaを呼び出す流れについてまとめさせていただきたいと思います。
https://docs.amplify.aws/cli/graphql-transformer/function/

実装

API導入

amplify add api

amplify add apiで追加します。
設定の詳細は省きますが、今回はfunctionディレクティブを利用するのでGraphQLにしてください。

schema.graphql

amplify/backend/api/gqllambda/schema.graphqlが生成されているので、こちらのファイルを編集して定義していきます。

schema.graphql

type Query {
  signup(
    email: String!
    password: String!
  ): String
    @function(name: "signup-${env}")
}

今回はLambda上のsignup-${env}関数を呼び出すようなイメージとなります。
email/passwordのように引数を渡すことも出来ますし、${env}を付与することで環境に応じてLambda関数を呼び分けることも出来ます。
また、他にも便利なディレクティブが多々あり、例えば@aws_cognito_user_poolsを付与することでユーザープール認証済みでないと呼び出せないようにしたりも出来ます。
https://docs.amplify.aws/cli/graphql-transformer/directives/

Push

amplify push

amplify pushで設定した内容をPushします。

呼び出し

フロントからの呼び出しです。
Push時に設定したファイルにschema.graphqlの内容が実装されているのでそれを利用します。

import { API, graphqlOperation } from 'aws-amplify'
import { signup } from '../graphql/queries'

await API.graphql(graphqlOperation(signup, { email: '', password: '' }))

TypeScriptで型を明確にしたい場合は、Push時に生成されたAPI定義ファイルをimportすることで対応出来ます。

おわりに

個人的に初めてサーバーレスでフロントエンドアプリケーションの開発をしたのですが、今回のように「なんかLambda用意してフロントから呼び出したいなー」というユースケースはままありました。
誰かの役に立てば幸いです。
何か改善や問題等あればコメントいただけると嬉しいです！