Introduction
AWS Amplify Gen 2 does not support DataStore, but offline-first capabilities can still be implemented effectively. By combining client-side storage (like IndexedDB or SQLite), GraphQL API interactions via AWS AppSync, and a solid sync strategy, you can build reliable offline-first apps. This guide walks through how to architect and build offline-ready mobile and web applications using Amplify Gen 2.
The Growing Need for Offline-First Experiences
Today’s users expect mobile and web apps to work reliably—even in areas with spotty or no internet. Whether it’s a salesperson in a remote region, a field technician in a rural area, or a commuter in a subway tunnel, applications that break or disable core functionality due to connectivity issues leave users frustrated.
That’s why offline-first architecture is no longer optional for many app categories. It’s a requirement. And while AWS Amplify Gen 1 offered DataStore to handle offline data and sync, Amplify Gen 2 does not currently support it. But the good news is: you can still build robust offline-first experiences using Gen 2.
Did you know?
Offline-first architecture can reduce server load by 40% through intelligent batching and sync intervals.
What We’re Missing Without DataStore in Gen 2
AWS Amplify Gen 1’s DataStore was a powerful abstraction that handled:
- Local-first operations
- Automatic syncing with AppSync
- Conflict resolution
- Delta syncing for bandwidth efficiency
- Real-time updates across devices
In Amplify Gen 2, this layer is not available. That means developers now have full control—and responsibility—for managing these capabilities manually. While this introduces some complexity, it also offers more flexibility and customizability.
Did you know?
The GraphQL API in AWS Amplify Gen 2 uses AppSync under the hood—just like Gen 1
Core Components of an Offline-First Architecture in Amplify Gen 2
To replicate DataStore-like functionality in Amplify Gen 2, you need to manually assemble the following components:
- Local Storage Engine : Depending on the platform, choose a local storage solution:
- Web: IndexedDB (via libraries like Dexie.js or idb)
- React Native: SQLite (via `react-native-sqlite-storage` or WatermelonDB)
- Flutter: `sqflite` or `hive`
This will serve as your local source of truth for app state and data.
- GraphQL API via AppSync : Use Amplify Gen 2’s CLI and code-first approach to define and deploy a GraphQL API using AWS AppSync. This is your cloud-side database interface.
- Network Detection Layer : Detect whether the user is online or offline using native APIs:
- JavaScript: `navigator.onLine`
- React Native: `@react-native-community/netinfo`
Use this to toggle between local operations and cloud sync.
- Sync Engine : Manually implement a sync mechanism that does the following:
- Queues up changes made while offline
- Detects reconnection events
- Sends pending changes to the cloud (mutation batching)
- Fetches latest data from the cloud to resolve deltas
- Conflict Resolution Strategy : When two users modify the same record offline, you need to handle merge conflicts:
- Use versioning (timestamps, hash comparisons)
- Ask the user to resolve conflicts manually if automatic merge fails
Build an Offline-First App in Amplify Gen 2
Follow this step by step process for creating an AWS Amplify Gen2 DataStore alternative
Step 1: Set Up Your Amplify Gen 2 Project.
Use the Amplify CLI to initialize a new project:
amplify init
amplify add api
Define your GraphQL schema in code using the new Gen 2 setup:
type Task @model {
id: ID!
title: String!
status: String
updatedAt: AWSDateTime
}
Deploy the API:
amplify push
Step 2: Set Up Local Storage
For a web app using Dexie.js:
import Dexie from 'dexie';
const db = new Dexie("OfflineDB");
db.version(1).stores({
tasks: "id, title, status, updatedAt"
});
Use this DB to store data locally and load from it when offline.
Step 3: Detect Network Status
window.addEventListener("online", syncPendingData);
window.addEventListener("offline", () => console.log("App is offline"));
Step 4: Queue Mutations When Offline
If the app is offline, instead of calling AppSync immediately, queue the mutation in local storage:
if (!navigator.onLine) {
await db.pendingMutations.add({
mutation: 'UPDATE_TASK',
data: taskData,
timestamp: Date.now()
});
} else {
await callGraphQLMutation(taskData);
}
Step 5: Sync on Reconnect
When the app detects that it’s back online:
async function syncPendingData() {
const mutations = await db.pendingMutations.toArray();
for (const m of mutations) {
try {
await callGraphQLMutation(m.data);
await db.pendingMutations.delete(m.id);
} catch (err) {
console.error("Sync failed", err);
}
}
}
Step 6: Handle Conflicts
For example, you can implement a “Last Write Wins” strategy by using `updatedAt` timestamps and comparing local vs. server data.
Business Benefits of Offline-First with Amplify Gen 2
Despite lacking DataStore, building offline-first apps with Amplify Gen 2 still delivers high value:
- Reliable User Experience : Users can complete tasks like filling forms, taking notes, logging entries, or viewing previously loaded content even without internet access. The app becomes more reliable and frustration-free.
- Operational Continuity in the Field : Apps for logistics, agriculture, healthcare, and remote work become usable in all environments. Field agents can continue their work uninterrupted.
- Bandwidth Efficiency : Batching mutations and performing delta syncs reduce server calls and mobile data consumption, leading to cost savings.
- Improved Data Accuracy : Instead of users giving up due to poor signal and manually taking notes, they can log data in the app and sync it later, reducing human error.
Real-World Use Cases of Offline-First Apps
Here are a few industries where offline-first solutions using Amplify Gen 2 can make a tangible impact:
- E-Commerce & Retail: Enable order-taking and stock counting in areas with unreliable Wi-Fi.
- Healthcare: Let field medics or nurses update patient records offline and sync later.
- Logistics & Delivery: Let drivers record proof of delivery and update routes without requiring network access.
- Surveying & Research: Capture field data in remote areas and upload when back online.
Trade-Offs of Going Manual
While a manual offline-first architecture offers control and flexibility, there are a few trade-offs:
- More code to write and test
- Sync complexity can grow with data volume
- Requires defining and testing conflict resolution strategies
But with proper modularization and library support, these can be managed efficiently.
Conclusion: Offline-First is Still Possible in Gen 2
Even though Amplify Gen 2 doesn’t include DataStore, you can still build reliable offline-first applications. By combining local storage, a sync queue, and AppSync’s GraphQL API, developers can create responsive apps that work anywhere, anytime.
This approach gives businesses a competitive edge through enhanced reliability, improved user experience, and better operational flexibility.
If you’re building a mission-critical app and need offline-first features, Compileinfy can help you architect and implement these capabilities efficiently.
Need Help Building Offline-Ready Apps?
Talk to our AWS Amplify experts at Compileinfy to build robust offline-first mobile and web applications using Amplify Gen 2, tailored to your business needs.
