アプリコードをAPIに接続する
このガイドでは、Amplifyライブラリを使用してアプリケーションコードをバックエンドAPIに接続します。Amplifyライブラリのインストールと設定方法について説明します。
開始する前に、以下が必要です:
- Amplify CLI経由またはベースのAWS AppSyncサービス経由で既にセットアップされたGraphQL API。
- セットアップされたフロントエンドアプリケーション。アプリのセットアップについては、プロジェクトセットアップ: アプリケーションを作成するを参照してください。
- npmがインストールされていること
Amplifyライブラリのインストール
Amplifyライブラリは、GraphQL APIに接続するために推奨されるクライアントライブラリです。Amplifyクライアントライブラリをインストールするには、フロントエンドのルートフォルダに移動し、ターミナルで次のコマンドを実行します:
npm install aws-amplify@^5Amplifyライブラリの設定
次に、ライブラリを設定して、Amplify CLIでプロビジョニングされたAPIまたは既存のAppSync GraphQL APIに接続します:
バックエンドをデプロイすると(amplify push)、aws-exports.jsファイルが生成されます。このファイルには、APIのエンドポイント情報と認証設定が含まれています。
import { Amplify } from 'aws-amplify'import awsconfig from './aws-exports'
Amplify.configure(awsconfig)アプリコードをGraphQL APIに接続するには、2つの設定を提供する必要があります:
- APIエンドポイントURL
- デフォルトの認可モード
GraphQL APIエンドポイントURLの設定
Amplifyライブラリは、Amplify.configure()に提供された情報に基づいて、GraphQL APIエンドポイントに接続します。
既存のGraphQL APIを使用している場合は、APIエンドポイントと認証設定を手動で提供する必要があります。まず、GraphQL APIエンドポイントURLを設定するには、aws_appsync_graphqlEndpointとaws_appsync_regionの値を設定します。
import { Amplify } from 'aws-amplify'
Amplify.configure({ aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql', aws_appsync_region: 'us-east-1',})デフォルトの認可モードの設定
デフォルト認可モードは、リクエスト時に他の認可モードが指定されていない場合に、GraphQL APIが認可される認可モードです。デフォルト認可モードは、AWS Amplifyで生成されたAPIおよびAWS AppSync GraphQL APIに対して設定できる設定です。下のタブからデフォルト認可モードを選択して続行します:
import { Amplify } from 'aws-amplify'
Amplify.configure({ aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql', aws_appsync_region: 'us-east-1',
// 認可タイプを「API_KEY」に設定し、APIキー値を渡します aws_appsync_authenticationType: 'API_KEY', aws_appsync_apiKey: 'da2-xxxxxxxxxxxxxxxxxxxxxxxxxx'})import { Amplify } from 'aws-amplify'
Amplify.configure({ aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql', aws_appsync_region: 'us-east-1',
// 認可タイプを「AMAZON_COGNITO_USER_POOLS」に設定します aws_appsync_authenticationType: 'AMAZON_COGNITO_USER_POOLS',})import { Amplify } from 'aws-amplify'
Amplify.configure({ aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql', aws_appsync_region: 'us-east-1',
// 認可タイプを「AWS_IAM」に設定します aws_appsync_authenticationType: 'AWS_IAM',})import { Amplify } from 'aws-amplify'
Amplify.configure({ aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql', aws_appsync_region: 'us-east-1',
// 認可タイプを「OPENID_CONNECT」に設定します aws_appsync_authenticationType: 'OPENID_CONNECT',})AWS Lambda関数を使用して、独自のカスタムAPI認可ロジックを実装できます。AppSync APIの認可モードとしてLambdaを追加するには、AppSyncコンソールの設定セクションにアクセスします。
AppSync APIの認可モードとしてLambda関数を使用している場合は、各APIリクエストで認証トークンを渡す必要があり、アプリケーションでトークンリフレッシュを管理する必要があります。
import { Amplify } from 'aws-amplify'
Amplify.configure({ aws_appsync_graphqlEndpoint: 'https://abcxyz.appsync-api.us-east-1.amazonaws.com/graphql', aws_appsync_region: 'us-east-1',
// 認可タイプを「AWS_LAMBDA」に設定します aws_appsync_authenticationType: 'AWS_LAMBDA',})次に、GraphQL APIリクエストを行うときに、authTokenパラメータをリクエストヘッダーに追加できます。
const getAuthToken = () => 'myAuthToken';const lambdaAuthToken = getAuthToken();
const createdTodo = await client.graphql({ query: queries.listTodos, authToken: lambdaAuthToken});GraphQLクライアントコードとタイピングの生成
バックエンドGraphQLスキーマから直接、一般的なGraphQLクエリ、ミューテーション、およびサブスクリプションを生成できます。これにより、APIを迅速に開発する際にGraphQLドキュメントを手動で作成する必要がなく、エンドツーエンドのタイピングも提供されます。
デフォルトでは、amplify pushでAPIをデプロイするときに、GraphQLクエリ、ミューテーション、およびサブスクリプション用のクライアントコードを生成するかどうかを確認するプロンプトが表示されます。生成されたGraphQLドキュメントはsrc/graphql/**/に保存されます。
amplify push? Do you want to generate code for your newly created GraphQL API> Yes? 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]> 2上記のコード生成設定をカスタマイズするには、ターミナルで次のコマンドを実行します:
amplify update codegenフロントエンドアプリのルートディレクトリに移動し、ターミナルで次のコマンドを実行します:
npx @aws-amplify/cli codegen add --apiId <...> --region <...>これにより、APIのスキーマがダウンロードされ、デフォルトではsrc/graphqlフォルダにクライアントヘルパーコードが生成されます。APIをデプロイするたびに、次のコマンドを再実行して、更新されたGraphQLステートメントとタイプを生成できます:
npx @aws-amplify/cli codegen生成されたGraphQLクエリ、ミューテーション、およびサブスクリプションの使用
生成されたGraphQLコードは、コードベースにインポートしてAPI.graphql()操作に渡した後に使用できます。GraphQLでは、通常、JavaScriptクライアントからAPIと対話するための次のタイプの操作があります:
- ミューテーション - APIにデータを書き込む(作成、更新、削除操作)
import { API } from 'aws-amplify';import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';import { GraphQLQuery } from '@aws-amplify/api';import { CreateTodoInput, CreateTodoMutation, UpdateTodoMutation, DeleteTodoMutation } from './API';
const todo: CreateTodoInput = { name: "My first todo", description: "Hello world!" };
/* create a todo */await API.graphql<GraphQLQuery<CreateTodoMutation>>({ query: createTodo, variables: { input: todo }});
/* update a todo */await API.graphql<GraphQLQuery<UpdateTodoMutation>>({ query: updateTodo, variables: { input: { id: "ENTER_TODO_ID_HERE", name: "Updated todo info" } }});
/* delete a todo */await API.graphql<GraphQLQuery<DeleteTodoMutation>>({ query: deleteTodo, variables: { input: { id: "ENTER_TODO_ID_HERE" } }});import { API } from 'aws-amplify';import { createTodo, updateTodo, deleteTodo } from './graphql/mutations';
const todo = { name: "My first todo", description: "Hello world!" };
/* create a todo */await API.graphql({ query: createTodo, variables: { input: todo }});
/* update a todo */await API.graphql({ query: updateTodo, variables: { input: { id: "ENTER_TODO_ID_HERE", name: "Updated todo info" } }});
/* delete a todo */await API.graphql({ query: deleteTodo, variables: { input: { id: "ENTER_TODO_ID_HERE" } }});- クエリ - APIからデータを読み取る(リストおよび取得操作)
import { API } from 'aws-amplify';import { GraphQLQuery } from '@aws-amplify/api';import { listTodos } from './graphql/queries';import { ListTodosQuery } from './API';
const todos = await API.graphql<GraphQLQuery<ListTodosQuery>>({ query: listTodos });import { API } from 'aws-amplify';import { listTodos } from './graphql/queries';
const todos = await API.graphql({ query: listTodos });クエリ、ミューテーション、サブスクリプションについてさらに詳しく学ぶには、アプリケーションデータの作成、更新、削除およびアプリケーションデータの読取のガイドを参照してください。
まとめ
おめでとうございます! アプリコードをAPIに接続するガイドを完了しました。このガイドでは、必要な設定を確認し、Amplifyライブラリをインストールして設定しました。また、このデータを書き込みおよび読み取るいくつかの簡単な方法についても説明しました。
次のステップ
推奨される次のステップには、APIを使用してデータを変更およびクエリしことが含まれます。また、リアルタイムイベントをサブスクライブして、データの変更を確認する方法も確認できます。この作業に役立つリソースは次のとおりです: