Amplify GraphQL API を設定する

Amplify の GraphQL API カテゴリーを使用すると、セキュアでリアルタイムの GraphQL API を数分でデータベースをバックに構築できます。GraphQL スキーマでデータモデルを定義すると、Amplify は AWS AppSync で稼働する GraphQL API をデプロイし、Amazon DynamoDB で稼働するデータベースに接続します。認可ルールで API をセキュアにし、AWS Lambda でカスタムユースケースにスケールできます。

最初の API とデータベーステーブルを作成する

Amplify の GraphQL API カテゴリーは、Amplify CLI または AWS Cloud Development Kit (CDK) を使用してデプロイできます。Amplify Command Line Interface (CLI) は、フロントエンドアプリケーション用の AWS クラウドサービスを作成、統合、管理するための統合ツールチェーンです。AWS CDK は、オープンソースの Infrastructure-as-Code フレームワークで、なじみのあるプログラミング言語を使用して AWS クラウドアプリケーションリソースをモデル化およびプロビジョニングするために使用されます。

amplify add api

? Select from one of the below mentioned services:
> GraphQL
? Here is the GraphQL API that we will create. Select a setting to edit or continue
> Continue
? Choose a schema template:
> Single object with fields (e.g., "Todo" with ID, name, description)
...
Edit your schema at <...>/schema.graphql or place .graphql files in a directory at <...>/schema
✔ Do you want to edit the schema now? (Y/n)
> yes
Edit the file in your editor: <...>/schema.graphql
✅ Successfully added resource new locally

# This "input" configures a global authorization rule to enable public access to
# all models in this schema. Learn more about authorization rules here: https://docs.amplify.aws/react/build-a-backend/graphqlapi/customize-authorization-rules/
input AMPLIFY {
  globalAuthRule: AuthRule = { allow: public }
} # FOR TESTING ONLY!
type Todo @model {
  id: ID!
  name: String!
  description: String
}

npm install @aws-amplify/graphql-api-construct

import {
  AmplifyGraphqlApi,
  AmplifyGraphqlDefinition
} from '@aws-amplify/graphql-api-construct';

export class BackendStack extends cdk.Stack {
  constructor(scope: cdk.App, id: string, props?: cdk.StackProps) {
    super(scope, id, props);

    const amplifyApi = new AmplifyGraphqlApi(this, 'AmplifyCdkGraphQlApi', {
      definition: AmplifyGraphqlDefinition.fromFiles(
        path.join(__dirname, 'schema.graphql')
      ),
      authorizationModes: {
        defaultAuthorizationMode: 'API_KEY',
        apiKeyConfig: {
          expires: cdk.Duration.days(30)
        }
      }
    });
  }
}

type Todo @model @auth(rules: [{ allow: public }]) {
  id: ID!
  name: String!
  description: String
}

@model ディレクティブを持つすべての GraphQL type は、自動的に新しい DynamoDB データベーステーブルでバックアップされ、GraphQL クエリとミューテーションを作成、読み取り、更新、削除するために生成されます。

では、変更をクラウドにデプロイしましょう:

amplify push -y

cdk deploy

完了です! API とデータベーステーブルがセットアップされました。

アプリコードを設定する

アプリケーションを API に接続するには、Amplify ライブラリと自動生成された GraphQL クライアントヘルパーコードを使用することをお勧めします。これにより、ユースケースが進化するにつれてさらに最適化するために調整できる理にかなったデフォルトですぐに始めることができます。

Amplify ライブラリをインストールする

Amplify ライブラリを使用して、アプリを GraphQL エンドポイントに接続します。

npm を使用してアプリに Amplify ライブラリを追加します:

npm install aws-amplify

アプリコードで Amplify ライブラリを設定する

import { Amplify } from 'aws-amplify';
import { generateClient } from 'aws-amplify/api';
import config from './amplifyconfiguration.json';
Amplify.configure(config);

const client = generateClient();

✨  Deployment time: 62.86s

Outputs:
BackendStack.amplifyApiModelSchemaS3Uri = s3://.../model-schema.graphql
BackendStack.awsAppsyncApiEndpoint = https://wy5mtp7jzfctxc5w5pzkcoktbi.appsync-api.us-east-1.amazonaws.com/graphql
BackendStack.awsAppsyncApiId = YOUR_API_ID_VALUE_HERE
BackendStack.awsAppsyncApiKey = da2-XXXX
BackendStack.awsAppsyncAuthenticationType = API_KEY
BackendStack.awsAppsyncRegion = us-east-1

import { Amplify } from 'aws-amplify';

Amplify.configure({
  API: {
    GraphQL: {
      endpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql',
      region: 'us-east-1',
      defaultAuthMode: 'apiKey',
      apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx'
    }
  }
});

GraphQL クライアントヘルパーコードを生成する

npx @aws-amplify/cli codegen add --apiId <YOUR_API_ID> --region <YOUR_API_REGION>

npx @aws-amplify/cli codegen

最初のレコードを追加する

次に、GraphQL API からクエリを試します。以下の手順に従って、React アプリからクエリを実行します:

import { generateClient } from 'aws-amplify/api';
import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';
import { listTodos } from './graphql/queries';

その後、GraphQL API コールを使用して最初の todo アイテムを作成します:

const client = generateClient();

const result = await client.graphql({
  query: createTodo,
  variables: {
    input: {
      name: 'My first todo!'
    }
  }
});

テーブルからレコードをクエリする

GraphQL クエリステートメントを使用して、アプリ内のすべての todo をリストアップします:

const result = await client.graphql({ query: listTodos });
console.log(result);

上で作成したレコード My first todo! が表示されます。

レコードを更新する

レコードを更新するには、GraphQL 更新ミューテーションを使用します:

const result = await client.graphql({
  query: updateTodo,
  variables: {
    input: {
      id: '<...>',
      name: 'My first updated todo!'
    }
  }
});
console.log(result);

結果には更新された値が含まれます: My first updated todo!。

レコードを削除する

データベースをクリーンアップしましょう! 削除ミューテーションを使用して todo を削除します:

const result = await client.graphql({
  query: deleteTodo,
  variables: {
    input: {
      id: '<...>'
    }
  }
});
console.log(result);

結果の出力は、レコードが正常に削除されたことを示しています。

GraphQL スキーマを使用してデータモデルを反復する

amplify api gql-compile

amplify push

cdk deploy

npx @aws-amplify/cli codegen

次のスキーマ更新は、基になる DynamoDB テーブルの置換が必要です:

1. モデルの削除または名前変更
2. モデルのプライマリキーの変更
3. モデルのローカルセカンダリインデックスの変更 (secondaryKeyAsGSI が無効になっているプロジェクトのみ適用)

これらの更新の 1 つ以上を含むスキーマ変更をプッシュしようとすると、置換が必要なテーブルのすべてのデータが失われることを説明するエラーメッセージが表示されます。デプロイメントを続行することを確認するには、次を実行します:

amplify push --allow-destructive-graphql-schema-updates

GraphQL API を再構築する

開発中は、テストデータが不正な状態になったり、スキーマに多くの変更を一度に加えたい場合があります。このような場合、スキーマをバックアップするテーブルをすべて「再構築」することができます。これを行うには、ターミナルで以下を実行します:

amplify rebuild api

cdk destroy
cdk deploy

これにより、スキーマ内のモデルをバックアップするテーブルがすべて再作成されます。すべてのテーブルのすべてのデータが削除されます。

次のステップ

成功です! GraphQL API をデータベーステーブルでバックアップして作成し、アプリからクエリとミューテーションを実行する方法を学習しました。

Amplify の GraphQL API 機能でさらに多くのことを学習できます。詳細については以下をご覧ください:

• データベーステーブルとそのアクセスパターンをモデル化する方法
• きめ細かい認可ルールで API をセキュアにする
• 異なるデータベースモデル間の関係を作成する
• GraphQL API にカスタムビジネスロジックを追加する
• 検索と結果集約クエリを実行する
• 機械学習サービスに接続する
• ベストプラクティスと例