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 } }}サーバーサイドレンダリング（SSR）付きAPI
このセクションでは、Next.js アプリケーションからTodoを一覧表示および作成する方法を作成します。これを行うには、サーバーから最新のTodoをフェッチしてレンダリングし、新しいTodoを作成します。
Amplify GraphQL API クライアントを生成する
サーバーサイドでGraphQL API リクエストを行うには、まず@aws-amplify/adapter-nextjs/apiからgenerateServerClientUsingCookiesをインポートし、プロジェクトのamplifyconfiguration.jsonをconfigとして、next/headersからcookiesを使用してcookiesClientを生成する必要があります。
src/app/page.tsxを開き、次のコードで置き換えます：
import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';import { cookies } from 'next/headers';
import config from '@/amplifyconfiguration.json';
const cookiesClient = generateServerClientUsingCookies({ config, cookies});
export default async function Home() { return ( <div style={{ maxWidth: '500px', margin: '0 auto', textAlign: 'center', marginTop: '100px' }} > <form> <input name="name" placeholder="Add a todo" /> <button type="submit">Add</button> </form> </div> );}Todoを送信するためのフォームを作成する
Next.jsでは、Server Actionを使用して、フォーム送信をサーバーサイドで処理できます。Server Actionを追加しましょう。これはデータをcreateTodo関数に送信します。呼び出されると、createTodoはcookiesClient.graphql(...)経由でGraphQL APIにGraphQL ミューテーションを送信し、次にnext/cacheからrevalidatePathを呼び出して、ページキャッシュを無効化し、最新のTodoをフェッチします。
src/app/page.tsxを次のコードで更新します：
import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';import { cookies } from 'next/headers';// 1. 次の2つのインポートを追加しますimport { revalidatePath } from 'next/cache';import * as mutations from '@/graphql/mutations';
import config from '@/amplifyconfiguration.json';
const cookiesClient = generateServerClientUsingCookies({ config, cookies});
// 2. 新しいServer Actionを作成しますasync function createTodo(formData: FormData) { 'use server'; const { data } = await cookiesClient.graphql({ query: mutations.createTodo, variables: { input: { name: formData.get('name')?.toString() ?? '' } } });
console.log('Created Todo: ', data?.createTodo);
revalidatePath('/');}
export default async function Home() { return ( <div style={{ maxWidth: '500px', margin: '0 auto', textAlign: 'center', marginTop: '100px' }} > {/* 3. フォームのactionを新しい create Todo Server Actionを使用するように更新します*/} <form action={createTodo}> <input name="name" placeholder="Add a todo" /> <button type="submit">Add</button> </form> </div> );}Todoを一覧表示する
cookiesClient.graphql(...)を使用してGraphQL クエリも実行します。listTodosクエリを渡し、返されたアイテムをtodosに割り当ててから、それらを反復処理して<ul>タグに表示します。Todoがない場合は、「No todos, please add one」というメッセージを表示します。
src/app/page.tsxを次のコードで更新します：
import { generateServerClientUsingCookies } from '@aws-amplify/adapter-nextjs/api';import { cookies } from 'next/headers';import { revalidatePath } from 'next/cache';import * as mutations from '@/graphql/mutations';// 1. クエリをインポートとして追加しますimport * as queries from '@/graphql/queries';
import config from '@/amplifyconfiguration.json';
const cookiesClient = generateServerClientUsingCookies({ config, cookies});
async function createTodo(formData: FormData) { 'use server'; const { data } = await cookiesClient.graphql({ query: mutations.createTodo, variables: { input: { name: formData.get('name')?.toString() ?? '' } } });
console.log('Created Todo: ', data?.createTodo);
revalidatePath('/');}
export default async function Home() { // 2. 追加のTodoをフェッチします const { data, errors } = await cookiesClient.graphql({ query: queries.listTodos });
const todos = data.listTodos.items;
return ( <div style={{ maxWidth: '500px', margin: '0 auto', textAlign: 'center', marginTop: '100px' }} > <form action={createTodo}> <input name="name" placeholder="Add a todo" /> <button type="submit">Add</button> </form>
{/* 3. エッジケース＆ゼロ状態＆エラー状態を処理します*/} {(!todos || todos.length === 0 || errors) && ( <div> <p>No todos, please add one.</p> </div> )}
{/* 4. Todoを表示します*/} <ul> {todos.map((todo) => { return <li style={{ listStyle: 'none' }}>{todo.name}</li>; })} </ul> </div> );}ローカルで実行する
次に、アプリを実行して、Todoを作成および表示する機能を備えた更新されたUIが表示されることを確認します：
npm run devAPIを正常にデプロイし、アプリに接続しました。