Flutter et GraphQL: Intégration avec Backend efficace

flutter graphql sur back4app introduction puisque vous êtes ici à explorer la documentation de back4app, vous savez que back4app est un backend flexible à faible code il vous permet d'interagir avec votre backend de plusieurs manières différentes, comme vous le souhaitez si vous le souhaitez, vous pouvez utiliser l'api rest, ou vous pouvez directement utiliser un sdk natif https //pub dev/packages/parse server sdk pour flutter dans cette série de tutoriels, nous allons explorer l'utilisation de la nouvelle api graphql brillante avec flutter ce guide a été écrit par chinmay, un partenaire back4app https //www back4app com/partners/software development company chez hybrowlabs objectifs obtenir un aperçu de graphql; comprendre comment graphql et flutter s'intègrent ensemble; comprendre les outils et bibliothèques flutter disponibles pour graphql; comprendre l'architecture générale et les concepts clés dans une application flutter graphql; prérequis nous exigeons que l'utilisateur ait une compréhension de base de dart et flutter ; bien que ce ne soit pas nécessaire, le livre de recettes graphql sera utile pour comprendre le spécification graphql de back4app qu'est ce que graphql graphql est une architecture alternative à la norme api rest graphql est né lorsque l'équipe de facebook reconstruisait ses applications natives à partir de zéro et avait un besoin urgent d'optimiser les données qu'elle recevait du backend alors qu'ils refactorisaient leurs services en un ensemble de ressources, ils se sont frustrés car cela ne les menait nulle part ils ont fait un pas en arrière et ont repensé les données comme un graphique interconnecté d'objets au lieu de ressources rest isolées cela a fait une grande différence dans l'architecture de leur application et c'est ainsi que graphql est né depuis que graphql a été lancé dans la nature en 2015, il a gagné en popularité et en buzz et a été adopté par des équipes comme twitter, airbnb, atlassian, github pourquoi graphql ? chez hybrowlabs, un partenaire de back4app https //www back4app com/partners/software development company , nous construisons des applications web et mobiles modernes et intensives en données nous avons adopté back4app comme notre service backend de choix en raison de sa facilité d'utilisation, de son optimisation et des fonctionnalités de définition de schéma qui sont fournies en plus des bases de données déjà impressionnantes la plupart du temps, les applications dans lesquelles nous concevons des données qui sont affichées ou manipulées ne proviennent pas d'une seule classe back4app au contraire, ces données proviennent de plusieurs classes la combinaison back4app graphql nous permet de gérer facilement de tels scénarios tout en permettant de réduire l'empreinte réseau à 2 3 appels par chargement d'écran, en apportant uniquement les données que nous voulons d'autre part, le code cloud que nous définissons est facilement documenté en raison de la nature fortement typée de graphql cela rend notre code maintenable et facile à comprendre tldr; voici les avantages d'utiliser graphql l'empreinte réseau est minimisée requêtes efficaces et regroupement de requêtes meilleure gestion du code la nature fortement typée apporte de la prévisibilité flutter et back4app graphql il est souvent très difficile d'architecturer une solution backend graphql combinant la flexibilité des bases de données nosql tout en préservant la structure et l'organisation fournies par la structure de type et de schéma de graphql back4app a toujours eu ce design structuré basé sur un schéma et maintenant graphql le porte à un tout nouveau niveau en créant une api connaissant la sémantique du système de types d'autre part, comme nous le savons, dart (sur lequel flutter est basé) est un langage fortement typé oui, dart est très particulier en ce qui concerne la sécurité des types avec graphql, nous avons un schéma qui peut être réutilisé côté client cela facilite beaucoup la vie de plus, connaître le schéma de type qui peut être récupéré à l'avenir aide vraiment, car cela nous permet de mettre en œuvre des algorithmes avancés de mise en cache et d'invalidation des requêtes sur ces données boîte à outils flutter pour back4app graphql pour interagir avec notre api graphql, nous allons tirer parti de l'incroyable graphql flutter https //github com/zino app/graphql flutter bibliothèque alors comprenons les fonctionnalités que la bibliothèque offre support pour les requêtes et les mutations tout le schéma défini sur le tableau de bord back4app est directement converti en points de terminaison graphql back4app et disponible soit en tant que requêtes, soit en tant que mutations les requêtes nous permettent d'obtenir des données imbriquées de plusieurs classes en un seul appel api les requêtes sont principalement effectuées dans le but de récupérer des données, et elles sont mises en cache par back4app graphql permet des méthodes de requête riches, prenant en charge la géolocalisation, le temps, les expressions régulières et les fonctionnalités de recherche en texte intégral les mutations nous permettent de faire un appel api qui peut mettre à jour plusieurs entrées de classe les mutations consistent principalement à créer, modifier, supprimer des données voici une classe programinglanguage que j'ai créée sur back4app lorsque vous naviguez dans la section graphql de l'api pour back4app, vous verrez la console de back4app illustrée précédemment cette console aura maintenant toutes les mutations et requêtes créées automatiquement ! lorsque je vais à la section graphql de l'api pour back4app, nous verrons la console de back4app illustrée précédemment cette console aura maintenant toutes les mutations et requêtes créées automatiquement ! dans l'image ci dessus, j'ai utilisé back4app graphql pour lister toutes mes langues de la classe programminglanguage de même, nous pouvons créer une entrée dans notre classe programminglanguage de back4app en utilisant des mutations interrogation par sondage 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 ); pour certains cas d'utilisation, où les abonnements pourraient être excessifs nous devons actualiser les données périodiquement, nous pouvons utiliser la fonctionnalité de polling de requête du client cela nous permet de récupérer les dernières données de manière périodique par exemple, nous pouvons effectuer une récupération de données en arrière plan toutes les 1 minute cache en mémoire 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 } le client flutter graphql implémente diverses façons de mettre en cache les données, elles sont cache lors de la revalidation considérons un exemple simple de récupération d'une liste d'articles nous voulons que les données de la liste soient mises en cache, lorsque nous passons d'une liste à un article spécifique puis de nouveau à la liste le mécanisme de cache lors de la revalidation implémente cette méthode de requête des données, cela signifie que même si un appel api est effectué pour récupérer les données, les anciennes données sont utilisées pour afficher pendant que les nouvelles données sont récupérées, lorsque les nouvelles données deviennent disponibles, elles sont alors affichées cache uniquement dans cette méthode, un appel réseau n'est effectué que s'il n'y a pas de données sur notre appareil cela est intéressant lorsqu'il est associé à des installations de synchronisation hors ligne pour des points de données qui ne vont pas changer cela optimise le réseau et économise des ressources réseau uniquement dans de rares cas où vous ne souhaitez pas conserver le cache des données, vous pouvez utiliser le mode réseau uniquement de la bibliothèque flutter graphql synchronisation du cache hors ligne l'expérience mobile s'attend à ce qu'elle soit activée hors ligne par défaut faire cela avec flutter et rest api est très fastidieux vous devez stocker les données dans la base de données sqlite, vérifier si les données sont présentes ou non, écrire des requêtes sql pour récupérer les données, puis effectuer également des appels réseau pour mettre à jour les données c'est beaucoup de travail, qui est totalement contourné grâce à l'utilisation de ce plugin et le support hors ligne pour les requêtes est intégré dans notre application flutter stockage de fichiers 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 de nombreuses bibliothèques de serveur graphql ne prennent pas en charge une fonctionnalité de téléchargement de fichiers utilisant les requêtes graphql pour télécharger un fichier, nous devons appeler un point de terminaison rest séparé téléchargez le fichier, obtenez l'url, puis passez la à l'api graphql sous forme de chaîne de plus, nous devons maintenir manuellement les métadonnées du fichier comme le nom de fichier, etc back4app prend en charge les normes de téléchargement de fichiers intégrées dans l'api graphql de back4app lorsque le fichier est téléchargé, il est téléchargé en tant que type file de graphql, qui correspond à un fichier back4app dans graphql automatiquement, nous avons stocké le fichier dans un stockage de fichiers back4app hautement évolutif soutenu par aws s3 résultats optimistes 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) les utilisateurs s'attendent à une interface utilisateur très engageante et à un retour d'information instantané l'interface utilisateur optimiste est un principe ui/ux qui, en essence, dit que nous ne devrions pas attendre que l'action soit terminée mais au lieu de cela, nous montrons un retour d'information à l'utilisateur que nous avons complété l'action! cela se fait avec l'hypothèse que l'action réussira dans 99 % des cas si l'action échoue malheureusement, nous affichons un message d'échec disant que nous n'avons pas pu compléter l'action flutter graphql est livré avec un support intégré pour définir les mutations optimistes, ce qui rend beaucoup plus facile la mise en œuvre de ce système d'interaction ui complexe ainsi, avec cela, nous avons une base très bien optimisée pour construire des applications modernes conclusion dans ce guide, nous vous avons présenté certains avantages importants de l'utilisation de graphql dans votre projet flutter sur back4app dans le prochain guide, nous allons mettre la main sur le code et commencer par configurer notre client flutter graphql pour utiliser l'api back4app