From 4a099f8bbf08819948585eb6248925754991d941 Mon Sep 17 00:00:00 2001 From: sdev-buildz <310740165+sdev-buildz@users.noreply.github.com> Date: Tue, 29 Sep 2026 17:28:21 +0530 Subject: [PATCH 1/2] docs(code-page): add 'apollo-shared-ws' JavaScript client added 'apollo-shared-ws' library to the code page. apollo-shared-ws is a TypeScript/JavaScript client. --- .../javascript/client/apollo-shared-ws.md | 55 +++++++++++++++++++ 1 file changed, 55 insertions(+) create mode 100644 src/code/language-support/javascript/client/apollo-shared-ws.md diff --git a/src/code/language-support/javascript/client/apollo-shared-ws.md b/src/code/language-support/javascript/client/apollo-shared-ws.md new file mode 100644 index 0000000000..3d7d7ff93d --- /dev/null +++ b/src/code/language-support/javascript/client/apollo-shared-ws.md @@ -0,0 +1,55 @@ +--- +name: Apollo Shared Ws +description: Share a single WebSocket connection across multiple browser tabs and windows for Apollo Client. Features built-in subscription deduplication via payload indexing to optimize network performance. +github: sdev-buildz/apollo-shared-ws +npm: apollo-shared-ws +tags: + - tools-and-libraries + - frontend +--- + +### 🗂️ Subscription Deduplication & Indexing + +- GraphQL Subscriptions are uniquely indexed by their payloads across all active browsing contexts—including browser tabs, windows, and iframes. +- When a user opens multiple tabs, network load remains identical to having just a single tab open. +- Making duplicate subscriptions across different UI components will not trigger extra network requests. + +
+ +### 📦 Installation + +```sh +npm install apollo-shared-ws graphql-shared-ws +``` + +### 💻 Quick start + +```ts +import { GraphQLWsLink } from "@apollo/client/link/subscriptions" +import { ApolloClient, ApolloLink, InMemoryCache } from "@apollo/client" +import { setupRestartSubscription } from "apollo-shared-ws" +import { createSharedClient } from "graphql-shared-ws" +import { authLink } from "./util/authLink" + +const wsLink = new GraphQLWsLink( + // use 'createSharedClient'. + createSharedClient({ + url: "wss://localhost:443/api/graphql", + connectionParams: { + headers: { + authorization: "auth-token-1234", + }, + }, + }), +) + +const apolloClient = + // use setupRestartSubscription to enable subscription restarts. + // wrap ApolloClient with setupRestartSubscription(...) + setupRestartSubscription( + new ApolloClient({ + link: ApolloLink.from([authLink, wsLink]), + cache: new InMemoryCache(), + }), + ) +``` From a993818a30f42f8ad89c0faa9d9d96aeb2270532 Mon Sep 17 00:00:00 2001 From: sdev-buildz <310740165+sdev-buildz@users.noreply.github.com> Date: Tue, 29 Sep 2026 17:49:37 +0530 Subject: [PATCH 2/2] docs(code-page): add 'apollo-state-sync' JavaScript client added 'apollo-state-sync' library to the Code page. 'apollo-state-sync' is a TypeScript/JavaScript client. --- .../javascript/client/apollo-shared-ws.md | 2 +- .../javascript/client/apollo-state-sync.md | 45 +++++++++++++++++++ 2 files changed, 46 insertions(+), 1 deletion(-) create mode 100644 src/code/language-support/javascript/client/apollo-state-sync.md diff --git a/src/code/language-support/javascript/client/apollo-shared-ws.md b/src/code/language-support/javascript/client/apollo-shared-ws.md index 3d7d7ff93d..f66330810b 100644 --- a/src/code/language-support/javascript/client/apollo-shared-ws.md +++ b/src/code/language-support/javascript/client/apollo-shared-ws.md @@ -1,7 +1,7 @@ --- name: Apollo Shared Ws description: Share a single WebSocket connection across multiple browser tabs and windows for Apollo Client. Features built-in subscription deduplication via payload indexing to optimize network performance. -github: sdev-buildz/apollo-shared-ws +github: sdev-buildz/apollo-state-sync/tree/main/packages/apollo-shared-ws npm: apollo-shared-ws tags: - tools-and-libraries diff --git a/src/code/language-support/javascript/client/apollo-state-sync.md b/src/code/language-support/javascript/client/apollo-state-sync.md new file mode 100644 index 0000000000..50e967fc73 --- /dev/null +++ b/src/code/language-support/javascript/client/apollo-state-sync.md @@ -0,0 +1,45 @@ +--- +name: Apollo State Sync +description: Seamlessly synchronize and persist Apollo Client cache and reactive variables across multiple browser tabs and windows for a consistent user experience. +github: sdev-buildz/apollo-state-sync +npm: apollo-state-sync +tags: + - tools-and-libraries + - frontend +--- + +## 💡 Why use it? + +Modern web apps often run across multiple browser tabs or windows within the same workflow. Without shared state synchronization, users can end up with inconsistent data: + +- logged in status differs across tabs +- Data edited in one tab stays outdated in another until a manual refresh. +- in-memory caches are inconsistent across tabs +- app state resets unexpectedly when a tab is reopened + +
+ +## ✨ Features + +- Syncs Apollo Client's state (Apollo cache and reactive variables) across all browser tabs and windows. +- Persists state across browser restarts and user sessions +- Helps build multi-window and multi-tab apps without custom state plumbing + +
+ +## 🔌 API reference + +- 🚀 **Quick Start**: Jump into the [API Overview](https://github.com/sdev-buildz/apollo-state-sync/blob/6cd9a05467ade3a31ac0350aa9fe7cad3c3ae760/API_OVERVIEW.md) to get up and running in minutes. +- 🤖 **Automated Migration**: Effortlessly transition from standard Apollo Client using the [Migration Bot](https://github.com/sdev-buildz/apollo-state-sync/blob/6cd9a05467ade3a31ac0350aa9fe7cad3c3ae760/README.md#-migration-automation). + +
+ +## 📽️ See it in Action + +[demo video](https://github.com/user-attachments/assets/18df5e73-f7a6-417f-8398-2bb8251ccc3e) + +
+ +### 🌐 Try the Live Demo + +You can access the live application here: https://sdev-buildz.github.io/apollo-state-sync/examples/posts