Flutter GraphQL einrichten - Schritt für Schritt Anleitung

flutter graphql einrichtung einführung im letzten tutorial haben wir die vorteile der verwendung von back4app graphql mit flutter verstanden in diesem artikel werden wir das grundlegende gerüst für das projekt einrichten und eine verbindung zum back4app server herstellen ziele einrichtung der flutter umgebung anatomie der flutter graphql einrichtung flutter graphql verbindung wiederverwendung und muster der flutter graphql verbindung voraussetzungen wir setzen voraus, dass der benutzer ein grundlegendes verständnis von dart und flutter hat; obwohl nicht notwendig, wird das graphql kochbuch nützlich sein, um die graphql konzepte zu verstehen 0 app von back4app hub einrichten wir müssen eine app erstellen, sie können die dokumentation unter https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app wir werden den back4app hub verwenden, um die notwendigen klassen für dieses tutorial einzurichten bitte gehen sie zu https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql klicken sie auf api verbinden wählen sie die neu erstellte app aus und dann sind sie fertig! 1 flutter einrichten die einrichtung von flutter ist relativ schmerzlos wir werden die einrichtungsanweisungen auf der offiziellen flutter website https //flutter dev/docs/get started/install danach werden wir eine einfache flutter anwendung mit dem befehl erstellen überprüfen sie, ob alles in ordnung ist, indem sie den befehl flutter doctor flutter doctor , indem sie die anwendung ausführen 2 installation der flutter graphql bibliothek für die implementierung dieses clients werden wir die flutter graphql bibliothek verwenden, wie im ersten artikel erwähnt wir werden dies jetzt zu ihren paketen hinzufügen pubspec yaml pubspec yaml 3 erstellen sie einen flutter graphql provider in graphql müssen wir nicht mit mehreren endpunkten arbeiten, wir haben nur einen einzigen endpunkt, der verwendet wird, um die anfragedaten abzufragen und wir senden graphql abfragen an diesen endpunkt im allgemeinen erstellen wir eine instanz des clients, der dafür verantwortlich ist, die entsprechenden header zu senden und die abfragen nach unseren bedürfnissen zu formatieren wir werden einen client erstellen, dafür benötigen wir einen link (instanz der httplink klasse) und einen cache speicher wir werden httplink httplink als unseren link und optimisticcache für unser caching verwenden der code wird folgendermaßen geschrieben in der main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart werden wir folgendes schreiben 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 verbinden sie sich mit back4app über graphql gehen sie zum back4app dashboard in der option „api konsole“ > „graphql konsole“ notieren sie sich api url parse app id parse client id wir werden eine neue datei constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart im lib lib ordner unseres projekts erstellen 5 abfragen von daten unser komponenten wird vom graphqlprovider widget umschlossen, das die notwendigen details für das widget bereitstellt wir müssen eine instanz des clients bereitstellen, die wir in schritt 2 erstellt haben wir werden die graphql konsole verwenden, um unsere abfrage zu schreiben sie können mehr über graphql abfragen in unserem graphql kochbuchabschnitt 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 die liste rendern wir werden das listview listview widget verwenden, um die liste im 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 wir sollten folgendes auf unserem bildschirm sehen fazit wir haben den flutter graphql client konfiguriert und eine verbindung zur back4app graphql api hergestellt den code dafür finden sie hier https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup