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

Question

我有 3 个不同的组件使用相同的 graphql 查询。此示例将是 GET_USERS 查询。这用于在消息传递各自的选项卡中寻找要发送消息的用户，以及邀请用户执行操作并在创建 posts 时标记他们。

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

有关如何使用 Apollo 设置状态的任何建议和一般查询以避免此问题。在一天结束时，我的后端是一个“路线”或特定操作的 resolve 函数。

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

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

Answer 1

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

使用 useLazyQuery 这可能看起来像这样：

创建自定义挂钩以便于跨组件重用

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}
}

在 ScreenA 中，使用挂钩并获取查询：

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

在ScreenB中，同样使用钩子。

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

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

  return (
    ...
  )
}

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

这不是 100% 的 Apollo 解决方案，但它对本地状态的使用最少，而且挂钩使其非常容易重用。希望这能解决您的问题！

您可以在此处阅读有关 useLazyQuery 的更多信息：

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

Apollo client queries and data store when connected to multiple components

graphql

react-native

apollo-client