Tag Archive graph ql

Graph QL and Flutter

aseemwangoo No Comments

Graphing network evolution….

With Flutter gaining popularity among the developers, its a beginning of a new era. Things evolving, being accepted or rejected and again evolving, its always been a

Build Fast, Fail Faster era….

One of the evolving and gaining popularity topics between the masses is Graph QL.

What’s Graph QL…

GraphQL is a query language for your API, and a server-side runtime for executing queries by using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.

Lets Begin…

Graph QL in Flutter

Graph QL in Flutter

Without wasting an inch of time, let me start by integrating Graph QL and Flutter….

First things first, install the plugin named :

graphql_flutter 

in the pubspec.yaml. Now, import

import ‘package:graphql_flutter/graphql_flutter.dart’;

Basicially, in terms of GraphQL terminology,

  1. Query : means we need to fetch the data, for instance get requests.
  2. Mutation : means we need to update/insert the data, for instance post/put/delete requests.

In order to call the Graph QL requests, we need to use

GraphqlProvider widget in the app.

GraphQL Widget

GraphQL Widget

client.

client.

client includes the api endpoint and in some cases apiToken (optional).

For query, we have a Query Widget and mutation widget for mutations.

Trust me, its damn simple and like any other flutter widget.

This comprises of the query, which we need to run. In this case, it is trying to retrieve all the repositories of my account (Aseem Wangoo)…

After the data gets successfully fetched, it is saved as

List feedList = data[‘viewer’][‘repositories’][‘nodes’];

List Tile of repositories.

and displayed as in the above manner.

For more info, please visit

https://pub.dartlang.org/packages/graphql_flutter

Video demonstration:

 

For complete source code, visit

https://github.com/AseemWangoo/flutter_programs/blob/master/GraphQL.dart

P.S……………………….