⚡ Angular GraphQL AppSync

• App using Angular to create a todo list. AWS amplify and Appsync are used to communicate with a todo database, hosted in a GraphQL serverless AWS backend.
• The home screen displays an AWS authorization page. Once authorised the user can create todos that are listed in the UI.
• Amplify Appsync SDK is used to create mutations etc. Offline support is added so any todo items added while off line are shown on the UI then are added to the backend as part of the ngOnit lifecycle method.
• Upgrade to Angular 10 etc. does not work - consider replaceing with another AWS amplify and Appsync app

*** Note: to open web links in a new window use: ctrl+click on link**

📄 Table of contents

• General info
• Screenshots
• Technologies
• Setup
• Features
• Status
• Inspiration
• Contact

📚 General info

• AWS Amplify makes it easy to create, configure, and implement scalable mobile and web apps powered by AWS. It provides a framework to integrate the backend with iOS, Android, Web, and React Native frontends. It allows you to select the capabilities needed, e.g. authorization, analytics or offline data sync.

• AWS Appsync SDK enables integration of the app with the AWS AppSync service. The SDK supports multiple authorization models, handles subscription handshake protocols for real-time updates to data, and has built-in capabilities for offline support that makes it easy to integrate.

📷 Screenshots

.

📶 Technologies

• Angular v8.0.0
• Angular CLI v8.0.1.
• aws-amplify v1.1.29 core Javascript library. Documentation
• aws-amplify-angular v3.0.4 AWS Amplify library package, with building blocks for Angular App development.

💾 Setup

• Run ng serve for a dev server. Navigate to http://localhost:4200/. The app automatically reloads if you change any of the source files.

💻 Code Examples

• todo.component.ts extract from ngOnInit showing how any todos added while offline are added to the backend database as part of the ngOnInit lifecycle method.

  ngOnInit() {
    this.appsync.funchc().then(client => {
      const observable = client.watchQuery({
        query: gql(listTodos),
        fetchPolicy: 'cache-and-network'
      });

      observable.subscribe(({data}) => {
        this.allTodos = data.listTodos.items;
      });
    });
  }

Features

• The AWS Amplify push process creates a ./src/graphql folder structure and generates a new api in the AWS Appsync Console.

Status & To-Do List

• Status: Working: Very basic aws todo database that stores data in a cache if offline.

• To-Do: Explore AWS Amplify further.

Inspiration

• AWS AppSync Tutorial - GraphQL APIs with AppSync, Amplify and Angular

Contact

Repo created by ABateman - feel free to contact me!