Flutter is an SDK (Software development kit) to build applications for Android and IOs with a single codebase. On the other hand, GraphQL is a query language that allows us to create queries that will be executing on the server. In this tutorial, I am going to show you how to build a simple CRUD with Flutter (client-side) and GraphQL (server-side). Let’s start

Once we have created our Flutter project we need to import some dependencies in our pubspec.yaml file in order to use GraphQL and HTTP with our API. It’s essential to notice that the API was created on NodeJS, so for this tutorial I’m not going to show how to build it.

Then, we are going to create a file called graphQLConf.dart, this file will contain the basic configuration to use GraphQL like our link to the API and the cache configuration. So, we create a class called GraphQLConfiguration, inside this, there are three main parts. The first one is the link to the API, the second one is the ValueNotifier which will notify its listener when any kind of value changed, and finally, the method clientToQuery() will let us make queries and mutation in our application.

In our main.dart file we will wrap the MaterialApp Widget with the previous configuration as follow:

As you can saw we called the GraphQLObject from the graphQLConf.dart file and then we wrap it into the main method. But we don’t know how the Principal Widget use there is made. Basically, during this example we are going to work with a class Person, this class will contain basic information such as the id, the name, the last name, and the age. The application lets us add a person, edit a person, see all the persons added and finally delete a person (a basic CRUD). So let’s create a class person.

As you can see is a simple class Person with the id, name, lastName and age attributes, also we had a constructor and the get methods to access its values. Then we need to do our queries to the API. GraphQL provides two forms:

Query: It allows us to access data and read it.

Mutation: It allows to modify our data. Add, edit or delete something.

For this, let’s create a class that will contain all the queries and mutation that we are going to use. (Note: Dart uses a notation with three quotes to make the queries).