概要
(本記事は個人用メモ)
MongoDB Atlas Device SDK (旧Realm)のテンプレートプロジェクトの一つ、GraphQLを使用したWebアプリの動作まで
前提・環境
- 前回:クラウド側DBの準備
- Ubuntu 22.04
CLIセットアップ・APIキー生成・Atlas AppServiceログイン
sudo npm i -g atlas-app-services-cli
Atlas ポータル ➔ プロジェクトメニュー ➔ Project Settings
➔ Access Manager ➔ API Keys ➔ Create API Key をクリック
Privateキーは再表示されない。コピーし漏洩しない場所に保管
AppServiceにログイン
APIKEY=xxxtjolj
APIKEY_PRIV=a09253xx-xxxx-xxxx-xxxx-xxxxf42c255f
appservices login --api-key $APIKEY --private-api-key $APIKEY_PRIV
構成
Atlas App Services作成とApps ID 取得
GraphQL用のテンプレートアプリを作成
APP=GraphQLTrial
appservices apps create -n $APP --template web.graphql.todo
appservices apps list # to confimation
APPID=`appservices apps list -a $APP | tail -n1 | grep -oE '[^ ]*' | head -n1`
SERVICE='mongodb-atlas' # --template web.graphql.todo による初期設定
クラウドサーバ上にApps GraphQLTrial が作成される。
同時に ./GraphQLTrial/frontendにAppsの構成ファイルテンプレート群が作成される。
--template web.graphql.todo の場合、下記内容が初期設定されている
SERVICE='mongodb-atlas' # AppService.serviceName (Atlas Service Name)
DB='todo' # Database.name
COLLECTION='Item' # Collection.name
ユーザ追加
例: guest@guest 作成
appservices users create --email guest@guest --password guest123 -a "$APPID"
Atlas GraphQL API
スキーマだけ定義すればMongoDBをGraphQLで参照できる。
スキーマ定義
--template web.graphql.todoで用意されるスキーマ定義ファイルは ./\\$APP/data_sources/\\$SERVICE/\\$DB/\\$COLLECTION/schema.json
デプロイ
スキーマファイルなどを更新後、デプロイしてサーバに反映
appservices push --remote $APPID
MongoDB AtlasのWebツールでテスト
- Cluter:"cluster1" ➔ "+CREATE DATABASE" ➔ Database name:"todo", Collection name:"Item"
- Collection:"Item" ➔ "INSERT DOCUMENT" ➔ 下記挿入
挿入データ(_idは生成されたものを使用)
{"_id":{"$oid":"659c75ae49234c7adf70858b"},
"isComplete":true,
"owner_id":"xxx",
"summary": "xxx"
}
- GraphQL Web Clientを開き、Ctrl+ENTER
挿入データが応答される
クライアントWebアプリ(サンプル)実行
--template web.graphql.todoで用意されサンプルアプリ
cd ./GraphQLTrial/frontend/web.graphql.todo
npm i
npm run start --host # http://localhost:3000 を開く
ブラウザの開発者モードでGraphQLが呼ばれていることを確認
クライアント側プロジェクト作成
AppService SDKモジュールをプロジェクトに追加
npm install realm-web
npm install @apollo/client graphql
参照