Flutter AppSync Demo

Create custom bridge for AWS AppSync

Presentation

This project is an example of using Flutter with the AWS AppSync solution. It is configured in state UE CENTRAL 1 (Francfort)

AWS AppSync automatically updates web and mobile application data in real time, and offline user data is updated as soon as it is reconnected. If you use AppSync as a simple GraphQL API without the subscribe feature then it would be better to use the following plugin: : https://pub.dartlang.org/packages/graphql_flutter

The bridge is based on the official documentation of the AppSync SDK.

AWS AppSync SDK Android : https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-android.html

AWS AppSync SDK iOS : https://docs.aws.amazon.com/appsync/latest/devguide/building-a-client-app-ios.html

If you want more information on the development of a flutter plugin here is an official link: https://flutter.io/developing-packages/

To make this example work, AppSync is configured with the following GraphQL schema :

GraphQL schema

The GraphQL schema:

type Message {
	id: ID!
	content: String!
	sender: String!
}

type Mutation {
	newMessage(content: String!, sender: String!): Message
}

type Query {
	getMessages: [Message]
}

type Subscription {
	subscribeToNewMessage: Message
		@aws_subscribe(mutations: ["newMessage"])
}

schema {
	query: Query
	mutation: Mutation
	subscription: Subscription
}

To create your GraphQL schema for AppSync, see the link https://docs.aws.amazon.com/appsync/latest/devguide/graphql-overview.html

Security

AppSync will be secured by API Key.

https://docs.aws.amazon.com/appsync/latest/devguide/security.html

Data Source

The Data Source used by AppSync is a lambda. Here is this example here is a simplified version :

var incrementId = 0;
var messages = [];

exports.handler = async (event, context, callback) => {
    switch (event.field) {
        // match with Data Template resolver
        case 'getMessages':
            getMessages(event, context, callback);
            break;
        case 'newMessage':
            newMessage(event, context, callback);
            break;
        default: throw new Error("unsupported");
    }
};

function getMessages(event, context, callback) {
    callback(null, messages);
}

async function newMessage(event, context, callback) {
    const args = event.arguments;
    const msg = {
        id: (++incrementId).toString(),
        content: args.content,
        sender: args.sender,
        conversationId: args.conversationId
    };
    messages.push(msg);
    
    callback(null, msg);
}

To link the GraphQL schema methods to the lambda refer to the following link : https://docs.aws.amazon.com/appsync/latest/devguide/tutorial-lambda-resolvers.html

Resolvers

Request template resolver for NewMessage Mutation :

{
    "version" : "2017-02-28",
    "operation": "Invoke",
    "payload": {
    	"field" : "newMessage",
        "arguments": $util.toJson($context.args)
    }
}

Request template resolver for GetMessages Query :

{
    "version" : "2017-02-28",
    "operation": "Invoke",
    "payload": {
    	"field" : "getMessages",
        "arguments": $util.toJson($context.args)
    }
}

Configuration sample

To configure AppSync in the project, modify the constants of the file /lib/constants.dart

const AWS_APP_SYNC_ENDPOINT = "YOUR ENDPOINT"; // like https://xxx.appsync-api.eu-central-1.amazonaws.com/graphql
const AWS_APP_SYNC_KEY = "YOUR API KEY";

Custom Configuration in your project

1. Android

Step 1: add aws android SDK classpath

// android/build.gradle
buildscript {

    dependencies {
        classpath 'com.amazonaws:aws-android-sdk-appsync-gradle-plugin:2.6.17'
    }

}

Step 2: Plugin plugin and SDK

// android/app/build.gradle

apply plugin: 'com.amazonaws.appsync'

dependencies {
    implementation 'com.amazonaws:aws-android-sdk-appsync:2.6.17'
    implementation 'org.eclipse.paho:org.eclipse.paho.client.mqttv3:1.2.0'
    implementation 'org.eclipse.paho:org.eclipse.paho.android.service:1.1.1'
    implementation 'com.android.support:support-v4:27.1.1'
}

Step 3: add schema and request GraphQL

Copy your files in :

/android/app/src/main/graphql/your.package.name/.graphql /android/app/src/main/graphql/your.package.name/.json

Step 4: Configure Android Manifest

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.ineat.appsync">


    <uses-permission android:name="android.permission.INTERNET"/>
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />
    <uses-permission android:name="android.permission.WAKE_LOCK" />
    
    <application>
        <!-- ... -->
        <!-- Service paho for retrieve all data in background -->
        <service android:name="org.eclipse.paho.android.service.MqttService" />
    </application>
    
</manifest>

Step 5: Generation GraphQL models

Launch gradle command :

# /android
./gradle generateApolloClasses

2. iOS

Step 1: add AWS SDK in your Podfile

target 'Runner' do
  use_frameworks!
  pod 'AWSAppSync', '~> 2.6.7'
end

Step 2: Retrieve all dependencies

pod install

Caution: Configure your deployment target at 9.0 (Runner.xcworkspace)

Step 3: add schema and request GraphQL

Copy your files in :

/iOS/*.graphql /iOS/schema.json

For generate models you have to use the npm library aws-appsync-codegen (https://www.npmjs.com/package/aws-appsync-codegen)

Launch the command :

# ios/
aws-appsync-codegen generate *.graphql --schema schema.json --output ./Runner/AppSyncAPI.swift