Data Flow

Description of data flows in the Plus261 platform. Understanding data flow is essential for debugging, optimization, and system design.

Offline-First Architecture

The system uses an offline-first architecture, allowing the client to work without network connectivity and sync when online.

What You’ll Learn

This guide will help you understand:

• ✅ GraphQL query flow
• ✅ Local storage and synchronization
• ✅ Real-time data updates
• ✅ Offline mode operation
• ✅ Data consistency
• ✅ Conflict resolution

Overview

Data flows between several components:

Flow	Description	Technology
Client → API	GraphQL queries	GraphQL over HTTP
API → Database	Data queries	Drizzle ORM
Client → IndexedDB	Local storage	IndexedDB + Drizzle
Client ↔ API	Synchronization	Background sync
API → Client	Real-time updates	WebSocket subscriptions

GraphQL Queries

GraphQL queries go from client to API:

Client → GraphQL Client → API → Drizzle ORM → PostgreSQL
                ↓
         IndexedDB (cache)

Key Points:

• Queries are cached in IndexedDB for offline access
• Type-safe client ensures compile-time safety
• Automatic retry and error handling
• Response caching reduces network requests

Learn more: GraphQL Queries

Local Storage

Data is stored locally in IndexedDB:

Web Client → IndexedDB (Drizzle ORM)
                ↓
         Service Worker
                ↓
    Background Sync

Key Points:

• All data accessible offline
• Fast local queries
• Automatic schema management
• Type-safe local queries

Learn more: Web - Offline

Synchronization

Synchronization maintains consistency between client and server:

Local Changes → Queue → API → Database
                        ↓
                  Conflict Resolution
                        ↓
                  Local Update

Key Points:

• Changes queued when offline
• Automatic sync on reconnection
• Conflict resolution strategies
• Optimistic updates

Learn more: Web - Sync

Real-time

WebSocket subscriptions enable real-time updates:

API → PubSub → WebSocket → Client
                ↓
         Local Update

Key Points:

• Real-time event delivery
• Automatic reconnection
• Efficient message handling
• Filtered subscriptions

Learn more: GraphQL Subscriptions

Data Consistency

Strategies

Strategy	Use Case	Description
Optimistic Updates	UI responsiveness	Update UI immediately
Pessimistic Locking	Critical operations	Lock during updates
Event Sourcing	Audit trail	Store all events
Conflict Resolution	Offline sync	Resolve conflicts automatically

Quick Reference

Topic	Documentation
📡 GraphQL	GraphQL Queries
💾 Offline	Web - Offline
🔄 Sync	Web - Sync
🔄 Subscriptions	GraphQL Subscriptions

Next Steps

Continue learning:

1. 🗄️ Database - Database architecture
2. 🏗️ Detailed Architecture - Complete architecture
3. 💾 Web - Offline - Offline functionality
4. 🔄 Web - Sync - Synchronization

Related Topics

• Database - Database architecture
• Detailed Architecture - Complete architecture
• Web - Offline - Offline functionality
• Web - Sync - Synchronization