AWS Amplify Studio が GraphQL API をフルサポート

AWS Amplify は、AWS Amplify Studio で GraphQL API をフルサポートすることを発表しました。これによって、DataStore の有無に関わらず、Connected Forms や Data Manager のような、Amplify Studio の既存のデータ駆動の機能が、すべての新規および既存の Amplify アプリで利用できるようになりました。

何が新しくなったのか？

今まで多くの Amplify Studio の機能は、すべての API に競合解決モードセットを設定する必要がありました。Amplify DataStore は GraphQL API のラッパーで、デバイスがオフラインの間、ローカルでデバイス上のストレージを使用してデータを処理します。DataStore は、選択した競合解決ストラテジーを使用して、オフライン使用から生じるデータの不整合を処理します。

開発者からは、DataStore を使用しないアプリにも Amplify Studio の一連の機能を拡張してほしいという要望が寄せられていましたが、私たちはこれに応えました。今回の発表により、Amplify Studio はすべての Amplify GraphQL API と直接連携できるようになりました。

DataStore を使用していない開発者向けに、以下の機能が利用可能になりました。

Data Manager

GraphQL API へのデータの作成、管理、シードは時間がかかり、面倒な場合があります。データマネージャーは、データ管理を簡単にするビジュアルコンテンツマネージャーです。データマネージャーは API に自動的に接続され、データスキーマと常に同期します。

Figma to Code + データバインディング

わずか数行のコードで、Figma デザインからリアルタイムでクラウドに接続されたコンポーネントへ変換することが出来ます。Figma to Code を使用したデータバインディングにより、API のデータを利用して、ユニークなコンポーネントの動的なコレクションを生成することができます。

Connected Forms

クラウドに接続された美しい React フォームを、必要なときにすぐに入手できます。Connected Formsは、GraphQL API に自動的にリンクされ、デザインも動作も完全にカスタマイズできます。

Amplify Studioの拡張サポートは、既存のすべての Amplify アプリにも適用されます。Amplify Studio を起動するか、既存のアプリに Amplify Studio を追加するだけで、すべての機能が Amplify アプリですぐに利用できるようになります。

Amplify Studio で新しい GraphQL API を構築する

Amplify Studio で新しい GraphQL API を構築するには、まず新規または既存の Amplify アプリを開き、Amplify Studio を起動する必要があります。既存の Amplify アプリは Amplify コンソールで見つけることができます。新しいアプリを作成する場合は、アプリと名前を入力し、”Confirm deployment” を選択します。

デプロイが完了したら、”Launch Studio” ボタンを使用してスタジオを開きます。

スタジオを開いたら、左側のナビゲーションバーで Data タブを選択し、ビジュアル・データ・モデラーを開きます。”Add model” をクリックして、スキーマにテーブルを作成し定義します。スキーマが完成したら、右上隅にある “Save and Deploy” を選択します。

送信すると、Amplify はあなたのスキーマで新しい GraphQL API を生成します。API がデプロイされると、Amplify バックエンドをローカルプロジェクトに追加する準備が整います。生成された amplify pull コマンドをコピーし、ローカルプロジェクトのルートディレクトリで実行して、新しく作成した API をインポートします。

まだローカルプロジェクトを持っていない場合は、こちらのドキュメントを参考に Next.js アプリや他のサポートされているフレームワークのプロジェクトを作成することができます。

amplify pull が完了したら、API を使用する準備ができました。amplify add codegen を実行すると、Amplify CLI が自動的に GraphQL クエリを生成します。

重要: amplify add codegen の実行は、クエリーの深さを 4 に設定することをお勧めします。これによって、すべての Amplify Studio の機能が期待通りに動作します。amplify configure codegen を実行することで、いつでもクエリの深さを変更できます。

競合解決の設定を変更する

デフォルトでは、Amplify は競合解決を無効にして GraphQL API をプロビジョニングします。競合解決が無効になっている間、Amplify は Amplify Libraries を使用して GraphQL API と直接接続します。アプリがオフラインとオンラインの両方で動作する必要がある場合は、競合解決を有効にして DataStore を有効にすることができます。

競合解決を有効/無効にする、または競合解決戦略を変更するには、Data タブに移動し、”GraphQL API Settings” を選択します。

GraphQL API 設定で、競合解決を有効または無効にするスイッチをクリックします。競合解決が有効な場合、ドロップダウンで利用可能な競合解決ストラテジーから選択できます。

設定が完了したら、左上の “Back to Data Modeling”をクリックし、”Save and Deploy “で変更を適用します。最後に、ターミナルを使用して、プロジェクトのルートディレクトリで amplify pull を実行すると、更新された設定の APIが使用できるようになります。

重要：競合解決を無効にすると、データが破壊的に変更されます。データのない GraphQL API でのみ競合解決設定を変更することをお勧めします。詳しくはドキュメントをご覧ください。

今すぐ始める

Amplify Studio は、GraphQL API の視覚的な設計とデプロイを簡単にし、Data Manager、Figma to Code、Form Builder などのツールを提供して、アプリの差別化を支援します。新しい Studio ユーザーであっても、長年の Amplify 開発者であっても、Studio はアプリ開発を加速するのに役立ちます。今すぐ Amplify アプリの構築を始めましょう。

本記事は、AWS Amplify Studio now offers direct support for GraphQL APIs を翻訳したものです。

翻訳者について