Simplified Graphql Implementations for Query and Mutation in Flutter

What is Graphql

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

One of the basic problems with conventional REST is the failure of the client to demand a personalized data set. In addition to that, running and controlling multiple endpoints is another difficulty as clients are mostly needed to request data from diversified endpoints.

There are three types of operations that GraphQL models:

  • query — a read‐only fetch(HTTP GET request).
  • mutation — a write followed by a fetch.
  • subscription — a long‐lived request that fetches data in response to source events.

Let’s do it!

We will be using “https://countries.trevorblades.com/ “ API

I will walk you through how to get your query parameters

We want to query the country, the documentation expects code: ID! as a param, you can decide on the response you want from the Country object.

Tips in working with Graphql

  • Curly brackets {} — — SelectionSet e.g{id firstName lastName}
  • Brackets () — — (passing argument ) e.g ($input: String!)
  • Exclamation mark! — — Required parameter

Here is the API response base on what we structured.

Let jump into a flutter

Copy those codes to your pubspec.yaml

Let create a class to reuse when we want to make a request

GraphQLConfig.dart

I created an avenue to pass a token to the class, you can remove it if you don't need to pass that.

In your main.dart

Let create a data class called Country.dart

Then just call your GraphQLConfig class to make a request.

I have added implementations for both queries and mutations,

Here is the API bind on mobile.

I tried my best to make this lesson clear and short as much as possible. Please, bear with me for any error you might encounter. I am just trying to share my knowledge.

If you have any questions or corrections, I will be glad to know.

Project Repo — https://github.com/muryno/flutter_graphql_implementation

You can mail me personally — murainoy@yahoo.com

Github | Linkedin | Twitter

Thanks for reading.

Senior mobile developer & Backend engineer ~ Flutter|Dart | JAVA | Kotlin| Spring framework | Golang

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store