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