DataStoreからの移行
DataStoreについて
AWS Amplify DataStoreは、アプリとクラウド間のデータを自動的に同期するローカルファースト（ローカル優先）のデータレイヤーを提供していました。DataStoreを使用していた場合、同期ロジックを自分で記述することなく、いくつかの強力な機能を得ることができました。セッション間でデータを永続化するローカルデータベース、AppSyncバックエンドとの自動双方向同期、バージョン追跡を使用した組み込みの競合解決、ミューテーション キューとリプレイを備えた完全なオフラインサポート、observe()およびobserveQuery()による リアルタイム更新です。
DataStoreはGraphQL操作、ネットワーク状態管理、データの一貫性の複雑さを抽象化していました。ローカルモデルの単純なsave、query、deleteメソッドで作業でき、残りはすべてDataStoreが裏で処理していました。
このガイドでは、クエリ、ミューテーション、キャッシング用にApollo Clientを使用し、リアルタイム更新用にAmplifyライブラリの組み込みサブスクリプション機能と組み合わせる方法を示します。DataStoreの機能セットのうち、アプリが実際に使用している量によっては、移行が予想より簡単な場合があります。
フロントエンドクライアントがDataStoreから移行された後、バックエンドで競合解決を無効化して、同期インフラストラクチャを削除し、ミューテーションを簡素化（_version追跡なし）し、ソフト削除からハード削除に切り替えます。
このガイドについて
このガイドでは、DataStoreからApollo Clientへの移行パスについて説明します。Apollo ClientをAppSyncエンドポイントでセットアップし、すべてのCRUD操作と関係を移行し、オプションで永続的なキャッシングと楽観的更新を追加します。
クイック比較：前後
一般的なDataStore操作がApollo Clientにどのように変換されるかについての概要を以下に示します。
| DataStore操作 | Apollo Client相当 |
|---|---|
DataStore.save(new Post({...})) | apolloClient.mutate({ mutation: CREATE_POST, variables: { input: {...} } }) |
DataStore.query(Post) | apolloClient.query({ query: LIST_POSTS }) |
DataStore.query(Post, id) | apolloClient.query({ query: GET_POST, variables: { id } }) |
DataStore.delete(post) | apolloClient.mutate({ mutation: DELETE_POST, variables: { input: { id, _version } } }) |
DataStore.observe(Post) | amplifyClient.graphql({ query: onCreatePost }).subscribe(...) |
DataStore.observeQuery(Post) | useQuery(LIST_POSTS)とサブスクリプション起動refetch() |
このガイドを使用すべき人
このガイドは、DataStoreを使用する既存のAmplify Gen 1アプリケーションを持ち、DataStoreをApollo Clientで置き換えたいと考えているデベロッパー向けです。フロントエンド移行（DataStoreをApollo Clientで置き換える）とすべてのクライアントがDataStoreから移行した後に競合解決を無効化するバックエンドステップをカバーしています。これらのステップが完了した後、バックエンドをAmplify Gen 2に移行できます。
次のことについて精通していることを前提としています。
- ReactとReacthooks
- GraphQLの基本概念（クエリ、ミューテーション、サブスクリプション）
- Amplify設定と
amplifyconfiguration.json（またはaws-exports.js）ファイル - アプリのデータモデルとDataStoreの使用方法
Apollo Clientの事前経験は必要ありません。このガイドではApollo Clientのセットアップを最初から説明します。
このガイドを使用する方法
ページを順番に従ってください。各ステップは前のステップに基づいています。
-
Apollo Clientのセットアップ。 依存関係をインストールし、GraphQL操作を定義し、AppSyncエンドポイントとCognito認証を使用してApollo Clientを設定し、Amplifyを使用してリアルタイムサブスクリプションをセットアップします。
-
CRUD操作の移行。
DataStore.save()、DataStore.query()、DataStore.delete()をApollo Clientクエリとミューテーションで置き換えます。述語、ページネーション、ソートを移行します。 -
関係を移行。 DataStoreのレイジーロードモデルから、Apollo ClientのGraphQL選択セットへの
hasMany、belongsTo、hasOne、manyToMany関係を移行します。 -
オプション：ローカルキャッシングを追加。 永続的なキャッシング（データはページ更新後も存続）、楽観的更新（インスタントUI フィードバック）、インテリジェントな取得ポリシーでセットアップを強化します。このステップはオプションです。アプリがページ更新後のデータ永続性やインスタント楽観的UIを必要としない場合はスキップしてください。
-
高度なパターン。 複合キーを処理し、GraphQL codegenをセットアップしてタイプ安全性を確保し、ReactコンポーネントをMigrate し、Apollo相当物がないDataStore機能を確認します。
-
競合解決を無効化。 すべてのフロントエンドクライアントがDataStoreから移行されたら、同期インフラストラクチャを削除し、ミューテーションを簡素化し、ソフト削除からハード削除に切り替えます。
-
バックエンドをGen 2に移行（オプション）。 フロントエンド移行を完了し、競合解決を無効化した後、バックエンドをGen 1からAmplify Gen 2に移行できます。
移行チェックリスト
これらのチェックリストを使用して、DataStoreからApollo Clientへの移行を計画・追跡してください。完了したらアイテムにチェックを入れてください。
移行前チェックリスト
移行コードを記述する前に以下のステップを完了してください。
- バックエンドがデプロイされ、
amplifyconfiguration.json（またはaws-exports.js）が生成されていることを確認してください（amplify push） Amplify.configure(config)がアプリ起動時にAPIコール前に実行され、Amplifyが設定されていることを確認してください- コードベースのすべてのDataStore使用を一覧化してください：
DataStore.save()、DataStore.query()、DataStore.delete()、DataStore.observe()、DataStore.observeQuery() - すべてのモデルと関係（
hasMany、belongsTo、hasOne、manyToMany）を特定し、カスタム/複合主キーを持つモデルをメモしてください - すべてのフラグメントに
_version、_deleted、_lastChangedAtを含む各モデルのGraphQL操作を記述してください - Apollo Clientをインストールしてください：
npm install @apollo/client@^3.14.0 graphql - Apollo Clientをセットアップしてください。AppSyncエンドポイントに対してシンプルなリストクエリを実行して接続が機能することを確認してください
generateClient()を使用してAmplifyサブスクリプションクライアントをセットアップしてください
移行中のチェックリスト
機能を移行する際に、これらのステップに従ってください。各モデルを一度に1つずつ処理して、変更を管理可能でテスト可能に保ってください。
各DataStoreモデルについて：
- ビジネスフィールドプラス
_version、_deleted、_lastChangedAtを含むGraphQLフラグメントを定義してください - フラグメントを使用してすべてのGraphQL操作（リスト、取得、作成、更新、削除）を定義してください
- ソフト削除されたレコード（
_deleted: true）をフィルタリングしてリストクエリを移行してください - シングルアイテムクエリを移行してください
- 作成を移行してください（作成には
_versionは必要ありません） - 更新を移行してください（最新クエリ結果から
_versionをミューテーション入力に含めてください） - 削除を移行してください（ミューテーション入力に
idと_versionを含めてください） - Amplifyサブスクリプション+リフェッチパターンを使用して
observeを移行してください useQueryをサブスクリプション起動refetch()と組み合わせてobserveQueryを移行してください- Apollo のエラーリンクとコンポーネントレベルのエラー状態のエラーハンドリングを更新してください
- 次のモデルに進む前に、移行された各操作をテストしてください
述語とフィルタについて：
- DataStore述語をGraphQLフィルタオブジェクトに変換してください
- クライアント側の
.sort()またはサーバー側の@indexクエリへのソート移行を実行してください - ページベースからカーソルベース（
nextTokenとlimit）へのページネーション移行を実行してください
移行後のチェックリスト
検証：
- すべての移行されたモデルのすべてのCRUD操作が機能することを確認してください
- すべてのモデルのすべての3つのイベントタイプ（作成、更新、削除）でリアルタイム更新が発火することを確認してください
- サインイン、認証済み操作、サインアウトを含む認証フローを検証してください
- サインアウトクリーンアップによってApolloキャッシュが消去されることを確認してください
_version処理がConditionalCheckFailedExceptionエラーなしで成功することを確認してください- 削除されたレコードがリストビューに表示されなくなるようにソフト削除フィルタリングを確認してください
クリーンアップ：
- コードベースからすべてのDataStoreインポートを削除してください
- 生成されたDataStoreモデルファイルを削除してください
- DataStore設定呼び出し（
DataStore.configure()、DataStore.start()、DataStore.stop()）を削除してください - 依存関係から
@aws-amplify/datastoreを削除してください - 完全なユーザーワークフローでアプリをエンドツーエンドで実行してください
- デプロイ後のエラーを監視してください
ローカルキャッシングを追加した場合
オプションのローカルキャッシングを追加ステップを実行した場合、これらのアイテムを移行計画に追加してください。
- 永続キャッシュストレージ用に
apollo3-cache-persistをセットアップしてください - 各クエリのための
fetchPolicyを設定してください（例：リスト用はcache-and-network、詳細ビュー用はcache-first） - Apolloの
optimisticResponseオプションを使用してミューテーションの楽観的更新を実装してください - サインアウトフローを更新して、メモリ内キャッシュをクリアするだけでなく、永続キャッシュもパージしてください