Quick Start - API Overview

This document provides zero-config and swap-in API sufficient for most use-cases.

For automated migration, refer to thie documentation.
The migration utility applies all the API mentioned in this documentation (except shared GraphQL subscription channels).

For advanced configurations (such as selective syncing based on dynamic conditions), refer to this API reference.

InMemoryCacheSynced

Apollo in-memory cache synchronized across browsing contexts.
A drop-in ApolloClient InMemoryCache wrapper.

import { InMemoryCacheSynced, stateSyncLink } from 'apollo-state-sync'
import { terminatingLink } from './util/terminatingLink'

const apolloClient = new ApolloClient({

    // stateSyncLink must be used, as a non-terminating link.
    ApolloLink.from([stateSyncLink, terminatingLink]),

    // use InMemoryCacheSynced as Apollo Cache.
    cache: new InMemoryCacheSynced(),

})
Copy

makeVarSynced

Creates a reactive variable synchronized across browsing contexts.
A swap-in makeVar wrapper.

@param value - The initial value of the reactive variable.
@param uniqueName - A unique name for the reactive variable.

@returns synchronized reactive variable

import { useReactiveVar } from '@apollo/client/react'
import { makeVarSynced } from 'apollo-state-sync'

const rVarSynced = makeVarSynced('random-value', 'a-unique-name')
Copy

apollo-shared-ws

To share WebSocket connections and to avoid duplicate subscription channels across browsing contexts refer to apollo-shared-ws package.

Architecture Diagram: