Getting Started

Update your src/app.js file to configure the library with Amplify.configure() and add data to your database with a mutation by using API.graphql():

import API, { graphqlOperation } from '@aws-amplify/api'
import PubSub from '@aws-amplify/pubsub';
import { createTodo } from './graphql/mutations'

import awsconfig from './aws-exports';
API.configure(awsconfig);
PubSub.configure(awsconfig);

async function createNewTodo() {
  const todo = { name: "Use AppSync" , description: "Realtime and Offline"}
  return await API.graphql(graphqlOperation(createTodo, { input: todo }))
}

const MutationButton = document.getElementById('MutationEventButton');
const MutationResult = document.getElementById('MutationResult');

MutationButton.addEventListener('click', (evt) => {
  MutationResult.innerHTML = `MUTATION RESULTS:`;
  createNewTodo().then( (evt) => {
    MutationResult.innerHTML += `<p>${evt.data.createTodo.name} - ${evt.data.createTodo.description}</p>`
  })
});

After restarting your app using npm start go back to your browser and click ADD DATA. You’ll see that your application is now submitting events to AppSync and storing records in DynamoDB. Next, update src/app.js to list all the items in the database by importing listTodos and update the page when a query runs on app start by immediately calling the function:

// other imports
import { listTodos } from './graphql/queries'

const QueryResult = document.getElementById('QueryResult');

async function getData() {
  QueryResult.innerHTML = `QUERY RESULTS`;
  API.graphql(graphqlOperation(listTodos)).then((evt) => {
    evt.data.listTodos.items.map((todo, i) => 
    QueryResult.innerHTML += `<p>${todo.name} - ${todo.description}</p>`
    );
  })
}

getData();

Now if you wish to subscribe to data, import the onCreateTodo subscription and create a new subscription by adding subscription with API.graphql() like so:

// other imports
import { onCreateTodo } from './graphql/subscriptions'

const SubscriptionResult = document.getElementById('SubscriptionResult');

API.graphql(graphqlOperation(onCreateTodo)).subscribe({
  next: (evt) =>{
    SubscriptionResult.innerHTML = `SUBSCRIPTION RESULTS`
    const todo = evt.value.data.onCreateTodo;
    SubscriptionResult.innerHTML += `<p>${todo.name} - ${todo.description}</p>`
  }
});

The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify'. However, importing only the required categories is recommended as it will greatly reduce the final bundle size.

After restarting your app using npm start go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command:

$ amplify console api
> GraphQL               ##Select GraphQL

This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your App.js file to configure the library with Amplify.configure() and add data to your database with a mutation by using API.graphql():

import React, { useEffect, useReducer } from 'react'
import { StyleSheet, Text, View, Button } from 'react-native';
import API, { graphqlOperation } from '@aws-amplify/api'
import PubSub from '@aws-amplify/pubsub';
import { createTodo } from './src/graphql/mutations';

import config from './aws-exports'
API.configure(config)             // Configure Amplify
PubSub.configure(config)

async function createNewTodo() {
  const todo = { name: "Use AppSync" , description: "Realtime and Offline"}
  await API.graphql(graphqlOperation(createTodo, { input: todo }))
}

export default function App() {
  return (
    <View style={styles.container}>
      <Button onPress={createNewTodo} title='Create Todo' />
    </View>
  );
}

const styles = StyleSheet.create({
   container: {
     backgroundColor: '#ddeeff',
     alignItems: 'center',
     justifyContent: 'center',
     flex: 1
   }
 });

Next, update App.js to list all the items in the database by importing listTodos and then using Hooks to update the page when a query runs on app start by adding initial state and a reducer function as well as modifying your App function:

// other imports
import { listTodos } from './src/graphql/queries';

const initialState = {todos:[]};
const reducer = (state, action) =>{
  switch(action.type){
    case 'QUERY':
      return {...state, todos:action.todos}
    case 'SUBSCRIPTION':
      return {...state, todos:[...state.todos, action.todo]}
    default:
      return state
  }
}

export default function App() {
  const [state, dispatch] = useReducer(reducer, initialState)

  useEffect(() => {
    getData()
  }, [])

  async function getData() {
    const todoData = await API.graphql(graphqlOperation(listTodos))
    dispatch({type:'QUERY', todos: todoData.data.listTodos.items});
  }

  return (
    <View style={styles.container}>
      <Button onPress={createNewTodo} title='Create Todo' />
      { state.todos.map((todo, i) => <Text key={todo.id}>{todo.name} : {todo.description}</Text>) }
    </View>
  );
}

Now if you wish to subscribe to data, import the onCreateTodo subscription and create a new subscription by adding subscription with API.graphql() like so:

// other imports
import { onCreateTodo } from './src/graphql/subscriptions';

useEffect(() => {
  //...other code

  const subscription = API.graphql(graphqlOperation(onCreateTodo)).subscribe({
      next: (eventData) => {
        const todo = eventData.value.data.onCreateTodo;
        dispatch({type:'SUBSCRIPTION', todo})
      }
  })
  return () => subscription.unsubscribe()
}, [])

The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify'. However, importing only the required categories is recommended as it will greatly reduce the final bundle size.

After restarting your app and running a mutation, using dev tools (developer menu tap “Debug JS Remotely) you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command:

$ amplify console api
> GraphQL               ##Select GraphQL

This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your main.ts to configure the library with Amplify.configure():

import PubSub from '@aws-amplify/pubsub';
import API from '@aws-amplify/api';
import awsconfig from './aws-exports';

API.configure(awsconfig);
PubSub.configure(awsconfig);

Depending on your TypeScript version you may need to rename aws-exports.js to aws-exports.ts prior to importing, or enable the allowJs compiler option in your tsconfig.

Update src/tsconfig.app.json to include the “node” compiler option in types:

"compilerOptions": {
    "types" : ["node"]
}

Note: If you are using Angular 6 or above, you may need to add the following to the top of your src/polyfills.ts file:

(window as any).global = window;

(window as any).process = {
  env: { DEBUG: undefined },
};

In your src/app/app.component.ts file, add the following imports and modifications to your class to to add data to your database with a mutation by using the API.service file which was generated when you ran amplify add api:

import { APIService } from './API.service';

export class AppComponent {

  constructor(private apiService: APIService) {}

  createTodo() {
    this.apiService.CreateTodo({
        name: 'Angular',
        description: 'testing'
    });
  }
}

Add the following to your src/app/app.component.html to add a button which calls your createTodo() method:

<button (click)="createTodo()">Add Todo</button>

Next, update the class to list all items in the database by running a ListTodos query when the app starts by implementing OnInit and storing the items in an array:

export class AppComponent implements OnInit {
  todos: Array<any>;

  async ngOnInit() {
    this.apiService.ListTodos().then((evt) => {
      this.todos = evt.items;
    });
  }
  //Other code....
}

Add the following to your src/app/app.component.html to display any of the todos you have added:

<ul>
  <li *ngFor="let item of todos">{{item.name}} - {{item.description}}</li>
</ul>

Finally, to subscribe to realtime data, update ngOnInit to setup a subscription on app start and update the todos array when new events are received:

import { Component, OnInit } from '@angular/core';

export class AppComponent implements OnInit {

  async ngOnInit() {
    //Other code...

    this.apiService.OnCreateTodoListener.subscribe((evt) => {
      const data = (evt as any).value.data.onCreateTodo;
      this.todos = [...this.todos, data];
    });
  }

The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify'. However, importing only the required categories is recommended as it will greatly reduce the final bundle size.

After restarting your app using ng serve go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command:

$ amplify console api
> GraphQL               ##Select GraphQL

This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your main.ts to configure the library:

import PubSub from '@aws-amplify/pubsub';
import API from '@aws-amplify/api';
import awsconfig from './aws-exports';

API.configure(awsconfig);
PubSub.configure(awsconfig);

When working with underlying aws-js-sdk, the “node” package should be included in types compiler option. update your src/tsconfig.app.json:

"compilerOptions": {
    "types" : ["node"]
}

Note: If you are using Angular 6 or above or above, you may need to add the following to the top of your src/polyfills.ts file:

(window as any).global = window;

(window as any).process = {
  env: { DEBUG: undefined },
};

In your src/app/app.component.ts file, add the following imports and modifications to your class to to add data to your database with a mutation by using the API.service file which was generated when you ran amplify add api:

import { APIService } from './API.service';

constructor(
    //other variables
    private apiService: APIService
  ){  
    this.initializeApp();
  } 

  createTodo() {
    this.apiService.CreateTodo({
        name: 'ionic',
        description: 'testing'
    });
  }

Then, replace your src/app/app.component.html code with a button to add data:

<ion-button (click)="createTodo()">Add Data</ion-button>

Next, update initializeApp() in src/app/app.component.ts to list all items in the database by running a query on start and populating a local variable called todos:

export class AppComponent {
  todos: Array<any>;

  initializeApp() {
    this.platform.ready().then(() => {
      //other code
      this.apiService.ListTodos().then((evt) => {
        this.todos = evt.items;
      });
    });
  }
}

Add the following to your src/app/app.component.html to display any of the todos you have added:

<ion-list>
  <ion-item *ngFor="let item of todos">
    {{item.name}} - {{item.description}}
  </ion-item>
</ion-list>

Finally, to subscribe to realtime data, update initializeApp() to setup a subscription on app start and update the todos array when new events are received:

initializeApp() {
  this.platform.ready().then(() => {
    //other code
    this.apiService.OnCreateTodoListener.subscribe((evt) => {
      const data = (evt as any).value.data.onCreateTodo;
      this.todos = [...this.todos, data];
    });
  }
}

The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify'. However, importing only the required categories is recommended as it will greatly reduce the final bundle size.

After restarting your app using ng serve go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command:

$ amplify console api
> GraphQL               ##Select GraphQL

This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.

Update your main.js file to configure the library with Amplify.configure() like so:

import Vue from 'vue'
import App from './App.vue'

import API from '@aws-amplify/api';
import PubSub from '@aws-amplify/pubsub';
import awsconfig from './aws-exports';
API.configure(awsconfig);
PubSub.configure(awsconfig);

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

Next, open App.vue add data to your database with a mutation by using API.graphql():

<template>
  <div id="app">
    <button @click="createNewTodo">Add Todo</button>
  </div>
</template>

<script>
import API, {  graphqlOperation } from '@aws-amplify/api';
// eslint-disable-next-line
import { createTodo } from "./graphql/mutations";

export default {
  name: 'app',
  methods :{
    async createNewTodo(){
      const todo = { name: "Use AppSync" , description: "Realtime and Offline"}
      await API.graphql(graphqlOperation(createTodo, { input: todo }))
    }
  }
};
</script>

To display the data, update App.vue to list all the items in the database by importing listTodos and then using the created() Vue lifecycle method to update the page when a query runs on page load:

<template>
  <div id="app">
    <button @click="createNewTodo">Add Todo</button>
    <ul>
      <li v-for="todo in todos" :key="todo.id">
        {{todo.name}} - {{todo.description}}
      </li>
    </ul>
  </div>
</template>

<script>
// other imports
import { listTodos } from './graphql/queries'

export default {
  name: 'app',
  data(){
    return {
      todos: []
    }
  },
  methods :{
    async createNewTodo(){ /* code above */}, 
    async getData(){
      const todoData = await API.graphql(graphqlOperation(listTodos))
      this.todos.push(...this.todos, ...todoData.data.listTodos.items);
    }
  },
  created(){
    this.getData()
  }
};

</script>

Now if you wish to subscribe to data, import the onCreateTodo subscription and create a new subscription by adding subscription with API.graphql() like so:

<script>
// other imports
import { onCreateTodo } from './graphql/subscriptions'

export default {
  name: 'app',
  data(){
    return {
      todos: []
    }
  },
  methods :{
    async createNewTodo(){  /* code above */ }, 
    async getData(){  /* code above */ },
    subscribe(){
      API.graphql(graphqlOperation(onCreateTodo)).subscribe({
        next: (eventData) => {
          const todo = eventData.value.data.onCreateTodo;
          this.todos.push(todo);
        }
      })
    }
  },
  created(){
    this.getData()
    this.subscribe()
  }
};
</script>

The code above imports only the API and PubSub category. To import the entire Amplify library use import Amplify from 'aws-amplify'. However, importing only the required categories is recommended as it will greatly reduce the final bundle size.

After restarting your app using yarn serve go back to your browser and using dev tools you will see data being stored and retrieved in your backend from the console logs. At any time you can open the AWS console for your new API directly by running the following command:

$ amplify console api
> GraphQL               ##Select GraphQL

This will open the AWS AppSync console for you to run Queries, Mutations, or Subscriptions at the server and see the changes in your client app.