How to Build a Real-Time Collaboration App with AWS AppSync & GraphQL

Introduction

Imagine you're using a team collaboration app, but messages take seconds to appear, document edits don’t sync instantly, and notifications arrive late.

Frustrating, right?

Real-time collaboration is no longer a luxury—it’s a necessity. Users expect instant updates, whether they’re chatting, editing shared files, or tracking live data. But building a smooth, scalable real-time system comes with challenges:

• Slow updates that require manual refreshes.
• Heavy server loads due to frequent polling.
• Synchronization conflicts, lead to outdated or lost data.

So, how do you fix this? Here’s the answer AWS AppSync and GraphQL Subscriptions.

• AWS AppSync makes real-time data synchronization effortless with a fully managed GraphQL backend.
• GraphQL subscriptions provide instant updates, eliminating the need for excessive API calls.

In this guide, we’ll cover the biggest challenges in building real-time collaboration, how AWS AppSync & GraphQL work together to keep data in sync, a step-by-step guide to setting up real-time updates in your app, and best practices to ensure speed, scalability, and security.

By the end, you’ll have a fast, seamless, and real-time collaboration system—no delays, no lost updates, just instant synchronization. So, let’s get started!

Understanding AWS AppSync & GraphQL for Real-Time Collaboration

Real-time collaboration is a game-changer for modern applications, enabling seamless interactions between users, whether in a chat app, live document editing, or shared dashboards. AWS AppSync, powered by GraphQL, provides the perfect solution for instant data synchronization without the complexity of managing servers or manually maintaining WebSocket connections.

Before diving into implementation, let’s break down how AWS AppSync and GraphQL work together to make real-time collaboration effortless.

i) What is AWS AppSync?

AWS AppSync is a fully managed GraphQL service that enables applications to fetch, modify, and sync data in real-time. Unlike traditional REST APIs, which require multiple endpoints, AppSync provides a single GraphQL endpoint for efficient data queries.

It works seamlessly with:

• Amazon DynamoDB – For scalable, low-latency data storage.
• AWS Lambda – To process complex business logic before updating data.
• Amazon Cognito – To manage user authentication and authorization.

With built-in offline support and conflict resolution, AWS AppSync ensures a smooth experience even when users lose internet connectivity.

ii) How GraphQL Enables Real-Time Collaboration

GraphQL is a flexible query language that allows clients to request only the data they need, reducing unnecessary data transfer. It operates using three main operations:

• Queries – Retrieve specific data (e.g., get user messages in a chat app).
• Mutations – Modify data (e.g., send a new message, update a task status).
• Subscriptions – Listen for real-time updates when data changes.

For real-time collaboration, GraphQL subscriptions play a crucial role. When a user modifies data, all connected users get live updates instantly, eliminating the need for manual refreshes.

For example, in a team collaboration app, if User A updates a shared task, User B sees the change in real time without reloading the page.

iii) How AWS AppSync Uses WebSockets for Live Data Sync

Traditional APIs rely on polling, which repeatedly sends requests to check for new data. This approach is inefficient, increases latency, and consumes more resources.

AWS AppSync solves this problem by using WebSockets, a lightweight protocol that maintains an open connection between the client and the server.

WebSockets vs. REST Polling & Webhooks:

Feature	WebSockets (AppSync)	Rest Polling	Webhooks
Data Delivery	Instant updates	Delayed (frequent requests)	Event-driven
Efficiency	Low bandwidth, real-time sync	High server load	Requires external event triggers
Connection	Persistent connection	Repeated requests	On-demand updates

With WebSockets, AWS AppSync sends real-time push updates whenever data changes, making it ideal for:

• Live chat applications
• Collaborative dashboards
• Multi-user document editing

By leveraging GraphQL subscriptions and WebSockets, AWS AppSync enables apps to deliver a seamless real-time experience—without the overhead of constantly checking for updates.

What’s Next?
Now that we understand why AWS AppSync is a game-changer, let’s move on to Setting Up AWS AppSync & GraphQL for Real-Time Collaboration, where we’ll configure everything step by step!

Setting Up AWS AppSync for Real-Time Collaboration

In this section, we'll create an AWS AppSync API, define a GraphQL schema, and enable real-time data synchronization for a live chat application.

i) Creating an AWS AppSync API

The first step is to set up an AWS AppSync API in the AWS Console. Here’s how:

Step 1: Navigate to AWS AppSync

• Log in to your AWS Console.
• Search for AWS AppSync and open the service.
• Click Create API and select Build from Scratch.

Step 2: Configure API Settings

• Enter a name for your API (e.g., RealTimeChatAPI).
• Choose GraphQL as the API type.

• Select an authentication method:

• • Amazon Cognito – Best for user authentication and access control.
• • API Key – Good for quick testing (expires in 7 days).
• • IAM Roles – Recommended for enterprise-grade security.

• Click Create to finalize your API setup.

Step 3: Enable GraphQL Subscriptions

To allow real-time updates, we need to enable GraphQL subscriptions:

• Go to the Settings tab in AWS AppSync.
• Enable Real-Time Updates for subscriptions.

At this point, our AWS AppSync API is ready to handle real-time data! Now, let’s define the GraphQL schema.

ii) Defining the GraphQL Schema for Real-Time Collaboration

A GraphQL schema defines how data is structured and how clients interact with the API. Let’s create a schema for a live chat app that allows users to send and receive messages instantly.

Step 1: Define the Message Type

We start by defining a Message type that includes:

id – Unique identifier for the message.
content – The actual text of the message.
sender – The user who sent the message.
createdAt – Timestamp for when the message was sent.

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

Step 2: Create a Mutation to Send Messages

Next, we define a mutation that allows users to send new messages:

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

This mutation takes content and sender as inputs and returns the newly created message.

Step 3: Enable Real-Time Subscriptions

To receive real-time updates when a new message is sent, we use a GraphQL subscription:

type Subscription {
  onNewMessage: Message @aws_subscribe(mutations: ["sendMessage"])
}

Whenever a message is sent via sendMessage, all subscribed users will receive the update instantly.

Step 4: Deploy the Schema

• Go to the Schema tab in AWS AppSync.
• Click Edit Schema and paste the GraphQL schema.
• Click Save and then Deploy.

Now, we have a fully functional real-time messaging system powered by AWS AppSync!

Next, we’ll configure the backend resolvers to store and retrieve messages from DynamoDB.

Integrating AWS DynamoDB as a Data Source

Now, we’ll set up AWS AppSync and define a GraphQL schema for real-time messaging, the next step is to integrate Amazon DynamoDB as the database backend. This will allow us to store, retrieve, and query messages efficiently while ensuring scalability.

i) Setting Up a DynamoDB Table for Storing Messages

DynamoDB is a fully managed NoSQL database that offers high availability, scalability, and low-latency performance. We’ll create a DynamoDB table to store our chat messages.

Step 1: Create a New DynamoDB Table

• Go to the AWS Console and navigate to DynamoDB.
• Click Create Table and enter a table name, e.g., ChatMessages.
• Set up the Primary Key:
• - Partition Key (id) → String (Unique message ID).
• - Sort Key (createdAt) → String (Timestamp for ordering messages).
• Keep On-Demand capacity mode (for automatic scaling).
• Click Create Table to finalize the setup.

Step 2: Enable Time-Based Sorting (Optional but Recommended)

To efficiently fetch the latest messages first, we use the createdAt Sort Key, ensuring:

• Messages are automatically sorted by timestamp.
• We can query messages within a time range.

Now that our database is set up, let’s connect it with AWS AppSync.

ii) Connecting DynamoDB with AWS AppSync Resolvers

Resolvers map GraphQL operations (queries, mutations, and subscriptions) to database actions. We’ll configure AWS AppSync to store and retrieve messages from DynamoDB.

Step 1: Connect DynamoDB to AWS AppSync

• Open AWS AppSync and navigate to the Data Sources tab.
• Click Create Data Source and select Amazon DynamoDB Table.
• Choose the ChatMessages table created earlier.
• Select IAM Role-based Access (AppSync will automatically create the role).
• Click Create to finalize the connection.

Step 2: Define a Resolver for Storing Messages

Next, we need to map the GraphQL mutation (sendMessage) to DynamoDB so messages are saved when a user sends them.

• Go to the Resolvers tab in AWS AppSync.
• Select the Mutation field sendMessage.
• Click Attach Resolver, choose DynamoDB, and select ChatMessages.
• Use the following Request Mapping Template to insert messages into DynamoDB:

{
  "version": "2018-05-29",
  "operation": "PutItem",
  "key": {
    "id": { "S": "$util.autoId()" },
    "createdAt": { "S": "$util.time.nowISO8601()" }
  },
  "attributeValues": {
    "content": { "S": "$context.arguments.content" },
    "sender": { "S": "$context.arguments.sender" }
  }
}

This will:

• Generates a unique message ID (id).
• Sets the timestamp (createdAt) automatically.

• Stores the message content (content) and sender (sender) in DynamoDB.

• Click Save Resolver to apply the changes.

Step 3: Define a Resolver for Fetching Messages

To allow users to retrieve chat history, we define a resolver for GraphQL queries.

• Select the Query field for fetching messages.
• Attach a Resolver with the following Request Mapping Template:

{
  "version": "2018-05-29",
  "operation": "Query",
  "query": {
    "expression": "#chatRoom = :room",
    "expressionNames": {
      "#chatRoom": "chatRoomId"
    },
    "expressionValues": {
      ":room": { "S": "$context.arguments.chatRoomId" }
    }
  },
  "scanIndexForward": false,
  "limit": 20
}

This will:

• Fetches messages for a specific chat room.
• Sorts messages from newest to oldest (scanIndexForward: false).
• Limits result to 20 messages per query.

Next, we’ll configure GraphQL subscriptions to push real-time updates to all connected users.

Implementing Real-Time GraphQL Subscriptions in a React App

Now that we have AWS AppSync and DynamoDB integrated, we’ll implement real-time GraphQL subscriptions in a React app using AWS Amplify. This will allow users to send and receive messages instantly without refreshing the page.

i) Setting Up AWS Amplify in a React Project

AWS Amplify provides a simplified way to connect a React app with AWS services like AppSync. We need to install Amplify, configure authentication, and connect it with our AppSync API.

Step 1: Install AWS Amplify

In your React project directory, run:

npm install aws-amplify @aws-amplify/ui-react

Step 2: Configure Amplify in React

To connect our React app with AWS, we configure Amplify in the index.js or App.js file:

import Amplify from 'aws-amplify';
import awsconfig from './aws-exports';

Amplify.configure(awsconfig);

This will:

• Loads the AWS AppSync API configuration from aws-exports.js.
• Enables real-time GraphQL operations with AppSync.

Now, we can implement GraphQL subscriptions and mutations to send and receive messages in real-time.

ii) Subscribing to Real-Time Messages in React

GraphQL subscriptions allow the app to listen to new messages and update the UI instantly.

Step 1: Import GraphQL Subscription

Modify your React chat component to listen for new messages:

import { API, graphqlOperation } from 'aws-amplify';
import { onNewMessage } from './graphql/subscriptions';

API.graphql(graphqlOperation(onNewMessage)).subscribe({
  next: (messageData) => console.log('New message received:', messageData),
});

Step 2: Update State When a New Message Arrives

Instead of just logging the new message, we update the UI dynamically:

import React, { useEffect, useState } from 'react';
import { API, graphqlOperation } from 'aws-amplify';
import { onNewMessage } from './graphql/subscriptions';

const ChatComponent = () => {
  const [messages, setMessages] = useState([]);

  useEffect(() => {
    const subscription = API.graphql(graphqlOperation(onNewMessage)).subscribe({
      next: ({ value }) => {
        setMessages((prevMessages) => [...prevMessages, value.data.onNewMessage]);
      },
    });

    return () => subscription.unsubscribe(); // Cleanup on unmount
  }, []);

  return (
    <div>
      {messages.map((msg, index) => (
        <p key={index}>{msg.sender}: {msg.content}</p>
      ))}
    </div>
  );
};

export default ChatComponent;

Result:

• The useEffect subscribes to onNewMessage when the component mounts.
• When a new message is received, it updates the UI in real-time.
• The unsubscribe() function stops listening when the component unmounts.

Now, users will see new messages instantly in the chat window.

iii) Sending Messages with GraphQL Mutations

Users need a way to send messages, which will then be stored in DynamoDB and distributed in real-time via GraphQL subscriptions.

Step 1: Import the GraphQL Mutation

Modify your chat input component to include a send button:

import { API, graphqlOperation } from 'aws-amplify';
import { sendMessage } from './graphql/mutations';

async function sendNewMessage(content, sender) {
  await API.graphql(graphqlOperation(sendMessage, { content, sender }));
}

Step 2: Add a Message Input Field

Update the UI to allow users to type and send messages:

const ChatInput = () => {
  const [message, setMessage] = useState('');

  const handleSendMessage = async () => {
    if (message.trim() !== '') {
      await sendNewMessage(message, 'User1'); // Replace 'User1' with actual username
      setMessage('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={message}
        onChange={(e) => setMessage(e.target.value)}
        placeholder="Type your message..."
      />
      <button onClick={handleSendMessage}>Send</button>
    </div>
  );
};

export default ChatInput;

Result:

• Users type a message in the input field.
• When they click Send, the message is sent to AWS AppSync via sendMessage.
• AppSync stores the message in DynamoDB and notifies all active subscribers.

Finally, we have created GraphQL above and made our app ready. You can now sign up, add new data, and see real-time updates of newly added entries.

This completes the real-time chat implementation using AWS AppSync, GraphQL, DynamoDB, and React!

Best Practices for Optimizing Real-Time App Performance

Now that we've built real-time applications with AWS AppSync, GraphQL, and DynamoDB, it's essential to ensure that they are scalable, secure, and optimized for performance.

Key Best Practices

1. Enable AppSync Caching
   
   Reduce database reads by caching frequently accessed data, improving response times and lowering DynamoDB costs.

2. Use DynamoDB Auto-Scaling
   
   Dynamically adjust read/write capacity to handle traffic spikes efficiently while preventing over-provisioning.

3. Optimize GraphQL Queries
   
   Fetch only necessary fields, use pagination, and filter data at the database level to minimize response size and reduce network overhead.

4. Manage WebSocket Connections
   
   Limit excessive open connections, close inactive sessions, and handle reconnections efficiently to prevent unnecessary background processing.

By implementing these best practices, your AWS AppSync-powered real-time app will be faster, more responsive, and cost-efficient.

The Final Verdict

Building a real-time collaboration app isn’t just about implementing GraphQL subscriptions—it’s about leveraging the right AWS tools to ensure seamless performance, scalability, and security.

By integrating AWS AppSync, GraphQL, and DynamoDB, you can:

• Deliver real-time updates with GraphQL subscriptions and WebSockets.
• Ensure low-latency data synchronization for a smooth user experience.
• Scale dynamically with DynamoDB’s auto-scaling capabilities.
• Enhance security with fine-grained access control using Cognito and IAM.

This cloud-native approach transforms how real-time apps handle data, making them more responsive, efficient, and scalable. Implement these best practices today, and build applications that keep users engaged—without lag or data inconsistencies!