AWS AppSync: Building Real-Time Apps Without the Headache

type Todo {
id: ID!
title: String!
description: String
completed: Boolean!
priority: Priority!
owner: String!
createdAt: AWSDateTime!
updatedAt: AWSDateTime!
version: Int!
}

enum Priority {
LOW
MEDIUM
HIGH
}

type Query {
getTodo(id: ID!): Todo
listMyTodos: [Todo]
}

type Mutation {
createTodo(input: CreateTodoInput!): Todo
updateTodo(input: UpdateTodoInput!): Todo
toggleTodo(id: ID!): Todo
deleteTodo(id: ID!): Todo
}

type Subscription {
onCreateTodo(owner: String): Todo
@aws_subscribe(mutations: ["createTodo"])
onUpdateTodo(owner: String): Todo
@aws_subscribe(mutations: ["updateTodo", "toggleTodo"])
onDeleteTodo(owner: String): Todo
@aws_subscribe(mutations: ["deleteTodo"])
}

input CreateTodoInput {
title: String!
description: String
priority: Priority!
}

input UpdateTodoInput {
id: ID!
title: String
description: String
priority: Priority
completed: Boolean
version: Int!
}

The Resolver (Where the Magic Happens)
This is the code that actually saves your todo to DynamoDB:

import { util } from '@aws-appsync/utils';

export function request(ctx) {
const id = util.autoId();
const now = util.time.nowISO8601();

return {
operation: 'PutItem',
key: util.dynamodb.toMapValues({ id }),
attributeValues: util.dynamodb.toMapValues({
title: ctx.args.input.title,
description: ctx.args.input.description || '',
priority: ctx.args.input.priority,
completed: false,
owner: ctx.identity.username,
createdAt: now,
updatedAt: now,
version: 1
})
};
}

export function response(ctx) {
return ctx.result;
}

The Frontend (React + Next.js)

import { useState, useEffect } from 'react';
import { generateClient } from 'aws-amplify/api';
import { listMyTodos, createTodo, toggleTodo, deleteTodo,
onCreateTodo, onUpdateTodo, onDeleteTodo } from '@/lib/graphql';

const client = generateClient();

export default function TodoList() {
const [todos, setTodos] = useState([]);
const [title, setTitle] = useState('');
const [priority, setPriority] = useState('MEDIUM');

useEffect(() => {
// Fetch initial todos
fetchTodos();

// Set up real-time subscriptions
const createSub = client.graphql({ query: onCreateTodo }).subscribe({
next: ({ data }) => {
if (data?.onCreateTodo) {
setTodos(prev => [...prev, data.onCreateTodo]);
}
}
});

const updateSub = client.graphql({ query: onUpdateTodo }).subscribe({
next: ({ data }) => {
if (data?.onUpdateTodo) {
setTodos(prev => prev.map(todo =>
todo.id === data.onUpdateTodo.id ? { ...todo, ...data.onUpdateTodo } : todo
));
}
}
});

const deleteSub = client.graphql({ query: onDeleteTodo }).subscribe({
next: ({ data }) => {
if (data?.onDeleteTodo) {
setTodos(prev => prev.filter(todo => todo.id !== data.onDeleteTodo.id));
}
}
});

return () => {
createSub.unsubscribe();
updateSub.unsubscribe();
deleteSub.unsubscribe();
};
}, []);

const fetchTodos = async () => {
const result = await client.graphql({ query: listMyTodos });
setTodos(result.data.listMyTodos || []);
};

const handleCreate = async (e) => {
e.preventDefault();
if (!title.trim()) return;

await client.graphql({
query: createTodo,
variables: { input: { title, priority } }
});

setTitle('');
};

const handleToggle = async (id) => {
// Optimistic update
setTodos(prev => prev.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));

try {
await client.graphql({ query: toggleTodo, variables: { id } });
} catch (error) {
// Revert on error
setTodos(prev => prev.map(todo =>
todo.id === id ? { ...todo, completed: !todo.completed } : todo
));
}
};

const handleDelete = async (id) => {
await client.graphql({ query: deleteTodo, variables: { id } });
};

return (
<div className="max-w-2xl mx-auto p-6">
<h1 className="text-3xl font-bold mb-8">Real-Time Todos</h1>

<form onSubmit={handleCreate} className="mb-8 flex gap-2">
<input
type="text"
value={title}
onChange={(e) => setTitle(e.target.value)}
placeholder="What needs to be done?"
className="flex-1 px-4 py-2 border rounded-lg"
/>
<select
value={priority}
onChange={(e) => setPriority(e.target.value)}
className="px-4 py-2 border rounded-lg"
>
<option value="LOW">Low</option>
<option value="MEDIUM">Medium</option>
<option value="HIGH">High</option>
</select>
<button
type="submit"
className="px-6 py-2 bg-blue-500 text-white rounded-lg"
>
Add
</button>
</form>

<div className="space-y-2">
{todos.map((todo) => (
<div key={todo.id} className="flex items-center gap-3 p-4 bg-white border rounded-lg">
<input
type="checkbox"
checked={todo.completed}
onChange={() => handleToggle(todo.id)}
className="w-5 h-5 cursor-pointer"
/>
<div className="flex-1">
<p className={todo.completed ? 'line-through text-gray-400' : ''}>
{todo.title}
</p>
</div>
<span className="px-2 py-1 text-xs rounded">
{todo.priority}
</span>
<button
onClick={() => handleDelete(todo.id)}
className="text-red-500 hover:text-red-700"
>
Delete
</button>
</div>
))}
</div>
</div>
);
}