amplify mock api の使い方
動作環境
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 で実行していることに留意して下さい。