Intro to GraphQL

flutter graphql on back4app introduction since you are here delving into back4app docs, you know that back4app is a flexible low code backend it allows you to interact with your backend in several different ways, the way you like it if you want you can use the rest api, or you can directly use a native sdk https //pub dev/packages/parse server sdk for flutter in this tutorial series, we are going to explore using the new shiny graphql api with flutter this guide was written by chinmay, a back4app partner https //www back4app com/partners/software development company at hybrowlabs goals get an overview of graphql; understand how graphql and flutter fit in together; understand flutter tooling and libraries available for graphql; understanding the general architecture and key concepts in a flutter graphql application; 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 back4app graphql spec what is graphql graphql is an alternative architecture to the rest api standard graphql was born when the facebook team was rebuilding their native applications from scratch and they were in heavy need to optimize the data they received from the backend while they were refactoring their services as a set of resources, they got frustrated because it was taking them nowhere they took a step back and rethought the data as an interconnected graph of objects instead of isolated rest resources this made a big difference to their application architecture and that’s how graphql was born since graphql was released out in the wild in 2015, it has been getting huge popularity and buzz and has been adopted for use in teams like twitter, airbnb, atlassian, github why graphql? at hybrowlabs, a back4app partner https //www back4app com/partners/software development company , we build modern, data intensive web and mobile applications we adopted back4app as our backend service of choice because of its ease of use, optimization, and schema definition features that are provided on top of the already awesome databases most of the time the applications in the applications we engineer data that gets displayed or manipulated are not just from a single back4app class rather this data comes from multiple classes the back4app graphql combo makes it very easy for us to tackle such scenarios all the while it allows us to reduce the network footprint to 2 3 calls per screen load, just bringing the data we want on the other hand cloud code that we define easily gets documented because of the strongly typed nature of graphql this makes our code maintainable and easy to understand tldr; here are the advantages of using graphql network footprint gets minimized efficient queries and query batching better code management strongly typed nature brings predictability flutter and back4app graphql it is often very difficult to architect a graphql backend solution combining the flexibility of nosql databases while preserving structure and organization provided by having a type and schema structure of graphql back4app has always had this structured schema based design and now graphql takes it to a whole new level by creating an api knowing semantics of the type system on the other hand, as we know dart (which is what flutter is based on) is a strongly typed language yes, dart is very particular of the type of safety with graphql we have a schema that can be reused on the client side this makes life a lot easier also knowing the type schema that can be fetched in the future really helps as it allows us to implement advanced caching and query invalidation algorithms on this data flutter toolkit for back4app graphql for interacting with our graphql api we will leverage the awesome graphql flutter https //github com/zino app/graphql flutter library so let’s understand the features the library provides support for queries and mutations all the schema defined on the back4app dashboard is directly converted to the back4app graphql endpoints and available either as queries or mutations queries allow us to get nested data from multiple classes in a single api call queries are mainly done for the purpose of data fetching, and they are cached by back4app graphql allows rich query methods, supporting geolocation, time, regex, and full text search features mutations allow us to make an api call that can update multiple class entries mutations consist of mainly creating, editing, deleting data following is a programinglanguage class that i have created on back4app when navigating into the graphql section of the api for back4app, you will see the previously illustrated console of back4app this console will now have all the mutations and queries automatically created! when i go to the graphql section of the api for back4app, we will see the previously illustrated console of back4app this console will now have all the mutations and queries automatically created! in the above picture i have used back4app graphql for the listing of all my languages from the programminglanguage class similarly we can create an entry in our programminglanguage back4app class by leveraging mutations query 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 ); for some use cases, wherein subscriptions might be an overkill we need to refresh data periodically, we can use the query polling feature of the client this allows us to fetch the latest data in a periodic manner for example, we can do a background data fetch every 1 minute 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 } the flutter graphql client implements various ways of caching the data, they are cache while revalidate let’s consider a simple example of fetching a list of articles we want the list data to be cached, when we move from a list to a specific article and then back cache while revalidating mechanism implements this method of querying the data, this means that even though an api call is being made to fetch the data, old data is used to display while new data is being fetched, when the new data becomes available, it is then shown cache only in this method, a network call is only made if there is no data on our device this is worthwhile when coupled with offline sync facilities for data points that are not going to change this optimizes the network and saves resources network only in rare cases when you don’t want to keep the cache of data, then you can use the network only mode of the flutter graphql library offline cache sync mobile experience expects that it is offline enabled by default doing this with flutter and rest api is very tedious you have to store the data into the sqlite database, check if the data is present or not, write sql queries to fetch the data, and then also do the network calls to update the data that is a lot of work, which is totally bypassed with the use of this plugin and offline support for queries comes baked into our flutter application file storage 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 many graphql server libraries do not support a file upload facility using the graphql queries for uploading a file we have to call a separate rest endpoint upload the file, get the url, then pass it to the graphql api in the form of a string also, we have to manually maintain the file metadata like filename, etc back4app has support for file upload standards backed into the back4app graphql api when the file is uploaded, it is uploaded as a file type of graphql, which corresponds to a back4app file in graphql automatically, we have stored the file into highly scalable back4app file storage backed by aws s3 optimistic results 1 flutterwidget( 2 ontap () { 3 togglestar( 4 { 'starrableid' repository\['id'] }, 5 optimisticresult { 6 'action' { 7 'starrable' {'viewerhasstarred' !starred} 8 } 9 }, 10 ); 11 }, 12 ) users have come to expect a very engaging ui, and instantaneous feedback optimistic ui is a ui/ux principle which in essence says that we should not for the action to become over but instead, we show feedback to the user that we have completed the action! this is done with the assumption that the action will mostly succeed 99% of the time if the action unfortunately fails we show a failure message saying we could not complete the action flutter graphql comes with baked in support for defining the optimistic mutations which makes it far easier to implement this complex ui interaction system thus with this, we have a very well optimized base for building modern day applications conclusion in this guide we introduced you to some important advantages of using graphql on your flutter project on back4app in the next guide we are going to put our hands on code and start by setting up our flutter graphql client for using back4app api