连接到多个组件时的 Apollo 客户端查询和数据存储

Question

我有 3 个不同的组件使用相同的 graphql 查询。这个例子将是GET_USERS查询。当在消息传递相应选项卡中查找用户发送消息以及邀请用户执行操作并在创建帖子时标记他们时，会使用此功能。

我遇到并试图弄清楚如何处理的问题是，并不总是一次只渲染一个的情况。用户可以单击消息选项卡，然后在帖子选项卡中标记用户。 问题：当他返回消息选项卡时，它现在已重新呈现从标记调用的查询的状态。

有关如何使用 Apollo 设置状态以及一般查询以避免此问题的任何建议。归根结底，我的后端是resolve特定操作的一个“路线”或功能。

编辑 了解更多信息。我知道解决这个问题的方法是使用 axios 请求到 graphql 端点，并将响应存储在useState该组件的本地。如果我对应用程序中使用信息的每个不同位置执行此操作，它们将保持解耦并且不会共享完全相同的状态。

但需要明确的是，如果可能的话，我正在尝试使用阿波罗来解决这个问题。

Answer 1

您可以结合使用本地状态 (useState) 和useLazyQuery。据我了解，您同时安装了多个组件（或屏幕、选项卡等），例如 ScreenA 和 ScreenB。在每个查询中，您都查询 GET_USERS，但是当您的查询结果在 ScreenB 中更新时，您不希望也更新 ScreenA 中的结果。

使用 useLazyQuery 可能如下所示：

1. 创建自定义挂钩，以便跨组件轻松重用

export const useLazyGetUsers = () => {
  const [users, setUsers] = useState()

  const [queryGetUsers] = useLazyQuery(GET_USERS, {
    onCompleted: (data) => setUsers(data.users),
    onError: (error) => console.log('onError', { error }), // handle errors as you wish
    fetchPolicy: "cache-and-network", // or whatever you want
  })

  return {queryGetUsers, users}
}

2. 在 ScreenA 中，使用钩子并获取查询：

const ScreenA = () => {
  const {queryGetUsers, users} = useLazyGetUsers()
  
  return (
    <TouchableOpacity onPress={() => queryGetUsers()}>
      <Text>Get users</Text>
    </TouchableOpacity>
  )
}

3. 在ScreenB中，也使用钩子。

请注意，您可以queryGetUsers在需要时、在安装时、在 TouchableOpacity 按下时或任何时候调用。

const ScreenB = () => {
  const {queryGetUsers, users} = useLazyGetUsers()
  
  useEffect(() => {
    queryGetUsers()
  }, [])

  return (
    ...
  )
}

4. users随心所欲地使用。如果在ScreenA中调用queryGetUsers，则不会更新ScreenB中的值users。

这不是 100% Apollo 解决方案，但它最大限度地减少了本地状态的使用，并且钩子使其非常容易重用。我希望这能解决您的问题！

您可以在这里阅读更多相关内容useLazyQuery：

• https://www.apollographql.com/docs/react/data/queries/#executing-queries-manually
• https://www.apollographql.com/docs/react/api/react/hooks/#uselazyquery