FlutterプロジェクトでGraphQLを使用したデータ保存テクニック

graphqlを使用してリレーショナルデータを保存する はじめに 過去2つのチュートリアルでは、flutterアプリプロジェクトからback4appデータベースに対してgraphqlクエリとミューテーションを実行しました。私たちは、非常に堅牢で広く使用されているプロジェクトである graphql flutter https //pub dev/packages/graphql flutter/install をgraphqlクライアントとして使用しています。これらのチュートリアルでは、クラスの最も一般的なタイプを持つ非常にシンプルなデータモデルを使用しました。 back4appは、リレーショナルデータを作成、保存、クエリすることを可能にする柔軟なプラットフォームです。このチュートリアルでは、back4appバックエンドでリレーショナルデータを保存およびクエリする際に、リレーションとポインタを使用する方法を示すことで、この機能を深く掘り下げていきます。また、back4appが提供する他のデータタイプ、例えばgeopointerやdatetimeについても探ります。 目標 この記事の最後には、あなたは以下のことができるようになります リレーショナルデータの作成/更新および削除（ポインタとリレーションを使用） geopointersの作成/更新 日付と時刻の作成/更新。 前提条件 このチュートリアルを完了するには、以下が必要です： 前の2つのガイドを必ず読んでください テンプレートから始める と graphqlミューテーション プロジェクトファイルを githubリポジトリ からダウンロードしてください。これには前のコードと新しいguiが含まれています。 vs codeやandroid studioなどのflutter ideでダウンロードしたプロジェクトを開いてください。 back4appアカウントを作成する必要があります。 こちら 前のチュートリアルに従って、チュートリアルをback4appに接続してください。 テンプレートから始める 1 バックエンドの設定 私たちの 前のプロジェクト https //www back4app com/docs/flutter/flutter crud app example では、データモデルは非常にシンプルで、単一のクラス：language だけでした。今度は、2つの新しいクラスを追加し、それらをlanguageに関連付けることで、より複雑にします。 フォーマットの創設者 列名 説明 名前 言語の創設者の名前 列名 説明 名前 所有者会社の名前 所有日 会社が所有権を取得した日 本社 会社の本社所在地 クラス language とクラス founder の間に一対一の関係を作成します。これにより、特定の言語の創設者がわかります。次に、クラス language とクラス ownership の間に一対多の関係を作成します。これにより、どの組織/会社がその言語を所有しているか、彼らの本社、そしてその言語の所有権を取得した日付がわかります。データモデルは次のようになります アプリに移る前に、必要なクラスとデータをバックエンドに作成しましょう。back4appアプリに移動し、graphql playgroundに行きます。以下のミューテーションを使用して、言語の創設者の名前を保存するクラス founder を作成します。 1 mutation createclass { 2 createclass(input { 3 name "founder" 4 schemafields { 5 addstrings \[{name "name"}] 6 } 7 }){ 8 class{ 9 schemafields{ 10 name 11 typename 12 } 13 } 14 } 15 } 今、私たちのクラスにいくつかの創業者の名前を入力しましょう。次のステップでは、このデータを使用して、創業者のクラスを指す新しい言語を作成します。以下のミューテーションをback4app graphql playgroundで使用して、あなたの創業者を作成してください。 1 mutation createobject{ 2 createfounder(input {fields {name "james gosling"}}){ 3 founder{ 4 id 5 name 6 } 7 } 8 } ここでは、javaプログラミング言語の創業者の名前を入力しました。他の人についても同様にできますが、今はこれで私たちのガイドには十分です。 「 ownership 」クラスを作成しましょう。ここでは、言語の所有権、設立日（日時）、および所有者の本社の場所（geopointer）を保存します。後で、languageクラスとownershipの関係を作成します。以下のコードを実行してクラスを作成してください 1 mutation createclass { 2 createclass(input { 3 name "ownership" 4 schemafields { 5 addstrings \[{name "name"}] 6 adddates \[{name "date owned"}] 7 } 8 }){ 9 class{ 10 schemafields{ 11 name 12 typename 13 } 14 } 15 } 16 } 次に、以下のミューテーションを使用して ownership クラスを埋めてください 1 mutation createobject{ 2 createownership(input {fields {name "sun microsystems"}}){ 3 ownership{ 4 id 5 name 6 } 7 } 8 } 1 mutation createobject{ 2 createownership(input {fields {name "oracle"}}){ 3 ownership{ 4 id 5 name 6 } 7 } 8 } 次に、ページを更新し、データベースブラウザの ownership ownership クラスに移動します。右上から 新しい列を追加 を選択します。最初のドロップダウンからgeopointを選択し、2番目のテキストフィールドに headquarters と名前を付けます。そして、すべてをそのままにして 列を追加 ボタンを押します。 次に、あなたの 言語 言語 クラスに移動します。データベースブラウザで、 所有権 所有権 と 創設者 創設者 クラスに関係を追加しましょう。 新しい列を追加 をクリックし、データ型としてポインタを選択し、ターゲットクラスとして 創設者 創設者 を選択します。列に同じ名前 founder を付けて、列を追加を押します。 次に、所有権という新しい列を追加するプロセスを繰り返し、データ型として関係を選択し、クラスとして 所有権 所有権 を選択します。 これで、flutterアプリで使用するためのデータモデルが準備でき、データの保存と更新を開始できます。 2 ポインタの作成/追加と削除 今、あなたは私たちの githubリポジトリ https //github com/templates back4app/flutter graphql/tree/complex mutations からプロジェクトのボイラープレートコードをダウンロードする必要があります。プロジェクトをback4appに接続するには、graphql playgroundに移動し、下の画像に示されているようにキーとapi urlをコピーします。今、それらを constants dart constants dart に貼り付けて、プロジェクトを実行します。 エミュレーターでアプリケーションを実行します。下部の m フローティングボタンに移動します。それが私たちをシンプルなミューテーションを行ったページに連れて行きます。ここには、追加のフローティングアクションボタン cm が見つかります。それが私たちが複雑なgraphqlミューテーションを実行するために使用するボタンです。 cm ボタンをクリックすると、ガイドで行う各操作のための4つのボタンが表示されます。 今、 databaseutils dart databaseutils dart ファイルを開き、 addpointers() addpointers() メソッドまでスクロールします。ここでポインタを追加するロジックを追加します。私たちはjames goslingをjava言語の創設者として指名します。まず、back4appのバックエンドに進み、創設者（james gosling）と言語（java）の両方の objectid objectid をコピーする必要があります。 データへのポインタの更新/作成 アプリに進む databaseutils dart databaseutils dart と addpointers() addpointers() メソッド内で string addpointerquery string addpointerquery を初期化し、以下のようにポインタを追加するためのgraphqlクエリを割り当てます 1 string addpointerquery= 2 ''' 3 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 4 updatelanguage(input {id \\$languageid, fields \\$founderid}) 5 { 6 language{ 7 objectid 8 } 9 } 10 } 11 '''; そして 最終変数 最終変数 を初期化して変数を割り当てます。 rowobjectid rowobjectid と pointersid pointersid をパラメータとして取ることに注意してください。 rowobjectid rowobjectid ポインタを指す行のオブジェクトid pointersid pointersid 指される行のオブジェクトid。 したがって、 変数 変数 を次のように宣言します 1 final variable={ 2 "userid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "link" pointersid 6 } 7 } 8 }; 今、前回のガイドのように、 graphqlclient graphqlclient を初期化し、 queryoptions() queryoptions() を使ってクエリを送信し、 queryresults() queryresults() のインスタンスを返します。 1 graphqlconfiguration configuration = graphqlconfiguration(); 2 graphqlclient client = configuration clienttoquery(); 3 4 queryresult queryresult = await client query( 5 queryoptions(documentnode gql(addpointerquery), variables variable), 6 ); 7 return queryresult; これがあなたの addpointers() addpointers() メソッドの見た目になるはずです 1 future\<queryresult> addpointers(string rowobjectid, string pointersid) async{ 2 print('addpointers'); 3 //code for add/update pointers 4 string addpointerquery= 5 ''' 6 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 7 updatelanguage(input {id \\$languageid, fields \\$founderid}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "userid" rowobjectid, 17 "founderid" { 18 "founder" { 19 "link" pointersid 20 } 21 } 22 }; 23 graphqlconfiguration configuration = graphqlconfiguration(); 24 graphqlclient client = configuration clienttoquery(); 25 26 queryresult queryresult = await client query( 27 queryoptions(documentnode gql(addpointerquery), variables variable), 28 ); 29 return queryresult; 30 } 今すぐアプリをホットリスタートし、 cm ボタンをミューテーションページに移動し、次に add pointers ボタンを押します。ここで、最初のテキストフィールドにポインタを追加する必要がある行の objectid objectid を入力し、2番目のテキストフィールドにそれが指す行の objectid objectid を入力してから、 done を押します。今、ダッシュボードを確認すると、 founder 列の下に関係が表示されるはずです。それをクリックすると、 founder クラスを指す行に移動します。 データへのポインタを削除する 次に、関係を削除するロジックを書くメソッド deletepointers() deletepointers() に進みます。関係を削除するには、上記のクエリにわずかな変更を加えるだけです。つまり、変数の中で "link" "link" を "remove" "remove" に変更します。したがって、 最終変数 最終変数 を初期化した後は、次のようになります 1 final variable={ 2 "languageid" rowobjectid, 3 "founderid" { 4 "founder" { 5 "remove" pointersid 6 } 7 } 8 }; 他のすべては、 addpointers() addpointers() と全く同じように見えます。したがって、あなたの deletepointers() deletepointers() メソッドは次のようになります 1 future\<queryresult> deletepointers(string rowobjectid, string pointersid) async{ 2 print('deletepointers'); 3 //code for delete pointers 4 string removepointersquery= 5 ''' 6 mutation addpointer(\\$languageid id!, \\$founderid updatelanguagefieldsinput! ){ 7 updatelanguage(input {id \\$languageid, fields \\$founderid}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "languageid" rowobjectid, 17 "founderid" { 18 "founder" { 19 "remove" pointersid 20 } 21 } 22 }; 23 graphqlconfiguration configuration = graphqlconfiguration(); 24 graphqlclient client = configuration clienttoquery(); 25 26 queryresult queryresult = await client query( 27 queryoptions(documentnode gql(removepointersquery), variables variable), 28 ); 29 return queryresult; 30 31 } 今、あなたはback4appダッシュボードに進み、特定の行の 創業者列が削除されたことを確認できます。 3 日時データの作成/追加と削除 もし覚えていれば、私たちは以前にクラス ownership を作成し、いくつかのデータをそこに保存しました。これらはjavaプログラミング言語を所有していた会社の名前です。まず、所有権を取得した日付を入力しましょう。 次に、 databaseutils dart databaseutils dart に進み、 adddatetime() adddatetime() 関数を作成するか、スクロールダウンします。ここで、クラスにデータタイムデータ型を追加するロジックを書きます。 string adddatetimequery string adddatetimequery を初期化し、日時データを作成するためのクエリを割り当てます 1 string adddatetimequery= 2 ''' 3 mutation addtime(\\$rowid id!,\\$dateowned date!){ 4 updateownership(input {id \\$rowid, fields {date owned \\$dateowned}}) 5 { 6 ownership{ 7 objectid 8 } 9 } 10 } 11 '''; そして、 最終変数 最終変数 を次のようにします 1 final variable={ 2 "rowid" rowobjectid, 3 "dateowned" datetime 4 }; 今、 graphqlclient graphqlclient を初期化し、 queryoption() queryoption() を通してクエリを渡します。これがあなたの関数の見た目になります 1 future\<queryresult> adddatetime(string rowobjectid, string datetime) async{ 2 print('adddatetime'); 3 //code for add/update date time 4 string adddatetimequery= 5 ''' 6 mutation addtime(\\$rowid id!,\\$dateowned date!){ 7 updateownership(input {id \\$rowid, fields {date owned \\$dateowned}}) 8 { 9 ownership{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "rowid" rowobjectid, 17 "dateowned" datetime 18 }; 19 graphqlconfiguration configuration = graphqlconfiguration(); 20 graphqlclient client = configuration clienttoquery(); 21 queryresult queryresult = await client query( 22 queryoptions(documentnode gql(adddatetimequery), variables variable), 23 ); 24 return queryresult; 25 } 今、 hot restart アプリケーションを実行し、 objectid を含む行の sun microsystems の name 列の値をメモしてください。 add date time ボタンを押します。最初のテキストフィールドにメモした objectid を入力し、 “02 24 1982” を mm dd yyyy 形式で、javaが公開された日として入力し、 done ボタンを押します。 back4appのバックエンドに進むと、 24 feb 1982 at 00 00 00 utc の形式で日付が表示され、これはデータ型が日付 時間データ型として識別されたことを意味します。同様に、 “01 27 2010” を date owned に対して oracle に追加することができます。 4 ジオポインターデータの追加/更新 企業の本社を特定するために、 ownership テーブルにジオポインターデータを追加しましょう。 database utils dart ファイルに進み、 addgeopointers() 関数までスクロールダウンします。次に、 string addgeopointers を初期化し、該当するクエリを割り当てます 1 string addgeopointers= 2 ''' 3 mutation addgeopointer(\\$objectid id!,\\$latitude float!,\\$longitude float!){ 4 updateownership(input {id \\$objectid, fields { headquarters {latitude \\$latitude, longitude \\$longitude}}}) 5 { 6 ownership{ 7 objectid 8 } 9 } 10 } 11 '''; と final variable を次のようにします 1 final variable={ 2 "objectid" rowobjectid, 3 "latitude" double parse(latitude), 4 "longitude" double parse(longitude), 5 }; 「 latitude 」と longitude はダブル値なので、送信する前に文字列からダブルに解析する必要があります。 grapqlclient を初期化し、 queryoption() でクエリを渡します。これがあなたの addgeopointers() 関数の見た目になります 1 future\<queryresult> addgeopointers(string rowobjectid, string latitude, string longitude) async{ 2 print('add geopointers'); 3 //code for add/update geopointers 4 string addgeopointers= 5 ''' 6 mutation addgeopointer(\\$objectid id!,\\$latitude float!,\\$longitude float!){ 7 updateownership(input {id \\$objectid, fields { headquarters {latitude \\$latitude, longitude \\$longitude}}}) 8 { 9 ownership{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable={ 16 "objectid" rowobjectid, 17 "latitude" double parse(latitude), 18 "longitude" double parse(longitude), 19 }; 20 graphqlconfiguration configuration = graphqlconfiguration(); 21 graphqlclient client = configuration clienttoquery(); 22 queryresult queryresult = await client query( 23 queryoptions(documentnode gql(addgeopointers), variables variable), 24 ); 25 return queryresult; 26 } アプリをホットリスタートして、 ジオポインタを追加 ボタンを選択します。最初のテキストボックスに 37 35 37 35 を入力し、2番目のテキストボックスに 121 95 121 95 を入力します。 objectid を入力し、sun microsystemsを 名前 として選択し、完了を押します。次に、back4appのバックエンドに進むと、 (37 35, 121 95) が表示され、これは本社の座標であり、ジオポインタとして識別されることを示しています。 5 関係の追加/更新と削除 ポインタでは1行のみを指すことができますが、関係の助けを借りて複数の行に接続できます。したがって、 言語 テーブルをこれらの2行に対して、 所有権 のために java 言語に関連付けましょう。 関係の追加/更新 次に進む database utils dart database utils dart ファイルに進み、次の addrelation() addrelation() 関数に進んでロジックを書きます。 string addrelationquery string addrelationquery を初期化し、関係のクエリを次のように割り当てます 1 string addrelationquery= 2 ''' 3 mutation addrelation(\\$objectid id!, \\$relationid ownershiprelationinput){ 4 updatelanguage(input {id \\$objectid, fields {ownership \\$relationid}}) 5 { 6 language{ 7 objectid 8 } 9 } 10 } 11 '''; そして、 最終変数 最終変数 は次のようになります 1 final variable= { 2 "objectid" objectid, 3 "relationid" relationid 4 }; したがって、 graphqlclient graphqlclient を初期化し、以前のようにクエリを渡すと、あなたの database utils dart database utils dart は次のようになります 1 future\<queryresult> addrelation(string rowobjectid, string relationid) async{ 2 //code for add/update relation 3 print('addrelation'); 4 string addrelationquery= 5 ''' 6 mutation addrelation(\\$objectid id!, \\$relationid ownershiprelationinput){ 7 updatelanguage(input {id \\$objectid, fields {ownership \\$relationid}}) 8 { 9 language{ 10 objectid 11 } 12 } 13 } 14 '''; 15 final variable= { 16 "objectid" rowobjectid, 17 "relationid" { 18 "add" relationid 19 } 20 }; 21 graphqlconfiguration configuration = graphqlconfiguration(); 22 graphqlclient client = configuration clienttoquery(); 23 queryresult queryresult = await client query( 24 queryoptions(documentnode gql(addrelationquery), variables variable), 25 ); 26 print(queryresult); 27 return queryresult; 28 } 成功 あなたのアプリはついにback4appにリレーショナル、日付時刻、geopointersデータを保存しました! 結論 このガイドでは、flutterアプリプロジェクトを使用してback4appにリレーショナルデータを保存する方法を学びました。また、geopointersやdatetimeなどの他のgraphqlミューテーションを使用して、データの作成、更新、削除を行いました。次のチュートリアルでは、flutterアプリへのクエリに深く掘り下げていきます。 このガイドはasim junainによって書かれました、 hybrowlabs https //www back4app com/partners/software development company