Amplify Gen1からGraphQLとDynamoDBを追加し実行してみる
今回はAmplifyを通じてGraphQLとDynamoDBを設定していきます。
※Amplifyのアプリケーションの作成、ローカルへの適用が終わっている前提になります
GraphQLの追加
下記のコマンドを実行することでAPIを追加することができます。
amplify add api
GraphQL
かREST
どちらでAPIを作るか聞かれるのでGranphQLを指定
? Select from one of the below mentioned services: (Use arrow keys)
❯ GraphQL
REST
次はGraphQLのそれぞれの設定になります。変更するには変更したい項目に移動してエンターを押すと変更できます。最終的に全ての設定が終わったらContinue
で次に行けます。
? Here is the GraphQL API that we will create. Select a setting to edit or continue (Use arrow keys)
Name: xxxxxxxxxx
Authorization modes: API key (default, expiration time: 7 days from now)
Conflict detection (required for DataStore): Disabled
❯ Continue
- Name: 作成するGraphQL APIの識別子です。この名前は、プロジェクト内でAPIを管理・参照するために使用されます。
- Authorization modes: GraphQL API にアクセスするための認証と認可の方法を設定する項目です。
- API Key: シンプルな公開APIで認証。
- Amazon Cognito User Pool: ユーザー認証をAmazon Cognitoで行います。ユーザーごとのアクセス制御が可能です。
- IAM (AWS Identity and Access Management): IAMロールやポリシーを使ってアクセスを制御します。
今回は下記の設定で進めていきます。
? Here is the GraphQL API that we will create. Select a setting to edit or continue (Use arrow keys)
Name: graphqlAPI
Authorization modes: Amazon Cognito User Pool (default)
Conflict detection (required for DataStore): Disabled
❯ Continue
次の質問では、GraphQL APIのスキーマテンプレートを選択するよう求められています。
? Choose a schema template: (Use arrow keys)
❯ Single object with fields (e.g., “Todo” with ID, name, description)
One-to-many relationship (e.g., “Blogs” with “Posts” and “Comments”)
Objects with fine-grained access control (e.g., a project management app with owner-based authorization)
Blank Schema
- Single object with fields: 単一のオブジェクト(例: Todo)を持つ簡単なスキーマが作成されます。
- One-to-many relationship: 複数のオブジェクトが含まれ、親子関係(一対多のリレーション)が設定されます。
- Objects with fine-grained access control: 複数のオブジェクトを持ち、認証済みユーザーに対して詳細なアクセス制御(フィールドやリソース単位)が設定されます。
- Blank Schema: 空のスキーマを作成し、自分でカスタマイズします。
今回は1から作りたいのでBlank Schema
を指定します。
そうすると設定ファイルが作成されてschema.graphql
のファイルも作成されます。
最後の質問でyを選択するとschema.graphql
がエディターに表示されます。
✅ GraphQL schema compiled successfully.
Edit your schema at /workspaces/app/amplify/backend/api/graphqlAPI/schema.graphql or place .graphql files in a directory at /workspaces/app/amplify/backend/api/graphqlAPI/schema
? Do you want to edit the schema now? (Y/n) ‣ y
GraphQLの記述
先ほど作成したschema.graphql
のファイル上に記述していきます。
GraphQLの記述方法については省略しています。
今回は、Userというテーブルを作成してみます。GraphQLファイルにはじめに記載がある記述は全て消します。
type User @model @auth(rules: [{ allow: private, operations: [read] }]) {
id: ID!
name: String!
email: String!
}
記述が終わったら実際にAmplifyに適用していきましょう。amplify push
を実行します。
実行すると下記が聞かれます。
これは最終的に.graphqlconfig.yml
がルートディレクトリに作成され今後APIを実行するときに必要なファイルなど出力先や情報が書き込まれます。
もし聞かれなかった場合はamplify codegen
を実行することで同じ設問が聞かれます。
? Choose the code generation language target (Use arrow keys)
javascript
❯ typescript
flow
これはmutations.ts
など出力するファイルの言語を選択します。
今回はtypescript
にします。
? Enter the file name pattern of graphql queries, mutations and subscriptions (src/graphql/**/*.ts)
次はファイルの出力先を設定します。
この後、Nuxtを使用するので今回はassets/graphql/**/*.ts
にします。
Enter the file name for the generated code (src/API.ts)
API.tsを出力先を指定します。こちらもassets/API.ts
にします。
Enter maximum statement depth [increase from default if your schema is deeply nested] (2)
これはGraphQL スキーマの深さに応じたコード生成を調整するための設定です。GraphQL のクエリでは、スキーマが階層構造(ネスト)を持っています。スキーマが複雑で深くネストされている場合、生成されるクエリやミューテーションも多段階のネストを含む可能性があります。
Amplify は、生成されるクエリの深さ(ネストのレベル)を制限することで、パフォーマンスやコードの過剰生成を抑える仕組みを提供しています。この設問では、その最大深度を指定するよう求められます。
これは実際のアプリケーションに合わせて指定をしてください。今回は「3」にします。
これが終わると.graphqlconfig.yml
がルートディレクトリに作成されています。
修正する場合はamplify codegen configure
を実行することで同じ設問が聞かれ修正することができます。
デプロイが終わったらAWSのマネージメントコンソールで実際に作成できているか確認して見てください。
AppSync内にあるGraphQLとDynamoDBのそれぞれ作成されています。
フロントからデータを登録する
今回もNuxt3をフロントとして作成をしていきます。
composables
にuseUser.ts
を作成します。
作成したファイルに下記を記述していきます。
パッケージ使用するのでnpm i aws-amplify
を実行し追加します。
パッケージ内にあるgenerateClientを使用することでGraphQLAPIを実行することができます。
~/assets/API
にuserを作成するに必要な型が用意されており、データを登録する処理は~/assets/graphql/mutations
に実行したい処理があります。関数名としては実行したい処理 + GraphQLで作成したテーブル名
になっています。(今回で言うとcreateUser
)
データを取得する関数は~/assets/graphql/queries
にあります。(今回で言うとgetUser
)
この関数たちをcomposables
内で実行できるように関数を作成します。
// composables/useUser.ts
import { generateClient } from 'aws-amplify/api';
import type { CreateUserInput } from '~/assets/API';
import { createUser } from '~/assets/graphql/mutations';
export const useUser = () => {
const client = generateClient();
const _createUser = async (input: CreateUserInput) => {
const createUserResponse = await client.graphql({
query: createUser,
variables: { input },
});
if (createUserResponse.errors) {
throw new Error('Failed to create user', { cause: createUserResponse.errors });
}
return createUserResponse.data?.createUser;
};
return { createUser: _createUser };
}
composables
が出来たら実際のフロントページを作成しましょう。
今回は簡単な入力formを作成します。まずはランダムのIDを生成するためにnpm i nanoid
を実行し追加します。
pages/index.vue
<script setup lang="ts">
import { nanoid } from 'nanoid';
const { createUser } = useUsers();
const name = ref('');
const email = ref('');
const submit = async () => {
try {
await createUser({ id: nanoid(), name: name.value });
alert('User created successfully');
} catch (error) {
console.error(error);
alert('An error occurred while creating the user');
}
};
</script>
<template>
<input v-model="name" placeholder="Name" />
<input v-model="email" placeholder="Email" />
<button @click="submit">Create User</button>
</template>
作成が完了したら実際に動かしてみましょう。
問題なくできればUser created successfully
のアラートが出てDynamoDBを確認するとデータが増えています。
それでは、良いAmplify ライフを👋
Discussion