Configurazione del Client Flutter GraphQL: Guida Tecnica

impostazione di flutter graphql introduzione nell'ultimo tutorial abbiamo compreso i vantaggi dell'utilizzo di back4app graphql con flutter in questo articolo configureremo la struttura di base per il progetto e ci connetteremo al server back4app obiettivi impostare l'ambiente flutter anatomia dell'impostazione di flutter graphql connessione flutter graphql riutilizzo e modelli di connessione flutter graphql requisiti richiediamo che l'utente abbia una comprensione di base di dart e flutter; anche se non necessario, il libro di cucina graphql sarà utile per comprendere i concetti di graphql 0 imposta l'app dal back4app hub dovremmo creare un'app, puoi seguire la documentazione su https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app utilizzeremo back4app hub per impostare le classi necessarie per questo tutorial per favore vai a https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql clicca su connetti all'api seleziona l'app appena creata e poi hai finito! 1 configurare flutter configurare flutter è relativamente indolore seguiremo le istruzioni di configurazione sul sito ufficiale di flutter https //flutter dev/docs/get started/install dopo di che creeremo una semplice applicazione flutter usando il comando controlla se tutto va bene usando il comando flutter doctor flutter doctor , eseguendo l'applicazione 2 installazione della libreria flutter graphql per implementare questo client utilizzeremo la libreria flutter graphql come menzionato nel primo articolo ora aggiungeremo questo ai tuoi pacchetti pubspec yaml pubspec yaml 3 crea un provider graphql per flutter in graphql non dobbiamo lavorare con più endpoint, abbiamo solo un singolo endpoint che viene utilizzato per interrogare i dati della richiesta e inviamo le query graphql a quell'endpoint quindi, generalmente, ciò che facciamo è creare un'istanza del client che è responsabile dell'invio delle intestazioni appropriate e della formattazione delle query secondo le nostre esigenze creeremo un client, per questo abbiamo bisogno di un link (istanza della classe httplink) e di un'archiviazione cache useremo httplink httplink come nostro link e optimisticcache per la nostra cache il codice sarà scritto nel seguente modo nel main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart scriveremo quanto segue 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 connettersi a back4app utilizzando graphql vai al dashboard di back4app nell'opzione “api console” > “graphql console” annota url api id app parse id client parse creeremo un nuovo file constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart nella cartella lib cartella lib del nostro progetto 5 interrogare i dati il nostro componente sarà avvolto dal widget graphqlprovider, che fornirà i dettagli necessari per il widget dovremo fornire un'istanza del client che abbiamo creato nel passo 2 utilizzeremo la console graphql per scrivere la nostra query puoi saperne di più sulle query graphql nella nostra sezione del ricettario 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 rendere la lista utilizzeremo il listview listview widget per rendere la lista, nel 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 dovremmo vedere il seguente sul nostro schermo conclusione abbiamo configurato il client flutter graphql e ci siamo connessi all'api graphql di back4app puoi trovare il codice per lo stesso qui https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup