如何通过Apollo Client在多页面多组件间传递React状态

完全可以用Reactive Variables实现这个跨页面/组件的状态共享需求，这是Apollo Client专门为客户端本地全局状态设计的轻量方案，比prop drilling或Context更简洁，尤其适合你这种简单的UI状态管理场景。

具体实现步骤： #

1. 定义Reactive Variable
   在项目的Apollo配置文件或单独的状态文件中，用makeVar创建响应式变量，初始值对应你原来的useState(true)：

   import { makeVar } from '@apollo/client';
   
   // 定义全局响应式变量，初始值为true
   export const showBannerVar = makeVar(true);
   

2. 在组件中读取状态
   用useReactiveVar钩子替代useState来获取状态值，在任意组件或页面中都能同步读取最新状态：

   import { useReactiveVar } from '@apollo/client';
   import { showBannerVar } from './path-to-your-variable-file';
   import Banner from './Banner';
   
   function SomeComponent() {
     // 读取全局状态
     const showBanner = useReactiveVar(showBannerVar);
   
     return (
       <>
         {/* 渲染逻辑和原来一致 */}
         {showBanner && <Banner onClick={() => showBannerVar(false)} />}
       </>
     );
   }
   

3. 更新全局状态
   直接调用变量本身来设置新值，替代原来的setShowBanner，所有使用该变量的组件都会自动更新：

   // 比如在Banner组件内部或者其他任意组件中
   const handleCloseBanner = () => {
     showBannerVar(false); // 更新全局状态
   };
   

为什么选Reactive Variables？ #

• 无需编写GraphQL查询，直接操作客户端状态，轻量高效；
• 天然支持跨组件/页面的状态同步，状态更新后所有依赖的组件自动重渲染；
• 如果你已经在项目中使用Apollo Client，不需要额外引入其他状态管理库（如Redux），减少依赖。

内容的提问来源于stack exchange，提问作者meez