GraphQL Client Setup

flutter graphql setup introduction in the last tutorial we understood the benefits of using back4app graphql with flutter in this article we are going to setup the basic scaffold for the project and connect to the back4app server goals setup the flutter environment flutter graphql setup anatomy flutter graphql connection flutter graphql connection reuse and patterns prerequisites we require that the user has some basic understanding of dart and flutter; though not necessary, graphql cookbook will be useful in understanding the graphql concepts 0 setup the app from back4app hub we would need to create an app, you can follow documentation on https //www back4app com/docs/get started/new parse app https //www back4app com/docs/get started/new parse app we would be using back4app hub to set up necessary classes for this tutorial please go to https //www back4app com/database/chinmay/flutter graphql https //www back4app com/database/chinmay/flutter graphql click on connect to api select the newly created app and then you are done! 1 setting up flutter setting up flutter is relatively painless we will follow the setup instructions at the official flutter website https //flutter dev/docs/get started/install after this we will create a simple flutter application using the command check if everything is ok using the command flutter doctor flutter doctor , by running the application 2 installing the flutter graphql library for implementing this client we are going to use the flutter graphql library as mentioned in the first article we will now add adding this to your packages pubspec yaml pubspec yaml 3 create a flutter graphql provider in graphql we do not have to work with multiple endpoints, we only have a single endpoint that is used to query the request data and we send graphql queries to that endpoint so generally what we do is that we create an instance of the client that is responsible for sending the appropriate headers and format the queries as per our need we will be creating a client, for this we need a link (instance of the httplink class) and a cache store we will be using httplink httplink as our link and optimisticcache for our caching code would be written in the following manner in the main dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/main dart we will write the following 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 connect to back4app using the graphql go to the back4app dashboard in the option “api console” > “graphql console” note down api url parse app id parse client id we will create a new file constants dart https //github com/templates back4app/flutter graphql/blob/flutter graphql setup/lib/constants dart in lib lib folder of our project 5 querying data our component will be wrapped by the graphqlprovider widget, which would provide necessary details for the widget we will need to provide an instance of client that we created in step 2 we will use graphql console, to write our query you can learn more about graphql queries in our graphql cookbook section 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 render the list we will use the listview listview widget to render the list, in the 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 we should get the following on our screen conclusion we have configured the flutter graphql client and connect to the back4app graphql api you can find the code for the same here https //github com/templates back4app/flutter graphql/tree/flutter graphql setup https //github com/templates back4app/flutter graphql/tree/flutter graphql setup