LoginSignup
9
1

More than 1 year has passed since last update.

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

Last updated at Posted at 2021-12-02

Amplify-v4.3.2

はじめに

例えば認証付きで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用意してフロントから呼び出したいなー」というユースケースはままありました。
誰かの役に立てば幸いです。
何か改善や問題等あればコメントいただけると嬉しいです!

宣伝

株式会社start-up studioでは、コーポーレートガバナンス領域のDX推進を目指しております。
その第一弾として、複雑・膨大・専門的という三重苦を抱える決算開示業務のプロセスを劇的に効率化する「Uniforce -決算開示業務ナビゲーション- 」をリリースしました。
ご興味のある方はお問い合わせください!
https://startup-studio.co.jp/news/e4spzygrs/

9
1
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
9
1