amplify codegen・amplify status について🍎

## はじめに
表題について

* `amplify add codegen` と `amplify codegen` 
* `amplify status` と `amplify status --verbose`
 
の違いがよくわからなかったので調べた内容を記載します。

## 目次

1. [amplify add codegen と amplify codegen](#-amplify-add-codegen-と-amplify-codegen)
2. [amplify status と amplify status --verbose](#-amplify-status-と-amplify-status---verbose)
3. [amplify status における変更に問題がないかの判断基準](#-amplify-status-における変更に問題がないかの判断基準)
4. [まとめ](#-まとめ)
5. [参考文献](#-参考文献)

## 🧷 amplify add codegen と amplify codegen
### ✅ amplify add codegen （初回設定用）
プロジェクト内に GraphQL のコード生成機能を追加 し、設定を行います。
```sh
amplify add codegen
```
実行時に聞かれる質問：以下`？`部分
```sh
⠦ Getting API detailsSuccessfully added API devCotsAdminApi to your Amplify project

✔ Getting API details
? 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
✔ Downloaded the schema
✔ Generated GraphQL operations successfully and saved at src/graphql
```
* GraphQLコードを生成する言語の選択
    * JavaScript, TypeScript, Swift, Kotlin など
* GraphQLのクエリ・ミューテーション・サブスクリプションが含まれるファイルのパターン
    * src/graphql/**/*.js は、src/graphql 配下のすべてのサブディレクトリの .js ファイルを対象としています。
* すべてのGraphQL操作を生成または更新するか
    * Yes を選択しているため、全操作（クエリ・ミューテーション・サブスクリプション）を自動生成します。
* 最大のネスト深度を設定するか
    * 2 を選択しており、スキーマのネストが深くない場合はこれで十分ですが、ネストが多い場合は 3 や 4 に増やす必要がある。

**🌟 このコマンドは一度だけ実行すればOK！**
　　→ `amplify codegen`を実行する準備が整う。

### ✅ amplify codegen （コード生成のみ）
設定済みの GraphQL API をもとに、GraphQL のクエリ・ミューテーション・サブスクリプション・型定義 を再生成します。
```sh
amplify codegen
```

または、特定の動作を実行したい場合
```sh
amplify codegen statements  # GraphQL クエリ・ミューテーション・サブスクリプションを再生成
amplify codegen types       # TypeScript の型定義だけを再生成
```

## 🧷 amplify status と amplify status --verbose
### ✅ amplify status （初回設定用）
ローカルで変更されたリソースの一覧 を表示します。
```sh
amplify status
```
実行結果
```sh
    Current Environment: dev
    
┌──────────┬─────────────────┬───────────┬───────────────────┐
│ Category │ Resource name   │ Operation │ Provider plugin   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Api      │ xxxApi          │ No Change │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Api      │ xxxApi          │ No Change │                   │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Auth     │ nuxtxxx         │ No Change │ awscloudformation │
├──────────┼─────────────────┼───────────┼───────────────────┤
│ Function │ helloWorld      │ No Change │ awscloudformation │
└──────────┴─────────────────┴───────────┴───────────────────┘

GraphQL endpoint: https://e27c2ivlbrdszhaxhf2yq6cm4q.appsync-api.ap-northeast-1.amazonaws.com/graphql
⚠️ GraphQL API is configured to use API_KEY authentication, but API Key deployment is disabled, don't forget to create one.

GraphQL transformer version: 2
REST API endpoint: https://ob4hq95cke.execute-api.ap-northeast-1.amazonaws.com/dev
```
```sh
表示される情報（例）

| Category  | Resource name   | Operation |  Provider plugin  |
|-----------|-----------------|-----------|-------------------|
| Auth      | myauth          | Create    | awscloudformation |
| API       | mygraphql       | No Change | awscloudformation |
| Function  | myLambda        | Update    | awscloudformation |
```
* `Create` → 新規作成されたリソース
* `Update` → 変更されたリソース
* `No Change` → 変更なし

### ✅ amplify status --verbose
`--verbose`をつけることで、通常の`status`より詳細な情報（ローカルの設定や CloudFormationのスタック情報） を確認できます。

```sh
amplify status --verbose
```
```sh
表示される情報（例）

Category: auth
  - Resource: myauth
  - Service: Cognito
  - Operation: Create
  - Configured Authentication Providers: [Google, Facebook, Amazon]
  - MFA Configuration: Optional
  - User Pool ID: us-east-1_ABC123
  - App Client ID: xyz789

Category: api
  - Resource: mygraphql
  - Service: AppSync
  - Operation: No Change
  - GraphQL Schema: /amplify/backend/api/mygraphql/schema.graphql
  - Auth Mode: API Key
  - Endpoint: 
https://abcdefg123456.appsync-api.us-east-1.amazonaws.com/graphql
```
#### 📝 --verbose を使うメリット
* ローカルの詳細な設定を確認できる（認証プロバイダー、APIエンドポイントなど）
* Amplifyの設定ミスを発見しやすいCloudFormation のリソース情報も見られる

## 🧷 amplify status における変更に問題がないかの判断基準
`amplify status`や`amplify status --verbose`の出力をチェックすることで、ローカルの変更が適切であり、問題がないかを確認 できます。
### 🔹 amplify status で基本的なチェック
```sh
| Category  | Resource name   | Operation |  Provider plugin  |
|-----------|-----------------|-----------|-------------------|
| Auth      | myAuth          | No Change | awscloudformation |
| API       | myAPI           | Update    | awscloudformation |
| Function  | myLambda        | Create    | awscloudformation |
```
#### Operation列を見て、意図した変更が正しく適用されているかを判断できます。

* `Operation`：問題なしと判断できる条件
* `No Change`：変更なし
　⇨ 変更を加えていないリソースがすべて `No Change` になっていること
* `Create`：新規作成追加したリソースのみ `Create` になっていること
* `Update`：更新変更したリソースのみ `Update` になっていること
* `Delete`：削除不要なリソースのみ `Delete` になっていること

#### ✅ 問題なしと判断できる条件
* 意図しない変更がない（例えば、何も変更していないのに Update や Delete になっていると怪しい）
* No Change のリソースが多い（変更していない部分に影響が出ていないことを確認）
* 新規作成 (Create) のリソースが正しく追加されている
* 更新 (Update) したリソースのみが Update になっている
* 削除 (Delete) されるリソースが意図通りである

### 🔹 amplify status --verbose でより詳細なチェック
`amplify status --verbose`を実行すると、より詳細な変更情報が表示されます。
```sh
Category: api
  - Resource: myAPI
  - Service: AppSync
  - Operation: Update
  - GraphQL Schema: /amplify/backend/api/myAPI/schema.graphql
  - Auth Mode: API Key
  - Endpoint: 
https://abcdefg123456.appsync-api.us-east-1.amazonaws.com/graphql

Category: function
  - Resource: myLambda
  - Service: Lambda
  - Operation: Create
  - Runtime: Node.js 18
  - Handler: index.handler
```
#### ✅ 確認すべきポイント
* 意図したリソースのみ変更されているか
例えば、GraphQL のスキーマを変更したなら API カテゴリのみ Update になるべき。
* Lambda 関数を新規追加したなら Function カテゴリに Create があるべき。
* 変更の詳細が正しいかGraphQL Schema のパス → 変更したスキーマファイルが正しいか
* Auth Mode → 認証モードが意図したものになっているか
* Runtime（Lambda 関数の場合）→ 言語やバージョンが正しいか
* 意図しない削除がないかDelete がある場合、それが意図した削除かどうかチェック
#### ✅ 追加チェック
以下のコマンドを実行することで、さらに問題がないかを確認できます。

**1. 変更の詳細を確認**
変更ファイルが意図通りか確認する
（Amplify設定ファイル(`amplify/`以下)の変更が予期しないものになってないか確認）
```sh
git status
 ```

**2. 変更点を詳細に確認**
具体的にどの設定ファイルが変更されたか確認する
```sh
git diff amplify/backend
```

**3. amplify push する前にプレビュー**
変更がクラウドに反映される前に、実際の影響をシミュレーション
```sh
amplify push --dry-run
```
## 🎉 まとめ
### amplify add codegen
最初に一度だけGraphQL のコード生成機能を追加 & 設定

### amplify codegen
API の変更後クエリ・ミューテーション・型定義を再生成

👉 つまり
* プロジェクトに最初に追加するとき ⇨ `amplify add codegen`
* スキーマが変わったときに再生成するとき ⇨ `amplify codegen`

どちらを使えばいいか迷ったら、**初回は `amplify add codegen`、2回目以降は `amplify codegen` でOK！ 🚀**

### amplify status
変更されたリソースの一覧を表示
### amplify status --verbose
各リソースの詳細情報を確認

👉 **ローカルの設定を詳しくチェックしたいとき**は `amplify status --verbose` を使おう！ 🚀

### チェックポイント問題なしと判断できる条件
* `amplify status`
Create / Update / Delete のリソースが意図したものだけ
* `amplify status --verbose`
詳細な変更点が正しいかgit status予期しないファイル変更がないか
* `git diff amplify/backend`
変更内容が適切か
* `amplify push --dry-run`
クラウドに反映前の確認

👉 これらをチェックすれば、意図しない変更を防ぎ、問題なく`amplify push`可能！ 🚀

## 💫 参考文献
* [[AWS Hands-on for Beginners]
AWS Amplify を用いた Web サイトの構築方法を学ぼう](https://pages.awscloud.com/rs/112-TZM-766/images/AWS-Hands-on-for-Beginners_2022_AWS-Amplify_0705_updated.pdf)
* [amplify codegenの参照先スキーマにAppSyncのGraphQLのIDを指定する方法🚀](https://www.ragate.co.jp/blog/articles/4427)