FlutterでのBack4App GraphQL API統合ガイド

back4appでのflutter graphql はじめに あなたがback4appのドキュメントを掘り下げているので、back4appが柔軟なローコードバックエンドであることを知っているでしょう。これは、あなたが望む方法でバックエンドとさまざまな方法で対話することを可能にします。rest apiを使用することもできますし、直接 ネイティブsdk https //pub dev/packages/parse server sdk をflutter用に使用することもできます。このチュートリアルシリーズでは、新しい光沢のあるgraphql apiをflutterで使用する方法を探ります。 このガイドは、hybrowlabsの back4appパートナー https //www back4app com/partners/software development company であるchinmayによって書かれました。 目標 graphqlの概要を把握する; graphqlとflutterがどのように組み合わさるかを理解する; graphql用のflutterツールとライブラリを理解する; flutter graphqlアプリケーションにおける一般的なアーキテクチャと主要な概念を理解する; 前提条件 ユーザーがdartとflutterの基本的な理解を持っていることが必要です； 必須ではありませんが、graphqlクックブックは、 back4app graphql仕様 を理解するのに役立ちます。 graphqlとは何か graphqlはrest api標準の代替アーキテクチャです。graphqlは、facebookチームがネイティブアプリケーションをゼロから再構築しているときに生まれ、バックエンドから受け取るデータを最適化する必要がありました。 彼らはサービスをリソースのセットとしてリファクタリングしている間、行き詰まりを感じました。 彼らは一歩引いて、データを孤立したrestリソースではなく、相互接続されたオブジェクトのグラフとして再考しました。これにより、アプリケーションアーキテクチャに大きな違いが生まれ、graphqlが誕生しました。graphqlは2015年に公開されて以来、非常に人気が高まり、twitter、airbnb、atlassian、githubなどのチームで採用されています。 なぜgraphqlなのか？ hybrowlabsでは、 back4appパートナー https //www back4app com/partners/software development company として、現代的でデータ集約型のウェブおよびモバイルアプリケーションを構築しています。使いやすさ、最適化、すでに素晴らしいデータベースの上に提供されるスキーマ定義機能から、back4appを私たちの選択したバックエンドサービスとして採用しました。 私たちがエンジニアリングするアプリケーションで表示または操作されるデータのほとんどは、単一のback4appクラスからのものではありません。むしろ、このデータは複数のクラスから来ています。back4app graphqlの組み合わせは、そのようなシナリオに対処するのを非常に簡単にします。 その間、ネットワークのフットプリントを画面の読み込みごとに2 3回の呼び出しに減らすことができ、必要なデータだけを取得します。一方で、私たちが定義するクラウドコードは、graphqlの強く型付けされた性質のおかげで簡単に文書化されます。これにより、私たちのコードは保守可能で理解しやすくなります。 要約すると； graphqlを使用する利点は以下の通りです ネットワークのフットプリントが最小化される 効率的なクエリとクエリバッチ処理 より良いコード管理 強く型付けされた性質が予測可能性をもたらす。 flutterとback4app graphql nosqlデータベースの柔軟性を保ちながら、graphqlの型とスキーマ構造によって提供される構造と組織を維持するgraphqlバックエンドソリューションを設計することは非常に難しいことがよくあります。 back4appは常にこの構造化されたスキーマベースの設計を持っており、今やgraphqlは型システムの意味論を知るapiを作成することで、まったく新しいレベルに引き上げています。 一方で、私たちが知っているように、dart（flutterが基づいている言語）は強く型付けされた言語です。はい、dartは型の安全性に非常に特化しています。 graphqlでは、クライアント側で再利用できるスキーマがあります。これにより、生活が非常に楽になります。また、将来的に取得できる型スキーマを知っていることは、データに対して高度なキャッシングやクエリの無効化アルゴリズムを実装するのに非常に役立ちます。 back4app graphqlのためのflutterツールキット graphql apiと対話するために、素晴らしい graphql flutter https //github com/zino app/graphql flutter ライブラリを活用します。では、ライブラリが提供する機能を理解しましょう クエリとミューテーションのサポート。 back4appダッシュボードで定義されたすべてのスキーマは、back4app graphqlエンドポイントに直接変換され、クエリまたはミューテーションとして利用可能です。 クエリを使用すると、単一のapi呼び出しで複数のクラスからネストされたデータを取得できます。 クエリは主にデータ取得の目的で行われ、キャッシュされます。 back4app graphqlは、地理位置情報、時間、正規表現、全文検索機能をサポートするリッチなクエリメソッドを提供します。 ミューテーションを使用すると、複数のクラスエントリを更新できるapi呼び出しを行うことができます。 ミューテーションは主にデータの作成、編集、削除で構成されます。 以下は、私がback4appで作成したprograminglanguageクラスです back4appのapiのgraphqlセクションに移動すると、以前に示されたback4appのコンソールが表示されます。このコンソールには、すべてのミューテーションとクエリが自動的に作成されます！ back4appのapiのgraphqlセクションに行くと、以前に示されたback4appのコンソールが表示されます。このコンソールには、すべてのミューテーションとクエリが自動的に作成されます！ 上の画像では、programminglanguageクラスからすべての言語をリストするためにback4app graphqlを使用しました。 同様に、ミューテーションを活用してprogramminglanguage back4appクラスにエントリを作成できます。 クエリポーリング 1 query( 2 query( 3 options queryoptions( 4 document get all programming languages, // this is the query string you just created 5 pollinterval 10, //setting up polling 6 ), 7 builder (queryresult result) { 8 if (result errors != null) { 9 return text(result errors tostring()); 10 } 11 12 if (result loading) { 13 return text('loading'); 14 } 15 16 // it can be either map or list 17 list programminglanguages = result data\['programminglanguages']; 18 19 return listview\ builder( 20 itemcount programminglanguages length, 21 itembuilder (context, index) { 22 final repository = programminglanguages\[index]; 23 return text(programminglanguages\['name']); 24 }); 25 }, 26 ); いくつかのユースケースでは、サブスクリプションが過剰になる可能性があります。データを定期的に更新する必要がある場合、クライアントのクエリポーリング機能を使用できます。 これにより、最新のデータを定期的に取得できます。たとえば、1分ごとにバックグラウンドデータを取得することができます。 メモリ内キャッシュ 1 static future\<queryresult> callquery( 2 {dynamic documentnode, dynamic variables, fetchpolicy fetchpolicy}) { 3 return singleton client query( 4 queryoptions( 5 context singleton context, 6 documentnode documentnode, 7 variables variables, 8 fetchpolicy fetchpolicy ?? fetchpolicy cacheandnetwork, 9 ), 10 ); 11 } flutter graphqlクライアントはデータをキャッシュするためのさまざまな方法を実装しています。それらは次のとおりです 再検証中のキャッシュ 記事のリストを取得する簡単な例を考えてみましょう。リストデータをキャッシュしたいとき、特定の記事に移動してから戻るときです。再検証中のキャッシュメカニズムは、このデータをクエリする方法を実装しています。これは、データを取得するためにapiコールが行われているにもかかわらず、古いデータが表示に使用され、新しいデータが取得されるときに新しいデータが表示されることを意味します。 キャッシュのみ この方法では、デバイスにデータがない場合にのみネットワークコールが行われます。これは、変更されないデータポイントのオフライン同期機能と組み合わせると価値があります。これにより、ネットワークが最適化され、リソースが節約されます。 ネットワークのみ データのキャッシュを保持したくない稀な場合には、flutter graphqlライブラリのネットワークのみモードを使用できます。 オフラインキャッシュ同期 モバイル体験は、デフォルトでオフライン対応であることを期待しています。flutterとrest apiを使用してこれを行うのは非常に面倒です。データをsqliteデータベースに保存し、データが存在するかどうかを確認し、データを取得するためのsqlクエリを書き、さらにデータを更新するためのネットワーク呼び出しを行う必要があります。 これは非常に多くの作業であり、このプラグインを使用することで完全に回避され、クエリのオフラインサポートが私たちのflutterアプリケーションに組み込まれています。 ファイルストレージ 1 mutation($files \[upload!]!) { 2 multipleupload(files $files) { 3 id 4 filename 5 mimetype 6 path 7 } 8 } 9 10 import 'package\ http/http dart'; 11 12 // 13 14 string filepath = '/aboslute/path/to/file ext'; 15 final file = await multipartfilefrom(file(filepath)); 16 17 final queryresult r = await graphqlclientclient mutate( 18 mutationoptions( 19 documentnode gql(uploadmutation), 20 variables { 21 'files' \[file], 22 }, 23 ) 24 );gr 多くのgraphqlサーバーライブラリは、graphqlクエリを使用したファイルアップロード機能をサポートしていません。ファイルをアップロードするには、別のrestエンドポイントを呼び出す必要があります。ファイルをアップロードし、urlを取得し、それを文字列の形式でgraphql apiに渡します。また、ファイル名などのファイルメタデータを手動で管理する必要があります。 back4appは、back4app graphql apiに組み込まれたファイルアップロード標準をサポートしています。ファイルがアップロードされると、それはgraphqlのfileタイプとしてアップロードされ、graphqlのback4app fileに対応します。自動的に、私たちはaws s3にバックアップされた高スケーラブルなback4appファイルストレージにファイルを保存しました。 楽観的な結果 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) ユーザーは非常に魅力的なuiと瞬時のフィードバックを期待するようになりました。楽観的uiは、基本的にアクションが完了するのを待つべきではなく、代わりにアクションが完了したことをユーザーにフィードバックとして示すべきだというui/uxの原則です！ これは、アクションが99%の確率で成功するという仮定のもとに行われます。残念ながらアクションが失敗した場合は、アクションを完了できなかったという失敗メッセージを表示します。 flutter graphqlは、楽観的なミューテーションを定義するためのサポートが組み込まれており、この複雑なuiインタラクションシステムを実装するのがはるかに簡単になります。 したがって、これにより、現代のアプリケーションを構築するための非常に最適化された基盤が得られます。 結論 このガイドでは、back4appでのflutterプロジェクトにgraphqlを使用することのいくつかの重要な利点を紹介しました。次のガイドでは、コードに手を加え、back4app apiを使用するためのflutter graphqlクライアントの設定を開始します。