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

Posted 2023-03-08

【中文标题】连接到多个组件时的 Apollo 客户端查询和数据存储

【英文标题】：Apollo client queries and data store when connected to multiple components

【发布时间】：2021-04-16 02:14:57

【问题描述】：

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

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

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

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

但要明确的是，如果可能的话，我会尝试在使用 Apollo 时解决这个问题。

【问题讨论】：

只需在查询/组件中使用cache-only fetchPolicy 即可不影响“主要事实来源”？

【参考方案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 的更多信息：

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