Configurer Flutter GraphQL pour se connecter à Back4app

configuration de flutter graphql introduction dans le dernier tutoriel, nous avons compris les avantages d'utiliser back4app graphql avec flutter dans cet article, nous allons configurer l'échafaudage de base pour le projet et nous connecter au serveur back4app objectifs configurer l'environnement flutter anatomie de la configuration flutter graphql connexion flutter graphql réutilisation de la connexion flutter graphql et modèles 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 les concepts graphql 0 configurer l'application depuis le hub back4app nous devrons créer une application, vous pouvez suivre la documentation sur https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app nous utiliserons le hub back4app pour configurer les classes nécessaires pour ce tutoriel veuillez aller à https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql cliquez sur connecter à l'api sélectionnez l'application nouvellement créée et vous avez terminé ! 1 configuration de flutter la configuration de flutter est relativement indolore nous suivrons les instructions de configuration sur le site officiel de flutter https //flutter dev/docs/get started/install après cela, nous créerons une simple application flutter en utilisant la commande vérifiez si tout va bien en utilisant la commande flutter doctor flutter doctor , en exécutant l'application 2 installation de la bibliothèque flutter graphql pour implémenter ce client, nous allons utiliser la bibliothèque flutter graphql comme mentionné dans le premier article nous allons maintenant ajouter cela à vos packages pubspec yaml pubspec yaml 3 créer un fournisseur graphql flutter dans graphql, nous n'avons pas à travailler avec plusieurs points de terminaison, nous n'avons qu'un seul point de terminaison qui est utilisé pour interroger les données de la requête et nous envoyons des requêtes graphql à ce point de terminaison donc, généralement, ce que nous faisons, c'est que nous créons une instance du client qui est responsable de l'envoi des en têtes appropriés et de la mise en forme des requêtes selon nos besoins nous allons créer un client, pour cela nous avons besoin d'un lien (instance de la classe httplink) et d'un magasin de cache nous allons utiliser httplink httplink comme notre lien et optimisticcache pour notre mise en cache le code sera écrit de la manière suivante dans le main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart nous allons écrire ce qui suit 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 se connecter à back4app en utilisant graphql allez au tableau de bord back4app dans l'option “api console” > “graphql console” notez url de l'api id de l'application parse id du client parse nous allons créer un nouveau fichier constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart dans le dossier lib lib de notre projet 5 interroger des données notre composant sera enveloppé par le widget graphqlprovider, qui fournirait les détails nécessaires pour le widget nous devrons fournir une instance du client que nous avons créé à l'étape 2 nous utiliserons la console graphql pour écrire notre requête vous pouvez en savoir plus sur les requêtes graphql dans notre section du livre de cuisine graphql 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 rendre la liste nous utiliserons le listview listview widget pour rendre la liste, dans le 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 nous devrions obtenir ce qui suit sur notre écran conclusion nous avons configuré le client flutter graphql et connecté à l'api graphql de back4app vous pouvez trouver le code correspondant ici https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup