How to select a suitable GraphQL client for your next Flutter app

To develop a fully functional quality flutter app

Well before selecting a suitable client let’s see why you need GraphQL client, To call the GraphQL server

GraphQL helps you to reshape your data requirement totally based on the client’s requirement. Further, this GraphQL API is empowering with the most underlying structure than REST API such as caching, automatically handling batching, and many more functionalities. The special thing is you can call the GraphQL server without any complicated techniques and it is just only a single HTTP POST request to your server endpoint.

Flutter is a UI software development kit that helps build a cross-platform and device-compatible app with a single code base. To create the user interactive application and feed your application with data you must integrate your application with the database. Awesome, the GraphQL client works as a wrapper of your database and that supports you to interact with the database easily💡. The challenging part is how to select the most suitable GraphQL client for your application🤔

Once you need to get the third-party package for your flutter app you can simply go to the Pub.dev official package repository and search for your key requirement. But the case is you can get a massive amount of possible packages for your requirement and then you have a problem as to how to select the most suitable one among them. Through the pub points, popularity and likes you can get to know some basic ideas about the package. But are enough of those details for selecting the package for your requirement? Most of the time project scope is the direct concern for selecting the suitable package, not only that core feature of the application, but application quality attributes are also reasons for selecting the package. That’s why this article is for you to select the suitable GraphQL client for your application.

When simply we search the term on ‘graphql client’ on pub.dev package repository we can get 315 of packages that are related to graphql client. Among those results following are the popular and better packages that I have used for my flutter projects.

📌graphql

📌graphql_flutter

📌ferry

Bonus 🙀: hasura_connect

If you are only good at flutter mobile application development or you haven’t not much time to develop your backend server from scratch this is one of the best solutions for you. The Hasura GraphQL Engine is an extremely lightweight, high-performance product that gives you instant real-time GraphQL APIs. It will auto-generate CRUD operations for the database we connect with it. Hasura increases the development speed nearly by x10 by reducing the repetitive code needed to implement CRUD operations. Hasura is open source, and free to use and many companies use Hasura in production for their needs.

(Note: You can use Hasura with any type of graphQL client as you wish and this hasura_connect is specially developed for the Hasura backend)

Among the above-mentioned three packages, graphql and graphql_flutter are the most popular than the ferry package. Both of these graphql and graphql_flutter packages were modeled on the apollo client based. Not only that, the core of those two packages are the same and the graphql_flutter package was developed on top of graphql. The special feature of the graphql_flutter package that provides flutter API and the special functional widget set for your flutter app. When it moved on to the ferry package that was fully focused on productivity and faster and safety compile time on your application so that package comes under multiple types of features set. in-built code generator, Multiple data sources, a special functional widget set, and more. Let’s go through them one by one.

graphql

install the package

$ flutter pub add graphql

import package wherever you need to use it,

import 'package:graphql/client.dart';

Let’s start

As a very first task, we just need to connect with the GraphQL server so we need to create a GraphQL client

Then, How to create a GraphQL client

• Initialize cache
• Initialize link

Once you create the GraphQL client you can easy to create and call queries, mutations, and subscriptions with the help of your initialized client.

For more info: graphql

graphql_flutter

install package

$ flutter pub add graphql_flutter

import the package for your files,

import 'package:graphql_flutter/graphql_flutter.dart';

Usage,

This package is developed based on the above-mentioned graphql package. So the initial setup of both two is the same and this provides you with a better way to use the GraphQL client through the specially built widget set.

Here your whole application is wrapped by the GraphQLProvider widget. Inside of this special widget you can use Query, Mutation widget. So this provides the easiest way for you to write your queries and mutations without any complications.

For more info: graphql_flutter

ferry

install package

dependencies:
  ferry: #[latest-version]
  gql_http_link: #[latest-version]

dev_dependencies:
  ferry_generator: #[latest-version]
  build_runner: #[latest-version]

The very special feature of this package is you can automatically generate immutable data classes for all your GraphQL Operations and Fragments, based on your schema.

Let’s install the tool for class generator

npm install -g get-graphql-schema

Download the schema

get-graphql-schema ENDPOINT_URL > lib/schema.graphql