FlutterでのGraphQL設定とBack4appへの接続ガイド

flutter graphql セットアップ イントロダクション 前回のチュートリアルでは、flutterでback4app graphqlを使用する利点を理解しました。この記事では、プロジェクトの基本的なスキャフォールドを設定し、back4appサーバーに接続します。 目標 flutter 環境のセットアップ flutter graphql セットアップの解剖 flutter graphql 接続 flutter graphql 接続の再利用とパターン 前提条件 ユーザーはdartとflutterの基本的な理解を持っている必要があります； 必須ではありませんが、graphqlクックブックは理解するのに役立ちます。 graphqlの概念 0 back4app hubからアプリをセットアップする アプリを作成する必要があります。ドキュメントに従ってください https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app このチュートリアルのために必要なクラスを設定するためにback4app hubを使用します。 次に進んでください https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql apiに接続をクリックしてください。 新しく作成したアプリを選択し、これで完了です！ 1 flutterの設定 flutterの設定は比較的簡単です。公式のflutterウェブサイトの設定手順に従います。 公式のflutterウェブサイト https //flutter dev/docs/get started/install 。 その後、次のコマンドを使用してシンプルなflutterアプリケーションを作成します 次のコマンドを使用してすべてが正常であることを確認します flutter doctor flutter doctor , アプリケーションを実行します 2 flutter graphqlライブラリのインストール このクライアントを実装するために、最初の記事で述べたようにflutter graphqlライブラリを使用します。 これをパッケージに追加します pubspec yaml pubspec yaml 3 flutter graphqlプロバイダーの作成 graphqlでは複数のエンドポイントを扱う必要がなく、リクエストデータを照会するために使用される単一のエンドポイントのみがあります。そして、graphqlクエリをそのエンドポイントに送信します。一般的に、私たちが行うことは、適切なヘッダーを送信し、必要に応じてクエリをフォーマットする責任を持つクライアントのインスタンスを作成することです。 クライアントを作成しますが、そのためにはリンク（httplinkクラスのインスタンス）とキャッシュストアが必要です。私たちは httplink httplink をリンクとして使用し、キャッシングにはoptimisticcacheを使用します。コードは以下のように記述されます 次に、 main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart に以下の内容を書きます 1 final httplink httplink = httplink( 2 uri 'https //parseapi back4app com/graphql', 3 headers { 4 'x parse application id' kparseapplicationid, 5 'x parse client key' kparseclientkey, 6 }, //getheaders() 7 ); 8 9 valuenotifier\<graphqlclient> client = valuenotifier( 10 graphqlclient( 11 cache optimisticcache(dataidfromobject typenamedataidfromobject), 12 link httplink, 13 ), 14 ); 15 4 graphqlを使用してback4appに接続 back4appダッシュボードに移動し、「apiコンソール」>「graphqlコンソール」のオプションを選択します メモ api url parseアプリid parseクライアントid 新しいファイルを作成します constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart をプロジェクトの lib lib フォルダーに作成します。 5 データのクエリ 私たちのコンポーネントは、ウィジェットに必要な詳細を提供するgraphqlproviderウィジェットでラップされます。 ステップ2で作成したクライアントのインスタンスを提供する必要があります。 私たちはgraphqlコンソールを使用して、クエリを書きます。graphqlクエリについての詳細は、私たちの graphqlクックブックセクション。 https //www back4app com/docs/parse graphql/graphql getting started 1 import 'package\ graphql flutter/graphql flutter dart'; 2 import 'constants dart'; 3 4 class myhomepagestate extends state\<myhomepage> { 5 string name; 6 string saveformat; 7 string objectid; 8 9 string query = ''' 10 query findlanguages{ 11 languages{ 12 count, 13 edges{ 14 node{ 15 name, 16 saveformat 17 } 18 } 19 } 20 } 21 '''; 22 23 @override 24 widget build(buildcontext context) { 25 return safearea( 26 child scaffold( 27 appbar appbar( 28 title text( 29 'parsing data using graphql', 30 ), 31 ), 32 body query( 33 options queryoptions( 34 documentnode gql(query), 35 ), 36 builder ( 37 queryresult result, { 38 refetch refetch, 39 fetchmore fetchmore, 40 }) { 41 if (result data == null) { //check if data is loading 42 return center( 43 child text( 44 "loading ", 45 style textstyle(fontsize 20 0), 46 )); 47 } 48 //to implement rendering logic 49 }, 50 ), 51 ), 52 ); 53 } 54 } 6 リストをレンダリングする 私たちは、 listview listview ウィジェットを使用してリストをレンダリングします、 main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart 1 else { 2 return listview\ builder( 3 itembuilder (buildcontext context, int index) { 4 return listtile( 5 title text(result data\["programminglanguages"]\["edges"]\[index]\["node"]\['name']), 6 trailing text( 7 result data\["programminglanguages"]\["edges"]\[index] 8 \["node"]\['stronglytyped'] ? "strongly typed" "weekly typed" 9 ), 10 ); 11 }, 12 itemcount result data\["programminglanguages"]\["edges"] length, 13 ); 14 } 15 私たちは画面に次のものを表示する必要があります 結論 私たちはflutter graphqlクライアントを設定し、back4app graphql apiに接続しました。 同じコードはここにあります https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup