Flutterexperts

If you are here that means you are seeking some information or knowledge or implementation technique of GraphQL, before going over the implementation of it with flutter you need to know what is it and why we need to implement it because without having a basic knowledge it might be a waste of time. So let’s take a look

What is GraphQL: It is a query language that allows us to create queries that will be executing on the server… Not Getting this bookish definition ??

Okay, Let me explain suppose if you are taking an exam and a few key points of any topic have been asked would you write whole info of that topic or specific points? Of course, key points because explaining it all would not be worthy, same in the GraphQL when you make API calls for the server you get no. of data fields but what if you need only two or three data fields from a huge collection? obviously you can use required data fields and all data fields which remained unused will not harm your app but in large scale projects, it reduces apps responsiveness so with the use of GraphQL we make queries for the specific data and we get exact data we required. it also helps especially when your internet connection is slow and then you need not fetch whole data because in the query you only request for specific data or only required data.

This was a small description about GraphQL and let us see

Here you can easily see that by using GraphQL server data is being fetched but in the query, only the name of the users has been asked and after pressing the top button, on the right side of the screen you can see the response that we got.

Now you would be thinking that it’s quite easy to make queries but how would a user get to know what kind of data the API is having. You need not be worry… GraphQL server also provides a schema of the API so you easily understand that

In this image of Documentation Explorer, there are two fields one is Query and the other is Mutation and by clicking on it you can find the required data for making query or mutation requests. This is my GraphQL API link you can try it.

So this was the introduction part now let’s implement it on fluter

Flutter Starts from here

First of all, you need to import a package of GraphQL in your pubspec.yaml

graphql_flutter:

You can find the latest version here and import

import ‘package:graphql_flutter/graphql_flutter.dart’;

GraphQL basically does two things

1. Query: Query is used to fetching the required data.

2. Mutation: Mutation is used to update and insert data like for post/delete/put requests.

Then the first thing which comes to work with GraphQL is Client, and to use the client we first need to use link and cache here we are using httpLink as a link and OptimisticCache as a cache, We are also using ValueNotifier which is used to notify their listener when any value is changed.

Then we wrap our whole page with GraphQLprovider and after that, we will be able to make requests to the GraphQL server without specifying the endpoint and header and now we need to pass the query and then GraphQL provider will take care of it, it means it will perform actions for us.

In the query, there are two fields,

1. options: Options are used to send the query you want to send.
2. builder: builder is the same builder of flutter which is used to manage the states

In options, we use QueryOptions and use the documentNode function to pass the query which we have made and pass this through gql() because it parses GraphQL query strings into the standard GraphQL AST.

And this is the query that is being used to fetch the list of the data for this you can also use for testing in this GraphQL server. (you can see in the above picture)

query{
 artworkAttributionClasses
 {
  name
  }
}

Now in the builder function, we will fetch the data from the server and show in the screen,

For the full source code, you can click here

flutter-devs/Flutter-GraphQLDemo
A new Flutter application. This project is a starting point for a Flutter application. A few resources to get you…github.com

and for more knowledge about GrpahQL, please visit

graphql_flutter | Flutter Package
A GraphQL client for Flutter, bringing all the features from a modern GraphQL client to one easy to use package.pub.dev

It was a small description about GraphQL.

Thanks for reading this article if you find anything that could be improved please let me know, I would love to improve.

---

Feel free to connect with us
And read more articles from FlutterDevs.com

---

FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, and Twitter for any flutter related queries.