Flutter und GraphQL Integration: Ein Leitfaden für Entwickler

flutter graphql auf back4app einführung da sie hier in die back4app dokumentation eintauchen, wissen sie, dass back4app ein flexibles low code backend ist es ermöglicht ihnen, auf verschiedene arten mit ihrem backend zu interagieren, so wie sie es möchten wenn sie möchten, können sie die rest api verwenden, oder sie können direkt ein native sdk https //pub dev/packages/parse server sdk für flutter verwenden in dieser tutorialreihe werden wir die verwendung der neuen, glänzenden graphql api mit flutter erkunden dieser leitfaden wurde von chinmay, einem back4app partner https //www back4app com/partners/software development company bei hybrowlabs ziele einen überblick über graphql erhalten; verstehen, wie graphql und flutter zusammenpassen; verstehen der flutter tools und bibliotheken, die für graphql verfügbar sind; verstehen der allgemeinen architektur und der schlüsselkonzepte in einer flutter graphql anwendung; voraussetzungen wir verlangen, dass der benutzer ein grundlegendes verständnis von dart und flutter hat; obwohl es nicht notwendig ist, wird das graphql kochbuch nützlich sein, um die back4app graphql spezifikation was ist graphql graphql ist eine alternative architektur zum rest api standard graphql entstand, als das facebook team ihre nativen anwendungen von grund auf neu aufbaute und dringend die daten optimieren musste, die sie vom backend erhielten während sie ihre dienste als eine reihe von ressourcen umgestalteten, waren sie frustriert, weil es sie nicht weiterbrachte sie machten einen schritt zurück und überdachten die daten als ein miteinander verbundenes netzwerk von objekten anstelle von isolierten rest ressourcen dies machte einen großen unterschied in ihrer anwendungsarchitektur und so wurde graphql geboren seit graphql 2015 veröffentlicht wurde, hat es enorme popularität und aufmerksamkeit erlangt und wurde von teams wie twitter, airbnb, atlassian und github übernommen warum graphql? bei hybrowlabs, einem back4app partner https //www back4app com/partners/software development company , entwickeln wir moderne, datengestützte web und mobile anwendungen wir haben back4app als unseren bevorzugten backend service gewählt, aufgrund seiner benutzerfreundlichkeit, optimierung und schema definitionsfunktionen, die auf den bereits großartigen datenbanken bereitgestellt werden die meisten anwendungen, die wir entwickeln, zeigen oder manipulieren daten, die nicht nur aus einer einzigen back4app klasse stammen vielmehr kommen diese daten aus mehreren klassen die kombination aus back4app und graphql macht es uns sehr einfach, solche szenarien zu bewältigen gleichzeitig ermöglicht es uns, den netzwerkfußabdruck auf 2 3 aufrufe pro bildschirmladung zu reduzieren, indem wir nur die daten abrufen, die wir wollen auf der anderen seite wird der cloud code, den wir definieren, aufgrund der stark typisierten natur von graphql leicht dokumentiert dies macht unseren code wartbar und leicht verständlich tldr; hier sind die vorteile der verwendung von graphql der netzwerkfußabdruck wird minimiert effiziente abfragen und abfrage batching bessere code verwaltung die stark typisierte natur bringt vorhersehbarkeit flutter und back4app graphql es ist oft sehr schwierig, eine graphql backend lösung zu entwerfen, die die flexibilität von nosql datenbanken mit der struktur und organisation kombiniert, die durch das typ und schema system von graphql bereitgestellt wird back4app hatte schon immer dieses strukturierte, schema basierte design, und jetzt bringt graphql es auf ein ganz neues niveau, indem es eine api erstellt, die die semantik des typsystems kennt andererseits wissen wir, dass dart (auf dem flutter basiert) eine stark typisierte sprache ist ja, dart ist sehr spezifisch in bezug auf die typensicherheit mit graphql haben wir ein schema, das auf der client seite wiederverwendet werden kann das macht das leben viel einfacher auch das wissen um das typenschema, das in zukunft abgerufen werden kann, hilft wirklich, da es uns ermöglicht, fortschrittliche caching und abfrageinvalidierungsalgorithmen für diese daten zu implementieren flutter toolkit für back4app graphql für die interaktion mit unserer graphql api werden wir die großartige graphql flutter https //github com/zino app/graphql flutter bibliothek nutzen lassen sie uns also die funktionen verstehen, die die bibliothek bietet unterstützung für abfragen und mutationen alle im back4app dashboard definierten schemata werden direkt in die back4app graphql endpunkte umgewandelt und entweder als abfragen oder mutationen verfügbar abfragen ermöglichen es uns, verschachtelte daten aus mehreren klassen in einem einzigen api aufruf abzurufen abfragen werden hauptsächlich zum abrufen von daten durchgeführt und werden von back4app graphql ermöglicht reichhaltige abfragemethoden, die geolokalisierung, zeit, regex und volltextsuche unterstützen mutationen ermöglichen es uns, einen api aufruf zu tätigen, der mehrere klassen einträge aktualisieren kann mutationen bestehen hauptsächlich aus dem erstellen, bearbeiten und löschen von daten folgendes ist eine programmiersprache klasse, die ich auf back4app erstellt habe wenn sie in den graphql bereich der api für back4app navigieren, sehen sie die zuvor dargestellte konsole von back4app diese konsole wird jetzt alle mutationen und abfragen automatisch erstellen! wenn ich zum graphql bereich der api für back4app gehe, werden wir die zuvor dargestellte konsole von back4app sehen diese konsole wird jetzt alle mutationen und abfragen automatisch erstellen! in dem obigen bild habe ich back4app graphql verwendet, um alle meine sprachen aus der klasse programminglanguage aufzulisten ähnlich können wir einen eintrag in unserer programminglanguage back4app klasse erstellen, indem wir mutationen nutzen abfrage polling 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 ); für einige anwendungsfälle, bei denen abonnements übertrieben sein könnten wir müssen die daten regelmäßig aktualisieren, wir können die abfrage polling funktion des clients verwenden dies ermöglicht es uns, die neuesten daten regelmäßig abzurufen zum beispiel können wir alle 1 minute einen hintergrunddatenabruf durchführen in memory cache 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 } der flutter graphql client implementiert verschiedene möglichkeiten zur zwischenspeicherung der daten, sie sind cache während der revalidierung lassen sie uns ein einfaches beispiel für das abrufen einer liste von artikeln betrachten wir möchten, dass die listendaten zwischengespeichert werden, wenn wir von einer liste zu einem bestimmten artikel und dann zurück wechseln der cache während der revalidierung mechanismus implementiert diese methode des abfragens der daten, das bedeutet, dass, obwohl ein api aufruf gemacht wird, um die daten abzurufen, alte daten verwendet werden, um anzuzeigen, während neue daten abgerufen werden wenn die neuen daten verfügbar sind, werden sie dann angezeigt nur cache bei dieser methode wird ein netzwerkaufruf nur gemacht, wenn keine daten auf unserem gerät vorhanden sind dies ist sinnvoll, wenn es mit offline synchronisierungsfunktionen für datenpunkte kombiniert wird, die sich nicht ändern werden dies optimiert das netzwerk und spart ressourcen nur netzwerk in seltenen fällen, in denen sie den cache der daten nicht behalten möchten, können sie den nur netzwerk modus der flutter graphql bibliothek verwenden offline cache synchronisierung die mobile erfahrung erwartet, dass sie standardmäßig offline fähig ist dies mit flutter und rest api zu tun, ist sehr mühsam sie müssen die daten in der sqlite datenbank speichern, überprüfen, ob die daten vorhanden sind oder nicht, sql abfragen schreiben, um die daten abzurufen, und dann auch netzwerkaufrufe durchführen, um die daten zu aktualisieren das ist eine menge arbeit, die mit der verwendung dieses plugins und der offline unterstützung für abfragen vollständig umgangen wird, die in unsere flutter anwendung integriert ist dateispeicherung 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 viele graphql serverbibliotheken unterstützen keine datei upload funktionalität über die graphql abfragen um eine datei hochzuladen, müssen wir einen separaten rest endpunkt aufrufen laden sie die datei hoch, erhalten sie die url, und übergeben sie sie dann in form eines strings an die graphql api außerdem müssen wir die dateimetadaten wie dateiname usw manuell verwalten back4app unterstützt die datei upload standards, die in die back4app graphql api integriert sind wenn die datei hochgeladen wird, wird sie als datei typ von graphql hochgeladen, der einem back4app datei in graphql entspricht automatisch haben wir die datei in den hochgradig skalierbaren back4app dateispeicher, der von aws s3 unterstützt wird, gespeichert optimistische ergebnisse 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) benutzer haben erwartet, dass die benutzeroberfläche sehr ansprechend ist und sofortiges feedback gibt optimistische benutzeroberfläche ist ein ui/ux prinzip, das im wesentlichen besagt, dass wir nicht auf den abschluss der aktion warten sollten stattdessen zeigen wir dem benutzer feedback, dass wir die aktion abgeschlossen haben! dies geschieht mit der annahme, dass die aktion in 99% der fälle erfolgreich sein wird wenn die aktion leider fehlschlägt, zeigen wir eine fehlermeldung an, die besagt, dass wir die aktion nicht abschließen konnten flutter graphql kommt mit integrierter unterstützung für die definition der optimistischen mutationen, was es viel einfacher macht, dieses komplexe ui interaktionssystem zu implementieren so haben wir mit diesem eine sehr gut optimierte basis für den aufbau moderner anwendungen fazit in diesem leitfaden haben wir ihnen einige wichtige vorteile der verwendung von graphql in ihrem flutter projekt auf back4app vorgestellt im nächsten leitfaden werden wir mit dem code beginnen und unseren flutter graphql client für die verwendung der back4app api einrichten