On our first Flutter-GraphQL guide, we’ve learned how to set up a Flutter project using GraphQL API to connect and query simple data on Back4App. Also, how we can use the Back4App GraphQL Playground to run queries/mutations to create/populate the App Database.

In this tutorial, we will add a feature with which we will directly create, update, and delete data from our Back4App backend directly from our App using GraphQL mutations.

At the end of this article we expect that you will be able to:

Create a new file mutation_page.dart. Here we will create our GUI for taking input from the user and perform Mutation tasks. Now paste the following code in mutation_page.dart.

AppUI() widget has already been made for you. So we have created a class named MutationPage and returnded the AppUI widget as its widget. We have also initialsed callback functions for our Text Fields such that Text in first textField will be stored in langName, second one in saveFormat and objectId from the last. Now proceed to main.dart and add a floatingActionButton parameter in Scaffold() widget of MyHomePage class and pass the following code into it:

This will create a Floating Button that will Navigate us to the MutationPage() from our Home page. So now our GUI is set. You can now Hot Restart your App to see the GUI. This is how your main.dart should look like:

If you proceed to graphql_configration.dart you could see that we have already set our GraphQLclient and now we can use it anywhere. Let’s proceed to and create a file database_utils.dart and perform an operation for Creating data. Create a class DatabaseUtils{} and create a constructor that would receive the data parameters we would work on, here we will require langName,saveFormat, and objectId:

Create a functiion addData() which will be an asynchronous function to Create data and initialse our GraphQLClient by initialsing GraphQLConfigration class. Paste the following code into sendData() function:

Here we have initialized a variable addData and have passed the query to create data and initialized variable that will pass the query Variables. We also initialized the GraphQLClient that will help us to pass queries. We can pass the queries in the manner below:

We used our GraphQLClient instance to write a query that accepts QueryOptions() that helps us to send a query as you have seen from the last tutorial. The result is stored in queryResult. This is how your database_utils.dart should look like:

Now proceed to your UI class mutation_page.dart. Lets code for send data button which can be coded inside the sendDataButtonPressed: parameter. Since we need the langName and saveFormat first check if it is not empty and then Create an instance of DatabaseUtils and the pass the langName and saveFormat parameter.

After this call the sendData() function from the DatabaseUtils instance.

Now you can Hot Restart app, fill the two text fields with their respective data and press the send data button. Now go back to your Query page by pressing the floating action button and you could see one more data is added to our table. This is how your MutationPage class would look like:

In DatabaseUtils create a Future function updateData(). Initialise a String update and pass in the update query and query variables in final variables:

Now initialse our GraphQLClient and send the query through QueryOptions(). This is how your code would look like:

Now come back to mutaion_page.dart and code in the updateButtonPressed: parameter. Check if langName, objectId and saveFormat are not empty and then call the updateData() funtion from DatabaseUtils class.

Go to Back4App Dashboard and choose a language to update, then copy its objectID. Hot restart your app and fill all the 3 text fields: the new name of the language you want to insert in first text field and the new save Format in second and objectId in third . Now press the Update data button and check the updated information on the App by clicking over the Q floating action button on bottom right.

Create a deleteData() async function in DatabaseUtils and initialize String delete and pass the GraphQL query to delete data. Take final variables and pass the query variables into it.

In this, we only require the objectId of the row that needs to be deleted. Initialize the GraphQLClient and send the query through QueryOptions().

In MutationPage in the deleteDataButtonPressed: parameter check if objectId is not Empty or null and call the deleteData() function. Hot Restart application, enter the objectId of the row to be deleted and press the Delete Data button. It should delete a specific row from your Language class.

SUCCESS your app has finally done your mutation operations !!!

main.dart should look like this:

database_utils.dart should like this:

mutaion_page.dart should look like this :

In this guide we used GraphQL mutations in the Flutter app to:

At this point you have a fully functional Flutter GraphQL CRUD project where you can use at starting point to develop your next App. In the next guide we are going to dive deep into queries showing how to make them to retrieve data from Back4App and show on our Flutter App.

Have a great day!