Queue Stores

Pluggable storage backends for the background sync queue.

Overview

Queue stores provide the persistence layer for useBackgroundSync. You can choose between different implementations based on your needs.

IndexedDBQueueStore

The default store. Persists data to IndexedDB, surviving page reloads and browser restarts.

import { IndexedDBQueueStore } from 'react-resilient-hooks';

const store = new IndexedDBQueueStore({
  dbName: 'my-app-queue',
  storeName: 'requests',
});

Best for: Production apps where data persistence is critical. Requests survive even if the user closes the browser.

MemoryQueueStore

In-memory store for fast operations. Data is lost when the page is closed.

import { MemoryQueueStore } from 'react-resilient-hooks';

const store = new MemoryQueueStore();

Best for: Development, testing, or scenarios where persistence is not required.

Custom Stores

You can implement your own store by following the QueueStore interface:

interface QueueStore<T> {
  enqueue(item: T): Promise<void>;
  dequeue(): Promise<T | undefined>;
  peek(): Promise<T | undefined>;
  isEmpty(): Promise<boolean>;
  size(): Promise<number>;
}

This allows you to use any storage backend: localStorage, SQLite, a remote server, etc.

Usage with useBackgroundSync

import { useBackgroundSync } from 'react-resilient-hooks';
import { IndexedDBQueueStore } from 'react-resilient-hooks';

const customStore = new IndexedDBQueueStore({
  dbName: 'my-custom-db',
  storeName: 'sync-queue',
});

function MyComponent() {
  const { enqueue, flush } = useBackgroundSync({
    queueStore: customStore,
  });

  // ...
}