amplify mock api の使い方

7月 17, 20227月 19, 2022

動作環境

amplify
VSCode(MacOS)
next.js

npm list
├── @aws-amplify/cli@9.1.0
├── corepack@0.10.0
├── npm@8.1.0

手順

VSCodeでcontrol + shift + ^を押すと、VSCodeの中でターミナルが表示されます。以下のコマンドはそこで実行すると、便利かと思います。

// next.jsプロジェクトを作成する
npx create-next-app@12.0 am_test --typescript

// ディレクトリを移動する
cd ./am_test/

// ビルドする
npm run build

// 表示を確認する
npm run start

// amplify consoleにてamplifyのアプリを作成する
/*
名前をtestにする
作成されたアプリのbackendはstagingになっている
*/

// クラウドからamplifyアプリの環境をpullする
amplify pull
/*
testを選択する
*/

// ローカルのbackendにapiの機能を追加する
amplify api add

// 確認
amplify status

// ローカルでmockを起動する
amplify mock api
/*
表示される内容の
http://192.168.0.5:20002/をブラウザで開く。
VSCodeならcommand + クリック(MacOSの場合)を押すと、ブラウザで開いてくれる。
*/

ローカルmockの画面です。

真ん中のエリアの文字が表示されない場合

amplify のmock画面で真ん中のエリアに薄い文字が表示されていない場合は、動きません。2重に起動している場合などに発生します。
正常にmock画面が起動している場合は、以下の文字が表示されます。

# shift-option/alt-click on a query below to jump to it in the explorer
# option/alt-click on a field in the explorer to select all subfields

GraphQLのmockにデータを登録する

SQLでいうcreateをGraphQLで行います。
以下のコードをコピーして、真ん中のエリアにペーストして下さい。その後、画面上部にある実行ボタン(▶︎マーク)を押下します。

mutation CreateTodo {
  createTodo(input: {
    name:"あああああああ"
  }) {
    id
    name
  }
}

画面右のエリアに以下にような表示が出たら、ローカルにgraphQLのデータが登録されています。
idの部分は次のデータを取得するときのためにコピーして控えておいて下さい。

{
  "data": {
    "createTodo": {
      "id": "d37f09cc-53bc-4fc1-9fad-f197c0cac6bd",
      "name": "あああああああ"
    }
  }
}

ローカルにgraphQLのデータが登録されている場所は、amplifyのバックエンドのフォルダの中です。自分の場合は、以下のフォルダでした。
/Users/*****/[ルートディレクトリ]/amplify/mock-data/dynamodb/fake_us-fake-1.db

graphQLのmockからデータを取得

sqlで言うとselectに該当します。
以下のコードをコピーして、ブラウザのmock画面の真ん中のエリアにペーストして下さい。先程、控えたIDを<控えたID>の部分に貼り付けて下さい。
その後、mock画面の画面上部にある実行ボタン(▶︎マーク)を押下します。

query GetTodo {
  getTodo(id: "<控えたID>") {
    name
  }
}

以下のように右エリアに表示され、GraphQLのデータを取得することができました。

{
  "data": {
    "getTodo": {
      "name": "あああああああ"
    }
  }
}

参考サイト

https://blog.serverworks.co.jp/tech/2020/06/23/aws-amplify-mock/

メモ

Auth API Key で実行していることに留意して下さい。