apollo-state-sync - API Reference (Users)
    Preparing search index...

    Class SynchronizationDebouncer

    Debounces state synchronization to optimize UI rendering and network performance.

    Purpose: Group broadcasts belonging to the same UI rendering chain together. This prevents race conditions, redundant network requests, and invalid Apollo Client state.

    How it works:

    1. Track In-Flight GraphQL Requests: Broadcasting while requests are in-flight can corrupt Apollo Client state or trigger duplicate requests. We actively track the count of active network requests.
    2. Account for UI Rendering: UI components usually rerender immediately after receiving a GraphQL response. Broadcasting during this render phase causes similar state invalidation.
    3. Debounce Post-Request: Once all in-flight requests drop to zero, we wait for globalConfig.synchronizationDebounceTimeoutMs to ensure the UI has completely finished its rendering cycle before safely executing the broadcast.

    For a detailed visual lifecycle, refer to the architecture diagram

    // Scenario: Preventing duplicate requests during component mounting
    //
    // 1. A cache write triggers a UI rerender, which mounts a new UI component.
    // 2. The newly mounted component immediately initiates a new GraphQL query.
    // 3. Without debouncing:
    //    The cache write broadcasts and syncs before the new network request resolves.
    //    Other listening browsing contexts receive the broadcast and also trigger
    //    the same fetch request, resulting in duplicate network traffic across tabs.
    // 4. With debouncing:
    //    Broadcasting is delayed until all outstanding fetch requests are fulfilled,
    //    ensuring a unified and stable state across the application.

    Hierarchy

    • Debouncer
      • SynchronizationDebouncer
    Index
    constructor
    callbacks inflightOperations timeoutId timeoutMs
    isPending timeoutms
    cancelTimer debounce graphqlRequestCompleted graphqlRequestStarted isTimerRunning resetTimer setTimeoutMs timeoutHandler
    callbacks: (() => void)[] = []

    pending callbacks.

    inflightOperations: Map<Operation, number> = ...

    Tracks the in-flight GraphQL requests. Maps the operations to their count.

    timeoutId: Timeout | undefined = undefined
    timeoutMs: number = 50

    • Debounces the provided callback function.

      Parameters

      • callback: () => void

        the cb to be debounced.

      Returns void

    • Returns boolean

    • Sets the number of milliseconds to debounce synchronization.

      Parameters

      • newValue: number

        the new timeout value in milliseconds.

      Returns void

    Settings
    Member Visibility

    On This Page
    Constructors
    Properties
    Accessors
    Methods