Basic AppSync Subscription

AppSyncApp.js

import React, { Component } from 'react';
import { compose, graphql } from 'react-apollo';
import gql from 'graphql-tag';

import OnUpdateUser from './OnUpdateUser';
import GetUserQuery from './GetUser';

class Dashboard extends Component {

  //Set up subscription to user info changes
  componentDidUpdate(){
    if(this.props.subscribeToNewEvents){
      this.props.subscribeToNewEvents();
    }
  }

  render() {
    if(this.props.loading) {
      return (
        <div>
          <h1>Loading..</h1>
        </div>
      );
    } else {
      return (
        <section className="section margin-theta-bottom">
          { this.props.getUser.events.map((item, index) => {
            return (
              <div>
                <h6>{ item.name }</h6>
                <p>{ item.details }</p>
              </div>
            );
          })}
        </section>
      );
    }
  }
}

export default compose(
  graphql(GetUserQuery, {
    name: "GetUserQuery",
    options: props => ({
      fetchPolicy: 'cache-and-network',
      variables: {
        id: props.userId
      }
    }),
    props: (props) => {
      return {
        getUser: props.GetUserQuery.getUser,
        loading: props.GetUserQuery.loading,
        error: props.GetUserQuery.error,
        // Subscription function: re-fire GetUserQuery whenever updateUser is called on logged in user
        subscribeToNewEvents: params => {
          props.GetUserQuery.subscribeToMore({
            document: OnUpdateUser,
            variables: {
              id: props.ownProps.userId
            },
            updateQuery: (prev, { subscriptionData: { data : { onUpdateUser } } }) => {
              return {
                getUser: onUpdateUser
              };
            }
          });
        }
      };
    }
  })
)(Dashboard);

GetUser.js

import gql from 'graphql-tag';

export default gql `
query getUser($id: String!) {
  getUser(
    id: $id
  ){
    accountLinked
    createdAt
    events
    id
    KYCStatus
    name
    nickname
    password
    phoneNumber
    updatedAt
    walletLinked
  }
}
`;

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import AppSyncApp from './AppSyncApp';
import AWSAppSyncClient from "aws-appsync";
import { Rehydrated } from 'aws-appsync-react';
import { ApolloProvider } from 'react-apollo';
import appSyncConfig from './AppSync';
import Amplify, { Auth } from 'aws-amplify';

Amplify.configure(awsconfig);

const client = new AWSAppSyncClient({
  url: appSyncConfig.graphqlEndpoint,
  region: appSyncConfig.region,
  auth: {
    type: appSyncConfig.authenticationType,
    credentials: async () => {
      let credentials = await Auth.currentCredentials();
      return credentials;
    }
  },
  disableOffline: true
});

const WithProvider = () => (
  <ApolloProvider client={client}>
    <Rehydrated>
      <App />
    </Rehydrated>
  </ApolloProvider>
);

ReactDOM.render(<WithProvider />, document.getElementById('root'));

OnUpdateUser.js

import gql from 'graphql-tag';

export default gql `
subscription onUpdateUser($id: String!) {
  onUpdateUser(id: $id){
    id
  }
}
`;

schema.graphql

// These are the updates needed in your schema to support basic changes:

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

type Mutation {
	createUser(input: CreateUserInput!): User
	deleteUser(input: DeleteUserInput!): User
	updateUser(input: UpdateUserInput!): User
}

type Query {
	getUser(id: String!): User
}

type Subscription {
	onUpdateUser(
		updatedAt: String,
		id: String,
		name: String,
		nickname: String,
		password: String
	): User
		@aws_subscribe(mutations: ["updateUser"])
}

type User {
	events: [String]
	id: String!
	name: String
}

input CreateUserInput {
	events: [String]
	id: String!
	name: Strings
}

input DeleteUserInput {
	id: String!
}

input UpdateUserInput {
	events: [String]
	id: String!
	name: String
}