Apollo Client 3 - 全局事件监听器？答案

【问题标题】：Apollo Client 3 - Global Event Listener?Apollo Client 3 - 全局事件监听器？
【发布时间】：2021-10-17 13:59:39
【问题描述】：

有没有办法在 Apollo Client 3 中创建“全局”事件监听器？

例如，如果用户在应用程序中创建一个部分，我希望“全局事件侦听器”触发一些额外的 graphql 请求，以根据所做的选择填充应用程序数据。

我知道对于一个简单的应用程序，我可以让正在读取应用程序数据的任何组件来侦听反应变量，以便当它发生变化时（使用useEffect）它会触发 useQuery 挂钩。我不想在特定组件中执行此操作，因为此应用程序数据由多个组件全局使用，我不想在每个组件中重复该逻辑或让一个组件负责它（如果该组件不是使用）。

我知道使用 React Redux，在 store 配置期间，我可以传入一个额外的自定义中间件，它允许我监听所有操作并捕获/匹配我感兴趣的操作，因此我可以触发关闭额外的 API 请求并在它们返回时触发操作（使用有效负载）。我基本上想使用 Apollo Client 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 请求？

【问题讨论】：

标签： reactjs react-redux apollo-client react-apollo

【解决方案1】：

似乎是一个很酷的想法，但是 apollo 本身已经为您提供了一个可以使用的上下文，难道不能只使用它吗：

const Apollo = ({children}) => {
  // all your reactive stuff here

  return <ApolloProvider client={client}>
    {children}
  </ApolloProvider>
}

但是我不知道是否需要先初始化上下文才能使用反应变量。

【讨论】：

这似乎与我正在做的非常相似，除了我的 AppStateListener 是 ApolloProvider 的孩子