GraphQLを使用したFlutterでのCRUDアプリケーション構築ガイド

graphqlを使用したflutter crudアプリの例 はじめに 最初のflutter graphqlガイドでは、graphql apiを使用してflutterプロジェクトを設定し、back4app上のシンプルなデータに接続してクエリを実行する方法を学びました。また、back4app graphql playgroundを使用して、クエリ/ミューテーションを実行し、アプリデータベースを作成/ポピュレートする方法も学びました。 このチュートリアルでは、graphqlミューテーションを使用して、アプリから直接back4appバックエンドのデータを作成、更新、削除する機能を追加します。 目標 この記事の終わりまでに、あなたは以下のことができるようになることを期待しています graphql apiを使用してバックエンドにデータを作成する。 graphql apiを使用してバックエンドのデータを更新する。 graphql apiを使用してバックエンドから既存のデータを削除する。 前提条件 このチュートリアルを完了するには、次のものが必要です： 前のガイドを読む必要があります 「flutter graphql プロジェクト」 このガイドの出発点を理解するために。 前のプロジェクトを使用します。持っていない場合は、 ここからダウンロードできます android studioやvs codeのようなflutterコードを書くためのide。 作成できる back4appアカウント back4app graphql flutter依存関係 https //pub dev/packages/graphql flutter 注意：back4app graphql apiをよりよく理解したい場合は、私たちの graphqlクックブック https //www back4app com/docs/parse graphql/graphql getting started を見て、apiプレイグラウンドでgraphqlスキーマも確認してください。 1 guiの設定 新しいファイルを作成します mutation page dart mutation page dart 。ここでは、ユーザーからの入力を受け取り、mutationタスクを実行するためのguiを作成します。次に、以下のコードを mutation page dart mutation page dart に貼り付けます。 1 import 'package\ back4appgraphqldemo/app ui dart'; 2 import 'package\ back4appgraphqldemo/database utils dart'; 3 import 'package\ flutter/material dart'; 4 5 class mutationpage extends statelesswidget { 6 7 string langname,saveformat,objectid; 8 databaseutils utils; 9 10 @override 11 widget build(buildcontext context) { 12 return appui( 13 onchangedname (text){ 14 langname=text; 15 }, 16 onchangedsaveformat (text){ 17 saveformat=text; 18 }, 19 onchangedobjectid (text){ 20 objectid=text; 21 }, 22 senddatabuttonpressed (){ 23 }, 24 deletedatabuttonpressed (){ 25 }, 26 updatebuttonpressed (){ 27 }, 28 ); 29 } 30 } appui() appui() ウィジェットはすでに作成されています。したがって、私たちは mutationpage mutationpage という名前のクラスを作成し、 appui appui ウィジェットをそのウィジェットとして返しました。また、最初のテキストフィールドのテキストが langname langname に保存され、2番目のものが saveformat saveformat に、最後のものが objectid objectid に保存されるように、テキストフィールドのコールバック関数を初期化しました。次に、 main dart main dart に進み、 floatingactionbutton floatingactionbutton パラメータを scaffold() scaffold() ウィジェットの myhomepage myhomepage クラスに追加し、以下のコードを渡します 1 floatingactionbutton row( 2 mainaxisalignment mainaxisalignment end, 3 children \[ 4 floatingactionbutton( 5 herotag 'mutation page', 6 child text('m', 7 style textstyle( 8 color colors white, 9 ), 10 ), 11 onpressed (){ 12 navigator pushreplacement(context, materialpageroute( 13 builder ((context){ 14 return mutationpage(); 15 }) 16 )); 17 }, 18 ), 19 ], 20 ), これにより、私たちをホームページから mutationpage() mutationpage() にナビゲートするフローティングボタンが作成されます。これで私たちのguiは設定されました。アプリをホットリスタートしてguiを確認できます。これがあなたの main dart main dart の見た目であるべきです 1 import 'package\ back4appgraphqldemo/mutation page dart'; 2 import 'package\ flutter/material dart'; 3 import 'package\ graphql flutter/graphql flutter dart'; 4 import 'consonents dart'; 5 import 'dart\ ui'; 6 7 void main() { 8 runapp(myapp()); 9 } 10 11 class myapp extends statelesswidget { 12 @override 13 widget build(buildcontext context) { 14 final httplink httplink = httplink( 15 uri 'https //parseapi back4app com/graphql', 16 headers { 17 'x parse application id' kparseapplicationid, 18 'x parse client key' kparseclientkey, 19 'x parse master key' kparsemasterkey, 20 //'x parse rest api key' kparserestapikey, 21 }, //getheaders() 22 ); 23 24 valuenotifier\<graphqlclient> client = valuenotifier( 25 graphqlclient( 26 cache optimisticcache(dataidfromobject typenamedataidfromobject), 27 link httplink, 28 ), 29 ); 30 31 return materialapp( 32 home graphqlprovider( 33 child myhomepage(), 34 client client, 35 ), 36 ); 37 } 38 } 39 40 class myhomepage extends statefulwidget { 41 @override 42 myhomepagestate createstate() => myhomepagestate(); 43 } 44 45 class myhomepagestate extends state\<myhomepage> { 46 string name; 47 string saveformat; 48 string objectid; 49 50 string query = ''' 51 query findlanguages{ 52 languages{ 53 count, 54 edges{ 55 node{ 56 name, 57 saveformat 58 } 59 } 60 } 61 } 62 '''; 63 64 @override 65 widget build(buildcontext context) { 66 return safearea( 67 child scaffold( 68 appbar appbar( 69 title text( 70 'parsing data using graphql', 71 ), 72 ), 73 floatingactionbutton row( 74 mainaxisalignment mainaxisalignment end, 75 children \[ 76 floatingactionbutton( 77 herotag 'mutation page', 78 child text('m', 79 style textstyle( 80 color colors white, 81 ), 82 ), 83 onpressed (){ 84 navigator pushreplacement(context, materialpageroute( 85 builder ((context){ 86 return mutationpage(); 87 }) 88 )); 89 }, 90 ), 91 ], 92 ), 93 body query( 94 options queryoptions( 95 documentnode gql(query), 96 ), 97 builder ( 98 queryresult result, { 99 refetch refetch, 100 fetchmore fetchmore, 101 }) { 102 if (result data == null) { 103 return center( 104 child text( 105 "loading ", 106 style textstyle(fontsize 20 0), 107 )); 108 } else { 109 return listview\ builder( 110 itembuilder (buildcontext context, int index) { 111 return listtile( 112 title text(result data\["languages"]\["edges"]\[index]\["node"] 113 \['name']), 114 trailing text(result data\["languages"]\["edges"]\[index] 115 \["node"]\['saveformat']), 116 117 ); 118 }, 119 itemcount result data\["languages"]\["edges"] length, 120 ); 121 } 122 }, 123 ), 124 ), 125 ); 126 } 127 } 2 データベースへのデータの作成/追加 進むと graphql configration dart graphql configration dart を見ると、すでに私たちの graphqlclient graphqlclient を設定しており、これをどこでも使用できます。次に、ファイル database utils dart database utils dart を作成し、 データを作成する 操作を行います。クラス databaseutils{} databaseutils{} を作成し、作業するデータパラメータを受け取るコンストラクタを作成します。ここでは langname langname , saveformat saveformat , および objectid objectid 1 import 'package\ back4appgraphqldemo/graphql configration dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 4 class databaseutils{ 5 final string langname,saveformat,objectid; 6 databaseutils({this langname="",this saveformat="",this objectid=""}); 7 } 関数 adddata() adddata() を作成します。これはデータを作成し、私たちの graphqlclient graphqlclient を初期化する非同期関数になります。 graphqlconfigration graphqlconfigration クラスを初期化します。次のコードを senddata() senddata() 関数に貼り付けます 1 future\<queryresult> senddata() async{ 2 string adddata=''' 3 mutation createobject(\\$input createlanguagefieldsinput){ 4 createlanguage(input {fields \\$input}){ 5 language{ 6 name, 7 saveformat 8 } 9 } 10 } 11 '''; 12 final variable ={ 13 "input" { 14 "name" langname, 15 "saveformat" saveformat, 16 } 17 }; 18 19 graphqlconfiguration configuration = graphqlconfiguration(); 20 graphqlclient client = configuration clienttoquery(); 21 22 } ここでは、変数を初期化しました adddata adddata を作成するためのクエリを渡し、 variable variable を初期化しました。これはクエリ変数を渡すためのものです。また、 graphqlclient graphqlclient を初期化しました。これにより、クエリを渡すことができます。以下の方法でクエリを渡すことができます 1 queryresult queryresult = await client query( 2 queryoptions(documentnode gql(adddata), variables variable), 3 ); 4 return queryresult; 私たちは、 graphqlclient graphqlclient インスタンスを使用して、 queryoptions() queryoptions() を受け入れるクエリを書きました。これは、前回のチュートリアルで見たように、クエリを送信するのに役立ちます。結果は、 queryresult queryresult に保存されます。 これがあなたの database utils dart database utils dart の見た目であるべきです 1 import 'package\ back4appgraphqldemo/graphql configration dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 4 class databaseutils{ 5 final string langname,saveformat,objectid; 6 databaseutils({this langname="",this saveformat="",this objectid=""}); 7 future\<queryresult> senddata() async{ 8 string adddata=''' 9 mutation createobject(\\$input createlanguagefieldsinput){ 10 createlanguage(input {fields \\$input}){ 11 language{ 12 name, 13 saveformat 14 } 15 } 16 } 17 '''; 18 final variable ={ 19 "input" { 20 "name" langname, 21 "saveformat" saveformat, 22 } 23 }; 24 25 graphqlconfiguration configuration = graphqlconfiguration(); 26 graphqlclient client = configuration clienttoquery(); 27 28 queryresult queryresult = await client query( 29 queryoptions(documentnode gql(adddata), variables variable), 30 ); 31 return queryresult; 32 } 33 } 次に、あなたのuiクラスに進んでください mutation page dart mutation page dart 。データ送信ボタンのコードを作成します。これは senddatabuttonpressed senddatabuttonpressed パラメータ内にコーディングできます。langnameとsaveformatが必要なので、まずそれが空でないことを確認し、次に databaseutils databaseutils のインスタンスを作成し、 langname langname と saveformat saveformat パラメータを渡します。 1 if(langname isnotempty && saveformat isnotempty){ 2 utils = databaseutils( 3 langname langname, 4 saveformat saveformat , 5 ); 6 } この後、 senddata() senddata() 関数を databaseutils databaseutils インスタンスから呼び出します。 今、あなたは hot restart アプリを使用して、2つのテキストフィールドにそれぞれのデータを入力し、データ送信ボタンを押すことができます。次に、浮動アクションボタンを押してクエリページに戻ると、テーブルにもう1つのデータが追加されているのが見えるでしょう。これがあなたのmutationpageクラスの見た目になります 1 import 'package\ back4appgraphqldemo/app ui dart'; 2 import 'package\ back4appgraphqldemo/database utils dart'; 3 import 'package\ flutter/material dart'; 4 5 class mutationpage extends statelesswidget { 6 7 string langname,saveformat,objectid; 8 databaseutils utils; 9 10 @override 11 widget build(buildcontext context) { 12 return appui( 13 onchangedname (text){ 14 langname=text; 15 }, 16 onchangedsaveformat (text){ 17 saveformat=text; 18 }, 19 onchangedobjectid (text){ 20 objectid=text; 21 }, 22 senddatabuttonpressed (){ 23 if(langname isnotempty && saveformat isnotempty){ 24 utils = databaseutils( 25 langname langname, 26 saveformat saveformat , 27 ); 28 utils senddata(); 29 } 30 }, 31 deletedatabuttonpressed (){ 32 }, 33 updatebuttonpressed (){ 34 }, 35 ); 36 } 37 } 3 データの更新 「 databaseutils databaseutils 」で future future 関数 updatedata() updatedata() を作成します。 string update string update を初期化し、更新クエリと クエリ変数 を final variables final variables に渡します。 1 future\<queryresult> updatedata() async{ 2 string update=''' 3 mutation updateobject(\\$id id!,\\$input updatelanguagefieldsinput){ 4 updatelanguage(input {id \\$id, fields \\$input}){ 5 language{ 6 name, 7 id 8 } 9 } 10 } 11 '''; 12 final variable={ 13 "id"\ objectid, 14 "input" { 15 "name" langname 16 } 17 }; 18 } 次に、私たちの graphqlclient graphqlclient を初期化し、クエリを queryoptions() queryoptions() を通じて送信します。これがあなたのコードの見た目になります 1 future\<queryresult> updatedata() async{ 2 3 string update=''' 4 mutation updateobject(\\$id id!,\\$input updatelanguagefieldsinput){ 5 updatelanguage(input {id \\$id, fields \\$input}){ 6 language{ 7 name, 8 id 9 } 10 } 11 } 12 '''; 13 14 final variable={ 15 "id"\ objectid, 16 "input" { 17 "name" langname 18 } 19 }; 20 21 graphqlconfiguration configuration = graphqlconfiguration(); 22 graphqlclient client = configuration clienttoquery(); 23 24 queryresult queryresult = await client query( 25 queryoptions(documentnode gql(update), variables variable), 26 ); 27 return queryresult; 28 } 今、 mutaion page dart mutaion page dart に戻り、 updatebuttonpressed updatebuttonpressed パラメータにコードを記述します。 langname langname , objectid objectid と saveformat saveformat が空でないことを確認し、その後 updatedata() updatedata() 関数を databaseutils databaseutils クラスから呼び出します。 1 updatebuttonpressed (){ 2 if(langname isnotempty && saveformat isnotempty && objectid isnotempty){ 3 utils = databaseutils( 4 langname langname, 5 saveformat saveformat , 6 objectid objectid 7 ); 8 utils updatedata(); 9 } 10 }, back4app ダッシュボードに移動し、更新する言語を選択して、その objectid をコピーします。 ホットリスタート して、3つのテキストフィールドすべてを埋めます 最初のテキストフィールドに挿入したい言語の新しい 名前 と、2番目に新しい 保存形式 を、3番目に objectid を入力します。今、データを更新ボタンを押して、右下の q フローティングアクションボタンをクリックしてアプリの更新情報を確認します。 4 データの削除 「 deletedata() deletedata() 」という 非同期 関数を databaseutils databaseutils に作成し、「 string delete string delete 」を初期化し、データを削除するためのgraphqlクエリを渡します。「 最終変数 最終変数 」を取り、クエリ変数をそれに渡します。 1 future\<queryresult> deletedata() async{ 2 string delete=''' 3 mutation deleteobject(\\$id id!){ 4 deletelanguage(input {id \\$id}){ 5 language{ 6 name, 7 id 8 } 9 } 10 } 11 '''; 12 final variable={ 13 "id"\ objectid, 14 }; 15 } この場合、削除する必要がある行の objectid objectid のみが必要です。「 graphqlclient graphqlclient 」を初期化し、クエリを「 queryoptions() queryoptions() 」を通じて送信します。 1 future\<queryresult> deletedata() async{ 2 string delete=''' 3 mutation deleteobject(\\$id id!){ 4 deletelanguage(input {id \\$id}){ 5 language{ 6 name, 7 id 8 } 9 } 10 } 11 '''; 12 final variable={ 13 "id"\ objectid, 14 }; 15 16 graphqlconfiguration configuration = graphqlconfiguration(); 17 graphqlclient client = configuration clienttoquery(); 18 19 queryresult queryresult = await client query( 20 queryoptions(documentnode gql(delete), variables variable), 21 ); 22 23 return queryresult; 24 } 「 mutationpage mutationpage 」の deletedatabuttonpressed deletedatabuttonpressed ：パラメータは、「 objectid objectid 」が空でないかnullであるかを確認し、「 deletedata() deletedata() 」関数を呼び出します。アプリケーションを hot restart し、削除する行の「 objectid 」を入力して「 delete data 」ボタンを押します。特定の行が「 language language 」クラスから削除されるはずです。 成功 、あなたのアプリはついにミューテーション操作を完了しました！！！ main dart main dart はこのように見えるべきです 1 import 'package\ back4appgraphqldemo/mutation page dart'; 2 import 'package\ flutter/material dart'; 3 import 'package\ graphql flutter/graphql flutter dart'; 4 import 'consonents dart'; 5 import 'dart\ ui'; 6 7 void main() { 8 runapp(myapp()); 9 } 10 11 class myapp extends statelesswidget { 12 @override 13 widget build(buildcontext context) { 14 final httplink httplink = httplink( 15 uri 'https //parseapi back4app com/graphql', 16 headers { 17 'x parse application id' kparseapplicationid, 18 'x parse client key' kparseclientkey, 19 'x parse master key' kparsemasterkey, 20 //'x parse rest api key' kparserestapikey, 21 }, //getheaders() 22 ); 23 24 valuenotifier\<graphqlclient> client = valuenotifier( 25 graphqlclient( 26 cache optimisticcache(dataidfromobject typenamedataidfromobject), 27 link httplink, 28 ), 29 ); 30 31 return materialapp( 32 home graphqlprovider( 33 child myhomepage(), 34 client client, 35 ), 36 ); 37 } 38 } 39 40 class myhomepage extends statefulwidget { 41 @override 42 myhomepagestate createstate() => myhomepagestate(); 43 } 44 45 class myhomepagestate extends state\<myhomepage> { 46 string name; 47 string saveformat; 48 string objectid; 49 50 string query = ''' 51 query findlanguages{ 52 languages{ 53 count, 54 edges{ 55 node{ 56 name, 57 saveformat 58 } 59 } 60 } 61 } 62 '''; 63 64 @override 65 widget build(buildcontext context) { 66 return safearea( 67 child scaffold( 68 appbar appbar( 69 title text( 70 'parsing data using graphql', 71 ), 72 ), 73 floatingactionbutton row( 74 mainaxisalignment mainaxisalignment end, 75 children \[ 76 floatingactionbutton( 77 herotag 'mutation page', 78 child text('m', 79 style textstyle( 80 color colors white, 81 ), 82 ), 83 onpressed (){ 84 navigator pushreplacement(context, materialpageroute( 85 builder ((context){ 86 return mutationpage(); 87 }) 88 )); 89 }, 90 ), 91 ], 92 ), 93 body query( 94 options queryoptions( 95 documentnode gql(query), 96 ), 97 builder ( 98 queryresult result, { 99 refetch refetch, 100 fetchmore fetchmore, 101 }) { 102 if (result data == null) { 103 return center( 104 child text( 105 "loading ", 106 style textstyle(fontsize 20 0), 107 )); 108 } else { 109 return listview\ builder( 110 itembuilder (buildcontext context, int index) { 111 return listtile( 112 title text(result data\["languages"]\["edges"]\[index]\["node"] 113 \['name']), 114 trailing text(result data\["languages"]\["edges"]\[index] 115 \["node"]\['saveformat']), 116 117 ); 118 }, 119 itemcount result data\["languages"]\["edges"] length, 120 ); 121 } 122 }, 123 ), 124 ), 125 ); 126 } 127 } database utils dart database utils dart のようにする必要があります 1 import 'package\ back4appgraphqldemo/graphql configration dart'; 2 import 'package\ graphql flutter/graphql flutter dart'; 3 4 class databaseutils{ 5 6 final string langname,saveformat,objectid; 7 8 databaseutils({this langname="",this saveformat="",this objectid=""}); 9 10 string delete=''' 11 mutation delete languages(\\$id id!){ 12 deletelanguage(input {id \\$id}){ 13 language{ 14 name, 15 id 16 } 17 } 18 } 19 '''; 20 21 string adddata=''' 22 mutation create languages(\\$input createlanguagefieldsinput){ 23 createlanguage(input {fields \\$input}){ 24 language{ 25 name, 26 saveformat 27 } 28 } 29 } 30 '''; 31 string update=''' 32 mutation update languages(\\$id id!,\\$input updatelanguagefieldsinput){ 33 updatelanguage(input {id \\$id, fields \\$input}){ 34 language{ 35 name, 36 id 37 } 38 } 39 } 40 '''; 41 42 future\<queryresult> senddata() async{ 43 44 final variable ={ 45 "input" { 46 "name" langname, 47 "saveformat" saveformat, 48 } 49 }; 50 print('sendingdata'); 51 52 graphqlconfiguration configuration = graphqlconfiguration(); 53 graphqlclient client = configuration clienttoquery(); 54 55 queryresult queryresult = await client query( 56 queryoptions(documentnode gql(adddata), variables variable), 57 ); 58 return queryresult; 59 60 } 61 future\<queryresult> updatedata() async{ 62 final variable={ 63 "id"\ objectid, 64 "input" { 65 "name" langname 66 } 67 }; 68 69 graphqlconfiguration configuration = graphqlconfiguration(); 70 graphqlclient client = configuration clienttoquery(); 71 72 queryresult queryresult = await client query( 73 queryoptions(documentnode gql(update), variables variable), 74 ); 75 return queryresult; 76 } 77 78 79 future\<queryresult> deletedata() async{ 80 final variable={ 81 "id"\ objectid, 82 }; 83 84 graphqlconfiguration configuration = graphqlconfiguration(); 85 graphqlclient client = configuration clienttoquery(); 86 87 queryresult queryresult = await client query( 88 queryoptions(documentnode gql(delete), variables variable), 89 ); 90 91 return queryresult; 92 } 93 } mutaion page dart mutaion page dart はこのように見えるべきです 1 import 'package\ back4appgraphqldemo/app ui dart'; 2 import 'package\ back4appgraphqldemo/database utils dart'; 3 import 'package\ flutter/material dart'; 4 5 class mutationpage extends statelesswidget { 6 7 string langname,saveformat,objectid; 8 databaseutils utils; 9 10 @override 11 widget build(buildcontext context) { 12 return appui( 13 onchangedname (text){ 14 langname=text; 15 }, 16 onchangedsaveformat (text){ 17 saveformat=text; 18 }, 19 onchangedobjectid (text){ 20 objectid=text; 21 }, 22 23 senddatabuttonpressed (){ 24 if(langname isnotempty && saveformat isnotempty){ 25 utils = databaseutils( 26 langname langname, 27 saveformat saveformat , 28 ); 29 utils senddata(); 30 } 31 }, 32 deletedatabuttonpressed (){ 33 if(objectid isnotempty){ 34 utils = databaseutils( 35 objectid objectid, 36 ); 37 utils deletedata(); 38 } 39 }, 40 updatebuttonpressed (){ 41 if(langname isnotempty && saveformat isnotempty && objectid isnotempty){ 42 utils = databaseutils( 43 langname langname, 44 saveformat saveformat , 45 objectid objectid 46 ); 47 utils updatedata(); 48 } 49 }, 50 ); 51 } 52 } 結論 このガイドでは、flutterアプリでgraphqlミューテーションを使用して back4appで新しいオブジェクトを作成する; back4appのオブジェクトを更新する; back4appのオブジェクトを削除する。 この時点で、完全に機能するflutter graphql crudプロジェクトがあり、次のアプリを開発するための出発点として使用できます。次のガイドでは、クエリに深く入り込み、back4appからデータを取得してflutterアプリに表示する方法を示します。 素晴らしい一日を！