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..f66330810b --- /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-state-sync/tree/main/packages/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(), + }), + ) +``` 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