FlutterとGraphQLでのオフラインファーストDB実装技術ガイド

オフラインファーストデータベースのgraphql apiを使用した実装 はじめに ここにいるということは、他のチュートリアルを通過し、データを取得および変更するためにgraphqlクエリとミューテーションを実行することに慣れているはずです。このドキュメントでは、flutterとgraphqlを使用してオフラインファーストのユーザーインターフェースを実装する方法を探ります。 目標 flutter graphqlオフラインクライアントの内部アーキテクチャを理解する アプリケーションがオフラインであってもgraphqlクエリを実行できるようにする オフラインデータの永続性を実装する 前提条件 ユーザーがdartとflutterの基本的な理解を持っていることが必要です。 必須ではありませんが、graphqlクックブックは、いくつかの graphqlの概念 を理解するのに役立ちます。 次の前提条件トピックを完了している必要があります。 flutter graphqlセットアップ および以前のコードセットアップとback4appバックエンドの実装。 1 オフラインキャッシュの設定 flutter graphqlクライアントはデフォルトで「オフラインクエリ」をサポートしており、オフラインのときにgraphqlデータをクエリしてもエラーをスローせず、キャッシュからデータを取得します。 このことは、アプリセッション間でキャッシュを持続させることとは異なることに注意する必要があります。特に、flutter graphqlクライアントはディスクへのキャッシュ持続性を持っていません。したがって、アプリがシステムトレイから閉じられ、再度開かれた場合、データはまだ取得する必要があります。 同じことを有効にするためには、オフラインキャッシュを有効にする必要があります 次に進むには、 main dart 1 return materialapp( 2 home graphqlprovider( 3 child cacheprovider( // cache provider widget that provides the offline queries support 4 child myhomepage(), 5 ), 6 client client, 7 ), 8 ); 2 ストレージ設定 flutter graphqlクライアントを使用する際の一つの注意点は、アプリケーションが閉じられたときに独自のキャッシュを保存せず、アプリケーションが再度開かれたときにキャッシュを再構築しないことです。 同じことを実装するために、flutter shared preferencesライブラリを活用します。これは、シンプルなデータのためのプラットフォーム固有の永続ストレージをラップし（iosおよびmacosのnsuserdefaults、androidのsharedpreferencesなど）、本質的に非常にシンプルな方法でオフラインでデータを保存できるようにします。 ライブラリをインストールするには、 pubspec yml https //github com/templates back4app/flutter graphql/blob/772c058c74d870798af1cce7a29a5046f9dda456/pubspec yaml#l34 ファイルに追加してください。 「 main dart 」に次の内容を追加します 1 import 'package\ shared preferences/shared preferences dart'; 2 3 class sharedpreferenceshelper { 4 static final string offline cache key = 'programminglanguagelistresponse'; 5 6 static future\<programminglanguagelist> getcache() async { 7 final sharedpreferences prefs = await sharedpreferences getinstance(); 8 final cache = prefs getstring( offline cache key); 9 final offlinedata = 10 cache != null ? programminglanguagelistfromjson(cache) null; 11 12 return offlinedata; 13 } 14 15 static future\<bool> setcache(dynamic value) async { 16 final sharedpreferences prefs = await sharedpreferences getinstance(); 17 18 return prefs setstring( offline cache key, jsonencode(value)); 19 } 20 } shared preferencesライブラリは、値がjson文字列に変換されるキー バリュー形式でデータを保存します。このデータを私たちのデータモデルに解析する必要があります。 3 ローカルに保存されたデータの解析 「 programing languages model dart programing languages model dart 」という新しいファイルを作成します。これは解析ロジックを保存します。このロジックは、次の「 https //app quicktype io/ https //app quicktype io/ 」に私たちのgraphqlレスポンスを貼り付けることで生成します。 生成されたコードをコピーして、ファイルを作成します programing languages model dart programing languages model dart https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/programing languages model dart https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/programing languages model dart 4 オフラインストレージロジックの統合 データが存在しない場合、共有プリファレンスからデータを使用します。データが共有プリファレンスにも存在しない場合は、単にローディングアイコンを表示します。 すべての変更を統合するために、私たちの myhomepagestate myhomepagestate のビルドメソッドに変更を実装します。ビルドメソッドを変更します。 futurebuilder futurebuilder ウィジェットを使用して、sharedpreferenceshelperクラスからデータを取得します。 1 return futurebuilder\<programminglanguagelist>( 2 future sharedpreferenceshelper getcache(), 3 builder (prefs, snapshot) { 4 final offlinedata = snapshot data; 5 if (!snapshot haserror) { 6 return safearea( 7 … futurebuilderウィジェットを使用することで、状態を使用せずにコードを書くことができます。共有設定からデータを取得するのは比較的迅速なプロセスです。共有設定を初期化してオフラインストアからデータを取得している間、ローダーを表示することもできます。 現在、このオフラインデータオブジェクトを使用し、graphqlからデータが利用できない間にレンダリングします。また、コードを少しリファクタリングします。以下が私たちの「 クエリ クエリ 」ウィジェットのコードです。 https //github com/templates back4app/flutter graphql/blob/flutter graphql offline/lib/main dart 。 1 body query( 2 options queryoptions( 3 documentnode gql(query), 4 ), 5 builder ( 6 queryresult result, { 7 refetch refetch, 8 fetchmore fetchmore, 9 }) { 10 final data = result data == null 11 ? offlinedata 12 programminglanguagelistfromjson( 13 jsonencode(result data)); 14 if (data == null) { 15 return center( 16 child text( 17 "loading ", 18 style textstyle(fontsize 20 0), 19 )); 20 } else { 21 sharedpreferenceshelper setcache(data); 22 return listview\ builder( 23 itembuilder (buildcontext context, int index) { 24 if (index == 0) { 25 return center( 26 child raisedbutton( 27 onpressed refetch, 28 child result loading == true 29 ? text("loading ") 30 text("refetch"), 31 ), 32 ); 33 } 34 return listtile( 35 title text(data programminglanguages 36 edges\[index 1] node name), 37 trailing text(data programminglanguages 38 edges\[index 1] node stronglytyped 39 ? "strongly typed" 40 "weekly typed"), 41 ); 42 }, 43 itemcount data programminglanguages edges length + 1, 44 ); 45 } 46 }, 47 ), 48 ), 次のようになるはずです 結論 私たちは、データをオフラインで保存し、アプリケーションがインターネットに接続されたときにデータを再検証することで、非常に良いモバイル体験を確保できるようになりました。また、ユーザー体験を向上させる重要な側面の一つは、flutter graphqlクライアントが古いレスポンスをキャッシュし、新しいリクエストを自動的に送信することです。そのため、データを再取得する際に、煩わしいローディング画面を表示し続ける必要がありません。 この記事のコードは次の場所で入手できます https //github com/templates back4app/flutter graphql/tree/flutter graphql offline https //github com/templates back4app/flutter graphql/tree/flutter graphql offline