Building Flutter apps with GraphQL in the backend

Prerequisites — Basics of Flutter & GraphQL

There have been great advancements in backend architectures and technologies in the last few years and REST API can be considered as the most useful one. REST API architecture is a scalable solution for building backend services and it is highly used in the industry nowadays. REST API allows a lot of features like scalability, security, simplicity, modularity, language independence, and a lot more but flexibility is that one thing which is properly not given by REST API.

There’s another evolving technology for backend development called GraphQL. GraphQL is the future of backend web services built with simplicity and flexibility in mind. GraphQL provides the flexibility to the client for the reading and manipulating the data in an optimized fashion. A lot of tech giants are migrating towards GraphQL for all its advantages.

In a GraphQL backend architecture, there are 3 basic components:

1. Query — Used for querying/reading data from the database.
2. Mutation — Used for manipulation of data like Create, Update, Delete.
3. Subscriptions— Used for real-time data updates.

These 3 works as the basic building blocks of any GraphQL server which performs the CRUD Operations (Create, Read, Update, Delete).

Flutter as a framework is growing a lot and when it comes to integration with different technologies then the community is really awesome to build solutions for that. GraphQL can be implemented in the Flutter apps in an elegant and efficient manner. In this article, we will be building a Todo application using a GraphQL server at the backend.

The GraphQL backend application is present in a GitHub repo which you can clone and run in your local setup.

ritesh-sharma33/GraphQL-Todo-Backend

To make the application up and running, you must have Node and npm installed in your system. After setting up all those, you will have to navigate into the root directory of the application through CMD/Powershell/Terminal and run 2 commands: npm install, npm start.

Note: You can also use any other GraphQL setup/server to continue but according to your setup/project the queries, mutations and subscriptions will vary.

In this article, I will be using a Flutter package named graphql_flutter for interacting with our GraphQL server (remote/local). This package provides us the utilities and functionalities that are required to connect and interact with the GraphQL server. We will be following a step by step approach here and below are the steps for that.

Connecting to the Server

First of all the operations, a connection to the server is the most important part. So, for that, we will be wrapping our whole application i.e. the MaterialApp widget to a widget called GraphQLProvider which is defined in the graphql_flutter package.

Here, we are using the widgets and classes like GraphQLClient and GraphQLProvider which are defined in the package itself.

Data Models and Schema

The GraphQL data models work when we define a schema corresponding to that data model. A data model e.g. user follows a schema that defines the properties/attributes of that model. In our example, we are using 2 models, a User model and a Todo model.

GraphQL Schema for our data models

If you’re using another GraphQL setup then you might have defined a file called schema.graphql in your GraphQL project which is responsible for handling all the schema and data model related stuff.

Executing Query operation

The query operation is a basic one in GraphQL that is used for reading/fetching the data from the server. This is the Read operation of 4 basic CRUD operations. First, we define the exact query operation for our with the selection set that we need. The below query operation will fetch the list of todos from the fields defined.

GraphQL query for fetching the list of Todos

Now, after defining the query, next is to use that query operation in the UI which can be achieved from below code. Here, a Query widget is used which is defined in the graphql_flutter package and used to perform the Query operation in GraphQL. It’s like using the Query widget by wrapping the widget that is to be rendered and the wrapped widget will get access of the data generated by Query widget. We are using the above query inside the gql function as a parameter. The graphql_flutter package ships with a lot of functionalities related to GraphQL query operation. These all can be explored in the documentation.

Executing Mutation Operation

Mutation in GraphQL refers to an operation used for manipulation of data. This manipulation can be a create, update, or delete operation. By mutation operation, we can make changes to the data in the backend or any other data service we are using.

Creating and updating a Todo: First, we will define the mutation operation using the GraphQL syntax as below:

Mutation operations for createTodo and updateTodo

Here, we’ve defined 2 strings for the mutation operations for creating a Todo and updating a Todo. Now, we are going to perform the actual mutation when a UI action/event occurs and in our case it’s a button press. Again, a widget called Mutation will be used for this purpose and this purpose will wrap the UI widget on which the event is triggered.

Here we are using a single mutation for create and update todo and making decisions based on what is being passed from the homepage. But, the concept here lies the same and runMutation() function is the key here.

Deleting a Todo: For deleting, first we will write a mutation string which is defined as done below:

Mutation operation for deleteTodo

Now, again same is the procedure, we will wrap the UI element/widget within the Mutation widget and runMutation() will be the key again to perform the delete operation. Below is the code sample for that.

IMPORTANT — There are a lot of solutions to a problem and every time someone’s solution will not work for you. For that you’ve to the efforts and figure out the way. This article will definitely give you an idea of how things work in integrating GraphQL and Flutter but if things are not working then might be the case that you will have to drill down some more into the domain and also in technical aspect to solve the problem.

Closing Words

GraphQL is highly scalable and a lot of big companies are using that in Production. Definitely you can build a lot of awesome things using this evolutionary technology GraphQL. These were some of the building blocks of GraphQL and their implementation in Flutter. You can find the complete code project on Github. Please go through the project to get the complete sense of the workflow of all the things.

Ohh! You’re still here. I am glad to see that you’ve made it to the very last of the article. If you liked the article and if you feel that there’s something helpful in this article then do clap or write your thoughts in response.

Thanks for reading. Keep Fluttering :)

ritesh-sharma33 - Overview

Ritesh Sharma - Technical Blogger - Medium | LinkedIn