Learn about Amplify API GraphQL Model Helper For Flutter
Tags: flutter, aws, tutorial, opensource
Published: 2022-03-31 16:37:22

AWS Amplify is a set of tools and services that enables mobile and front-end web developers to build secure, scalable full-stack applications powered by AWS. Amplify recently released a new enhancement for the API category to improve the GraphQL experience by allowing developers to use the codegen models to quickly generate request objects for queries, mutations, and subscriptions. The responses will then be automatically parsed into instances of the model.

Let’s demonstrate this by building an expense tracker app where users can manage their expenses by recording, editing, deleting, and categorizing them into buckets. We will use the Amplify Authenticator UI library to quickly create an authentication flow so we can focus on the core functionality of our app. Once the authentication is done, we will show a homepage with two floating buttons to create expenses and categories.

{% embed https://youtu.be/WadoV6WGBRE %}

### Prerequisites


* <a href="https://docs.amplify.aws/cli/start/install/">Install</a> and configure Amplify CLI
* A Flutter application targeting Flutter SDK >= 2.0.0 (stable version) with Amplify libraries integrated
* An iOS configuration targeting at least iOS 11.0
* An Android configuration targeting at least Android API level 21 (Android 5.0) or above

### Authentication Flow

The Authenticator will add complete authentication flows to the App. All we need to do is wrap the MaterialApp widget with the Authenticator widget. Yes, it is that easy!!

{% embed https://gist.github.com/offlineprogrammer/a4a3cbc4e1d2bd1c8920023cf7232a6b %}

![Easy](https://media.giphy.com/media/3o7btNa0RUYa5E7iiQ/giphy.gif)


### Data Modeling
We will use two data models for our Graphql schema: ExpenseItem & ExpenseCategory. The ExpenseCategory can have multiple ExpenseItems i.e., 1:n relation. The owner-based auth we are using for this schema will allow each user only to see the expenses/categories they made.

{% embed https://gist.github.com/offlineprogrammer/d2c1940b8278f3bf19bb64549da0715d %}

Run the command below to generate the models files. They will be placed under the lib/models directory.

{% embed https://gist.github.com/offlineprogrammer/ad8ff9ee8b4ed7222bb4e871f4e9b8c7 %}

### Create, update, delete data
We created a service to implement the CRUD functions for the models. We will run GraphQL mutation with Amplify.API.mutate to create, update and delete the data. We will fetch the data using Amplify.API.query

{% embed https://gist.github.com/offlineprogrammer/70e0d845b28d8ff13a1b6bab43d906d4 %}

### The Widget Tree


![Widget Tree](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/imvx525xnqrt6xp7z0e7.png)

The App UI widgets will collect the required information to create, update & delete the expense items & categories, then call the corresponding API service methods.

{% embed https://gist.github.com/offlineprogrammer/bd96fefaa70019b6364140dbbe819a24 %}

We organized the files according to their functionality/type. We have a single page for the App in the pages folder. We are using the widgets folder for the widgets we created to handle the UI of Adding/Updating/Deleting the expense items and categories. The UI uses the APIService in the services folder for integrating with Amplify API category for the CRUD operations. The `amplify codegen models` command will generate the models files and place them in the models folder.


![App Folders](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z5z7t3tvxmtlt7jac8x2.png)


### Run the App
We packed the code with cool concepts and ideas. We used multiple widgets/files to make things easier to read. We tried to follow best practices to produce a modular, testable & maintainable code. The App code is here


{% embed https://github.com/offlineprogrammer/amplify_expense_tracker %}

Let’s go step by step through how to run this App.

{% embed https://youtu.be/66AE93uAffk %}

Learn more
You can use the following resources to learn more and get help regarding AWS Amplify:
* 🎬 [Authentication Using the AWS Amplify Authenticator UI library](https://youtu.be/ToI58hqFDtU)
* 🚀 [Amplify Flutter Github](https://github.com/aws-amplify/amplify-flutter)
* 📜 [Amplify Docs](https://docs.amplify.aws/)
* 💬 [Amplify Discord Community](https://discord.gg/amplify)

Thank you. 👋🏻

> Follow me on <a href="https://twitter.com/_Mo_Malaka_">Twitter</a> for more tips about #coding, #learning, #technology...etc.

> Check my Apps on <a href="https://bit.ly/3h05gQ7">Google Play</a> & <a href="https://apple.co/3hZXoBx">Apple Store</a>

![Thats all](https://media.giphy.com/media/lD76yTC5zxZPG/giphy.gif)

<span>Cover image <a href="https://unsplash.com/@brett_jordan?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Brett Jordan</a> on <a href="https://unsplash.com/s/photos/ask-for-help?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></span>