概要

(本記事は個人用メモ)
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

参照