We are now ready with the UI components. All we need to do is to bind them according to GraphQL data responses. First, we shall generate all mutations and queries that we need using Hasura’s dashboard.

The operations need to be performed on to-do’s are :

• Add new task

• Delete task

• Mark task as complete

• Fetch the task List

Following are the queries and mutations generated from the dashboard. The required ID’s are added as needed, to perform the required operations. You can use these at services → graphQldata.dart .

From graphql_flutter package, we get three master widgets to perform GraphQL functions :

• Query

• Mutation

• Subscription

The query widget provides two parameters, options and builder . options is used to run a query where a fetchQuery() query has run and builder is to build a todo component according to the data received from a query result. Here is the list of all the todo-list items that we added in the backend.

For Mutations, we need the GraphQLClient object to update the database.

First, we will initialise our GraphQLClient object inside our ToDo class.

We can directly initialise client in the build(context){} as GraphQLClient needs a context of the app to initialise itself. But, in this case, we have to wait for the context to get completely built, so that we can initialise it properly.

Okay Great! But we are forgetting how to add a new task in our to-do list. Why not use a floating action button for that and write mutations on its tap.

MutationOptions widget updates the database by running mutations and it takes document parameter, in which we have to pass our mutation string with the data we need to update. Here, addTaskMutation() takes its parameter as the todo task name and returns a mutation string to add a new to-do item. The mutation string is passed as a document to MutationOptions widget which updates the real database.

And same for delete() and toggleIsCompleted() callback functions.

All the mutation strings are mentioned in the above code snippet (graphQLData.dart). The Final app flow looks something like this :

Note: There are two methods provided by graphQl_flutter to make your app real-time :

• Poll intervals

• Subscriptions

For this task, we have used poll interval to sync our app at regular intervals. We will try subscriptions as well and will let you know in an update in an upcoming blog post.

It took me just a few hours to develop this complete app with a functional backend, and you will too, when you follow this article and implement the app on your own with Flutter + GraphQL with Hasura.

That’s all Folks.