🌐

Amplify Gen1からGraphQLとDynamoDBを追加し実行してみる

2025/01/20に公開

今回はAmplifyを通じてGraphQLとDynamoDBを設定していきます。
※Amplifyのアプリケーションの作成、ローカルへの適用が終わっている前提になります

GraphQLの追加

下記のコマンドを実行することでAPIを追加することができます。

amplify add api

GraphQLRESTどちらで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をフロントとして作成をしていきます。

composablesuseUser.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 ライフを👋

株式会社find | 落とし物クラウド

Discussion