如何使用 react-query useMutation 在多个组件之间共享数据

Posted 2023-03-16

【中文标题】如何使用 react-query useMutation 在多个组件之间共享数据

【英文标题】：How to share data across multiple components with react-query useMutation

【发布时间】：2021-10-08 16:12:13

【问题描述】：

我正在寻找一种解决方案来跨 React-Query 突变共享数据，而无需创建我自己的内部状态或上下文。

我创建了一个处理 API 调用的自定义挂钩。

myData.ts

const useDataMutation = () => useMutation('MY_DATA_MUTATION', postData);

然后，我在不同的组件中使用我的自定义钩子。

Component1 负责变异。变异成功后，响应数据将在data 中提供。

Component1.tsx

  const  mutate, data  = useDataMutation();
  
  useEffect(() => mutate('some_data'), []); 

在另一个嵌套组件中，我想访问从响应返回的数据。但我不想将数据向下传递到 3-4 层组件。我想避免使用 Context 来访问这些数据。

我想要的是这样的：

Component2.tsx

  const  data  = useDataMutation();
  
  console.log( data ); // log data once available. 

但在本例中，来自 Component2.ts 的数据始终未定义。

有没有简单的方法来实现这样的目标？

谢谢。

【参考方案1】：

目前，突变不会像查询那样跨实例共享数据。有一个open issue，欢迎投稿。

【参考方案2】：

如果您使用的是@apollo/client，那么您可以直接从缓存中读取之前获取的数据。

import Query from './query.ts'

const  todo  = client.readQuery(
  query: Query,
  variables: 
)

这不会再次从您的服务器获取数据，而是从 apollo 缓存中获取数据。因此，您可以使用钩子或在父组件中获取它，然后向下 5 层，您可以使用相同的钩子再次从缓存中拉取它。

当您使用突变时，如果查询中的属性与以前相同，它将更新缓存中的数据，因此如果您有一个查询 getUser 和一个突变 updateUser 我认为突变如果数据与突变数据对齐，则应自动更新 getuser 缓存数据。我不确定。