阿波罗客户端3 -全局事件侦听器?

Question

有没有办法创建一个"全局"阿波罗客户端3中的事件侦听器?

例如，如果用户在应用程序中创建了一个section，我想要"全局事件监听器"。触发一些额外的图形请求，根据所做的选择填充应用程序数据。

我知道对于一个简单的应用程序，我可以让任何一个正在读取应用程序数据的组件来监听响应变量，这样当它发生变化时(使用useEffect)，它就会触发useQuery钩子。我不想在一个特定的组件中这样做，因为这个应用程序数据是由几个组件全局使用的，我不想在每个组件中重复这个逻辑，或者让一个组件负责它(以防该组件不使用)。

我知道在React Redux中，在store配置期间，我可以传入一个额外的自定义中间件，它允许我侦听所有操作并捕获/匹配我感兴趣的操作，因此允许我在它们返回时触发额外的API请求并触发操作(带有效负载)。我基本上想执行这个相同的模式，但与阿波罗客户端3。

我发现让这个工作的一种方法是在我的整个应用程序周围创建一个包装器组件。这个包装器组件基本上是一个传递组件，然后监听响应变量

export const AppStateListener: React.FC = ({children}) => {
const [getData, { loading, data }] = useLazyQuery(GET_DATA);
const selectedOption = useReactiveVar(selectedOptionVar)
useEffect(() => {
if(selectedOption)
getData()
}, [selectedOption?.id])
return <>{children}</>
}

这似乎在功能上工作，但似乎是一种非常粗糙的方式。有人知道是否有一个配置可以让我监听值的变化，这样我就可以触发其他graphQl请求了吗?

Answer 1

似乎是一个很酷的想法，然而阿波罗本身已经给了你一个上下文来工作，是不是可以直接使用它:

const Apollo = ({children}) => {
// all your reactive stuff here
return <ApolloProvider client={client}>
{children}
</ApolloProvider>
}

但是我不知道在使用响应变量之前是否需要初始化上下文。