APIとデータベースをアプリに接続する
アプリケーションを作成および設定し、新しいAmplifyプロジェクトを初期化したので、機能を追加できます。最初に追加する機能はAPIです。
Amplify CLIはAPIカテゴリーの2つのタイプ、RESTとGraphQLの作成と相互作用をサポートしています。
このステップで作成するAPIは、AWS AppSync（マネージドGraphQLサービス）を使用するGraphQL APIであり、データベースはAmazon DynamoDB（NoSQLデータベース）になります。
GraphQL APIとデータベースを作成する
以下のコマンドを実行して、GraphQL APIをアプリに追加し、データベースを自動的にプロビジョニングします。アプリケーションディレクトリのルートから実行します：
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)CLIはこのGraphQLスキーマをテキストエディタで開くよう促します。
amplify/backend/api/your-api-name/schema.graphql
# 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}生成されたスキーマはTodoアプリ用です。Todoタイプの@modelディレクティブに気付くでしょう。このディレクティブはAmplify GraphQL APIカテゴリーの一部です。
Amplify GraphQL APIは、カスタムGraphQLディレクティブを提供し、データモデルを定義、認可ルールを設定、サーバーレス関数をリゾルバーとして構成するなど、さらに多くのことができます。
@modelディレクティブで装飾されたGraphQLタイプは、タイプ（Todoテーブル）のデータベーステーブル、CRUD（作成、読み取り、更新、削除）およびリスト操作のスキーマ、そしてすべてを一緒に機能させるために必要なGraphQLリゾルバーをスキャフォールディングします。
コマンドラインからEnterキーを押してスキーマを受け入れ、次のステップに進みます。
APIをデプロイする
このバックエンドをデプロイするには、pushコマンドを実行します：
amplify push各プロンプトに対して以下の値を選択します：
✔ Are you sure you want to continue? (Y/n) · yes...? Do you want to generate code for your newly created GraphQL API: Yes? Choose the code generation language target: typescript? Enter the file name pattern of graphql queries, mutations and subscriptions: src/graphql/**/*.ts? 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? Enter the file name for the generated code: src/API.ts✔ Are you sure you want to continue? (Y/n) · yes...? 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? Enter the file name for the generated code src/API.jsAPIはライブになり、相互作用を開始できます。デプロイしたAPIには、投稿を作成、読み取り、更新、削除、および一覧表示するための操作が含まれています。
デプロイメントステータスを確認する
次に、以下のコマンドを実行してAmplifyのステータスを確認します：
amplify statusこれはAmplifyプロジェクトの現在のステータスを表示します。現在の環境、作成されたカテゴリー、およびそれらのカテゴリーの状態が含まれます。以下のようになります：
Current Environment: dev
┌──────────┬───────────────────────┬───────────┬───────────────────┐│ Category │ Resource name │ Operation │ Provider plugin │├──────────┼───────────────────────┼───────────┼───────────────────┤│ Api │ your-api-name │ No Change │ awscloudformation │└──────────┴───────────────────────┴───────────┴───────────────────┘AWSコンソールでデプロイされたAPIを確認する
AppSyncコンソールでGraphQL APIを任意の時点で表示するには、以下のコマンドを実行します：
amplify console apiAmplifyコンソールでアプリ全体を任意の時点で表示するには、以下のコマンドを実行します：
amplify consoleローカルモッキングでAPIをテストする
これをローカルでテストするには、mockコマンドを実行できます。注：モッキングをセットアップするための指示を参照してください。
フロントエンドを接続して先に進みたい場合は、次のステップにスキップできます。
amplify mock api注： amplify mock apiにはJavaが必要です。
# If you have not already deployed your API, you will be walked through the following steps for GraphQL code generation? Choose the code generation language target: javascript (or preferred target)? 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これにより、ローカルポートでGraphiQLエクスプローラーが開きます。テスト環境から、クエリやミューテーションなど、さまざまな操作をローカルで試すことができます。
GraphiQLツールバーで、Use: User Poolを選択し、Todoを作成してみてください：
mutation CreateTodo { createTodo(input: { name: "Test Todo", description: "Todo description" }) { id owner name updatedAt createdAt description }}次に、認証をUse: API Keyに更新し、Todoのリストをクエリしてみてください：
query ListTodos { listTodos { items { description createdAt id owner name } }}フロントエンドをAPIに接続する
次に、App.vueを開きます。
GraphQL ミューテーションでデータを書き込む
データベースに新しいTodoを作成するには、generateClient()操作を使用してclientを作成し、client.graphql()にcreateTodoミューテーションと書き込みたいデータを渡します。
<script setup> import * as mutations from './graphql/mutations'; import { generateClient } from 'aws-amplify/api'; import { onMounted, ref } from 'vue';
const name = ref(''); const description = ref('');
const client = generateClient();
async function addTodo() { if (!name.value || !description.value) return; const todo = { name: name.value, description: description.value }; await client.graphql({ query: mutations.createTodo, variables: { input: todo } }); name.value = ''; description.value = ''; }</script><template> <div id="app"> <h1>Todo App</h1> <input type="text" v-model="name" placeholder="Todo name" /> <input type="text" v-model="description" placeholder="Todo description" /> <button v-on:click="addTodo">Create Todo</button> </div></template>GraphQL クエリでデータを読み取る
データを表示するには、App.vueを更新してqueriesをインポートし、onMounted() Vue ライフサイクルフックを使用して、ページロード時にクエリが実行されたときにページを更新します：
<script setup> import * as mutations from './graphql/mutations'; import * as queries from './graphql/queries'; import { generateClient } from 'aws-amplify/api'; import { onMounted, ref } from 'vue';
const name = ref(''); const description = ref(''); const todos = ref([]);
const client = generateClient();
async function addTodo() { if (!name.value || !description.value) return; const todo = { name: name.value, description: description.value }; await client.graphql({ query: mutations.createTodo, variables: { input: todo } }); name.value = ''; description.value = ''; }
async function fetchTodos() { const fetchedTodos = await client.graphql({ query: queries.listTodos });
todos.value = fetchedTodos.data.listTodos.items; }
onMounted(() => { fetchTodos(); });</script><template> <div id="app"> <h1>Todo App</h1> <input type="text" v-model="name" placeholder="Todo name" /> <input type="text" v-model="description" placeholder="Todo description" /> <button v-on:click="addTodo">Create Todo</button>
<div v-for="item in todos" :key="item.id"> <h3>{{ item.name }}</h3> <p>{{ item.description }}</p> </div> </div></template>GraphQL サブスクリプションでリアルタイムデータを取得する
データをサブスクライブしたい場合は、onCreateTodoサブスクリプションをインポートし、client.graphql()にonCreateTodoサブスクリプションを渡して新しいサブスクリプションを作成します：
<script setup> import * as mutations from './graphql/mutations'; import * as queries from './graphql/queries'; import * as subscriptions from './graphql/subscriptions'; import { generateClient } from 'aws-amplify/api'; import { onMounted, ref } from 'vue';
const name = ref(''); const description = ref(''); const todos = ref([]);
const client = generateClient();
async function addTodo() { if (!name.value || !description.value) return; const todo = { name: name.value, description: description.value }; await client.graphql({ query: mutations.createTodo, variables: { input: todo } }); name.value = ''; description.value = ''; }
async function fetchTodos() { const fetchedTodos = await client.graphql({ query: queries.listTodos });
todos.value = fetchedTodos.data.listTodos.items; }
function subscribeToNewTodos() { client .graphql({ query: subscriptions.onCreateTodo }) .subscribe({ next: ({ data }) => { todos.value = [...todos.value, data.onCreateTodo]; } }); }
onMounted(() => { fetchTodos(); subscribeToNewTodos(); });</script><template> <div id="app"> <h1>Todo App</h1> <input type="text" v-model="name" placeholder="Todo name" /> <input type="text" v-model="description" placeholder="Todo description" /> <button v-on:click="addTodo">Create Todo</button>
<div v-for="item in todos" :key="item.id"> <h3>{{ item.name }}</h3> <p>{{ item.description }}</p> </div> </div></template>ローカルで実行する
次に、アプリを実行して、Todoを作成および表示する機能を備えた更新されたUIが表示されることを確認します：
npm run devAPIを正常にデプロイし、アプリに接続しました。