Étude de cas : Application Todo offline-first

final storage = InMemoryStorageAdapter();
await storage.init();

final api = TodoApi();
final connectivity = SimulatedConnectivityManager(api);

final client = PersistQoraClient(
  storage: storage,
  persistDuration: const Duration(days: 30),
  config: QoraClientConfig(
    defaultOptions: const QoraOptions(
      staleTime: Duration(minutes: 5),
      networkMode: NetworkMode.offlineFirst,
    ),
    // Au plus 3 refetchs simultanés à la reconnexion, 150 ms de jitter entre eux.
    reconnectStrategy: const ReconnectStrategy(
      maxConcurrent: 3,
      jitter: Duration(milliseconds: 150),
    ),
    debugMode: kDebugMode,
  ),
);

registerAllSerializers(client);
await client.hydrate(); // les todos sauvegardés sont en cache avant la première frame

void registerAllSerializers(PersistQoraClient client) {
  client.registerSerializer<Todo>(
    QoraSerializer(toJson: (t) => t.toJson(), fromJson: Todo.fromJson),
    name: 'Todo', // nom explicite : stable avec --obfuscate et sur le web
  );
  client.registerSerializer<List<Todo>>(
    QoraSerializer(
      toJson: (list) => list.map((t) => t.toJson()).toList(),
      fromJson: (json) => (json as List).map(Todo.fromJson).toList(),
    ),
    name: 'List<Todo>',
  );
}

QoraMutationBuilder<Todo, CreateTodoInput, List<Todo>?>(
  queryKey: const ['todos'],
  mutator: api.createTodo,
  options: MutationOptions(
    offlineQueue: true,
    onMutate: (input) async {
      final prev = context.qora.getQueryData<List<Todo>>(const ['todos']) ?? [];
      context.qora.setQueryData<List<Todo>>(const ['todos'], [
        ...prev,
        Todo(
          id: 'temp-${DateTime.now().millisecondsSinceEpoch}',
          title: input.title,
          completed: false,
          isPending: true, // flag local, jamais persisté
        ),
      ]);
      return prev;
    },
    // Le serveur a rejeté le todo : on remet la liste précédente.
    onError: (_, __, prev) async =>
        context.qora.restoreQueryData(const ['todos'], prev),
    // Le serveur l'a accepté : refetch pour remplacer l'id temporaire.
    onSuccess: (_, __, ___) async => context.qora.invalidate(const ['todos']),
  ),
  builder: (context, state, mutate) => FloatingActionButton.extended(
    onPressed: state.isPending ? null : () => _showAddDialog(context, mutate),
    icon: Icon(state.isPending ? Icons.schedule : Icons.add),
    label: Text(state.isPending ? 'En file, synchro bientôt' : 'Ajouter'),
  ),
)

ListTile(
  leading: todo.isPending
      ? const SizedBox(
          width: 24,
          height: 24,
          child: CircularProgressIndicator(strokeWidth: 2),
        )
      : Checkbox(
          value: todo.completed,
          onChanged: (_) => onToggle(
            ToggleTodoInput(id: todo.id, completed: !todo.completed),
          ),
        ),
  title: Text(
    todo.title,
    style: TextStyle(
      color: todo.isPending ? Colors.grey.shade500 : null,
      fontStyle: todo.isPending ? FontStyle.italic : FontStyle.normal,
    ),
  ),
  trailing: todo.isPending
      ? Icon(Icons.cloud_off, size: 16, color: Colors.grey.shade400)
      : null,
)

QoraBuilder<List<Todo>>(
  queryKey: const ['todos'],
  fetcher: api.getTodos,
  builder: (context, state, fetchStatus) {
    if (state.dataOrNull == null && fetchStatus == FetchStatus.paused) {
      return const OfflineEmptyState(); // « Pas de connexion : connectez-vous pour charger vos todos »
    }
    return switch (state) {
      Initial() || Loading(previousData: null) =>
        const Center(child: CircularProgressIndicator()),
      Failure(:final error, previousData: null) => ErrorView(error),
      // Données disponibles : Success, ou Loading/Failure avec previousData
      _ => TodoList(
          todos: state.dataOrNull ?? const [],
          isRefreshing: fetchStatus == FetchStatus.fetching,
          isOffline: fetchStatus == FetchStatus.paused,
        ),
    };
  },
)