Post機能: Back-end(1)

認証機能が実装できたところで、Postを管理するGraphQL APIを作成していきましょう。

GraphQL API

GraphQL APIの作成

$ amplify add apiをターミナルで実行します。いくつか質問されるので、以下のように入力してください。

amplify add api

いくつか質問されるので、以下のように入力してください。

  • Please select from one of the below mentioned services: GraphQL
  • Provide API name: BoyakiGql
  • Choose the default authorization type for the API: Amazon Cognito User Pool
  • Do you want to configure advanced settings for the GraphQL API: No, I am done.
  • Do you have an annotated GraphQL schema? No
  • Choose a schema template: Single object with fields (e.g., “Todo” with ID, name, description)
  • Do you want to edit the schema now? No

GraphQLを選択すると、GraphQLのマネージドサービスであるAWS AppSyncがプロビジョニングされます。AWS AppSyncはIAM認証、API KEY認証、Amazon Cognito User Pool認証、OIDC認証の四つの認証が用意されており、この中の一つ、あるいは複数を同時に使用することが可能です。 ちなみに、RESTを選択するとAWS API Gateway + AWS Lambda + Amazon DynamoDB がプロビジョニングされます[参考]。

Post型の作成

AWS Amplifyでは./amplify/backend/api/BoyakiGql/schema.graphqlを編集することによって、自由にGraphQL APIの挙動をコントロールすることが可能です。 schema.graphqlを編集して、Post(投稿)を管理するAPIを作成しましょう。

以下の内容をコピーして、./amplify/backend/api/BoyakiGql/schema.graphqlを置き換えてください。

type Post
  @model (
    mutations: {create: "createPost", delete: "deletePost", update: null}
    timestamps: null
    subscriptions: { level: public }
  )
  @auth(rules: [
    {allow: owner, ownerField:"owner", provider: userPools, operations:[read, create, delete]}
    {allow: private, provider: userPools, operations:[read]}
  ])
{
  type: String! # always set to 'post'. used in the SortByTimestamp GSI
  id: ID
  content: String!
  owner: String
  timestamp: Int!
}
  • @model(model directive)をつけると、Post型の定義に沿ったAmazon DynamoDB Tableや、CRUDのためのQuery/Mutation/Subscriptionを自動作成します。[詳細]
    • Postをupdateする必要はないので、mutations: ...の引数でupdate用のAPIを作成しない設定にしています。詳細 timestamps:...では、デフォルトで自動的に付与されるupdatedAt``createdAtの属性を作らない設定をします。代わりにAWS Timestamp属性のtimestampを用います。
  • @auth(auth directive)をつけると、Post型に対するQuery/Mutationの認可戦略を実装できます。[詳細]
    • {allow: owner, ...では、Postの作成者(owner)に対して、readcreatedeleteを許可しています。
    • {allow: private,...では、Cognito User Poolsで認証された全てのユーザーに対してreadを許可しています。
  • contentString型のフィールドで、!がついているため必須フィールドです。
  • typeフィールドは後ほど使用します。常に"post"が入ります。

GraphQLには、IDStringIntといったスカラー型が用意されていますが、AWS AppSyncにはこれらに加えてAWSTimestampAWSURLAWSPhoneといった独自のスカラー型が用意されています。[参考]

Amplify Mocking

Amplify Mocking(手元での動作確認)には20002番ポートが利用可能である必要があり、一部の Cloud IDE では利用できないことがあります。 該当するCloud IDEをご利用の方は本手順は実施せず、雰囲気を味わっていただけますと幸いです。

$ amplify pushはAWS CloudFormationのスタックの参照と変更を行うため、それなりに時間がかかってしまいます。 $ amplify mockコマンドを使用すると、$ amplify pushでクラウドリソースに変更反映する前に、変更後の動作確認をローカル環境で行うことが可能です。 一旦、Amplify Mockingを利用してスキーマの挙動を確認してみましょう。

amplify mock api

最後の質問、Enter maximum statement depth3と答えることに注意して、以下のように選択肢に答えていきます。

  • Choose the code generation language target javascript
  • Enter the file name pattern of graphql queries, mutations and subscriptions src/graphql/**/*.js
  • Do you want to generate/update all possible GraphQL operations - queries, mutations and subscriptions Yes
  • Enter maximum statement depth [increase from default if your schema is deeply nested] 3

ここではGraphQLのQuery/Mutation/Subscriptionを行うためのcodegenコマンドの設定を行なっています。 maximum statement depthでは、schema.graphqlのtypeのネスト構造をどこまで読み取るかを設定します。 設定を変えたい場合は$ amplify update codegenコマンドにより同様の設定を行うことが可能です。

立ち上がると、AppSync Mock endpoint is running at http://XXX.XXX.XXX.XXX:20002と表示されます。http://XXX.XXX.XXX.XXX:20002を、ブラウザの検索バーに貼り付けアクセスします。(XXXのIPアドレス部分はご自身の環境によって変化します。また、コンテナをお使いの方はlocalhost:20002にアクセスしてください。)

createPost

まず、Postを作成してみましょう。

  1. 左下のADD NEW Queryと書いてある場所をクリックし、Mutationを選択したのち+をクリックします。
  2. 左のペインにあるcreatePostをクリックし、次図のようにチェックボックスやフィールド埋めてみましょう。
  3. ▶︎をクリックしてGraphQLのMutationを実行します
  4. 右側のペインに結果が表示されます。inputに渡していないidやownerが自動的に付与されていることを確認してください
  5. 後ほどlistPostsの検証をするため、適当にいくつかtimestampの異なるPostを足しておきましょう

現在時刻のUnix Timestampを取得したい場合は、ターミナルで$ date +%sを実行しましょう。

listPosts

次に、作成したPostの一覧を取得してみましょう。

  1. 左下のADD NEW Mutationと書いてある場所をクリックし、Queryを選択したのち+をクリックします。
  2. 左のペインにあるlistPostsをクリックし、次図のようにチェックボックスやフィールド埋めてみましょう。
  3. ▶︎をクリックしてGraphQLのQueryを実行します。
  4. 右側のペインに結果が表示されます。先ほど作成したPostが表示されていることを確認してください
  5. また、表示される順序が作成した順序とはならないこともご確認ください
  6. 確認が終了したら$ amplify mock apiが動いてるターミナルでCtrl + Cを実行し、Amplify Mockingを停止します