How to Use GraphQL in Flutter

Build a simple to-do app

Photo by Markus Winkler on Unsplash

Flutter is taking the world by storm, and this comes as no surprise. It offers unmatched performance and robust multi-platform support. In this article, I will walk you through integrating GraphQL into Flutter apps, making queries, and performing mutations.

What Is GraphQL?

GraphQL is a query language developed by Facebook. It is supposed to replace REST as a mean of API communication. I will assume some basic knowledge of GraphQL for the REST (pun intended) of the article.

Server Setup

Developing a GraphQL API is out of scope for this article. Instead, we will use a pre-made one. Head out to the repo and clone it. I have forked this server from @haikyuu — many thanks to you.

Once you have it cloned, open it in Terminal and run:

npm i npm start

This will install all dependencies and start the server. This server is a basic to-do app back end that lets you create, query, and modify tasks. It’s built using json-graphql-server; be sure to check it out.

Project Setup

After we get the server up and running, let’s set up the Flutter project. After you have created the project, the directory structure should look like this:

If you try to run the app, this should happen in the emulator:

Congratulations, we are halfway there!

Add GraphQL Dependencies

Before we start working with GraphQL in our Flutter app, we need to install some dependencies. Open the pubspec.yaml file and add this line in it (in the dependencies section:

graphql_flutter: ^3.0.0

Now install the packages using this command:

flutter pub get