React Apollo - nodejs graphql后端返回异步响应后如何重新获取（更新）数据

Posted 2023-03-08

【中文标题】React Apollo - nodejs graphql后端返回异步响应后如何重新获取（更新）数据

【英文标题】：React Apollo - how to refetch (update) data after nodejs graphql backend returned async response

【发布时间】：2021-05-28 05:40:57

【问题描述】：

情况很简单。

我有带有用户数据的 NodeJS GraphQL 后端。添加新用户后，我可以毫无问题地使用 React Apollo 重新获取更新的用户数据。但后来我向后端添加了异步操作——当我使用 GraphQL 添加新用户时，我从外部源获取数据以填充有关用户的一些信息。一切正常，除了重新获取，因为（我假设）重新获取是在异步操作完成之前触发的。当我按下按钮手动重新获取时，一切正常。

我的代码是这样的：

import  useMutation  from "@apollo/client";

const [addUser,  error ] = useMutation(ADD_USER_MUTATION);

addUser(
  variables: 
    name: John Doe,
  ,
).then(() => props.refetch());

React/Apollo 中是否有一种方法可以让我知道何时在服务器上完成 graphql 异步操作？

【问题讨论】：

[a]等待返回突变响应

我这样做了，当然......它不起作用。

当然是显示变异解析器代码

【参考方案1】：

您可以在变异参数中使用 refetchQueries 方法：

addUser(
  variables: 
    name: 'John Doe',
  ,
  refetchQueries: [
    
      query: YOUR_QUERY,
      ...otherQueryOptions,
    ,
  ]
);

钩子的文档： https://www.apollographql.com/docs/react/api/react/hooks/#usemutation

但是在使用这个之前，你必须确保你想要获取的数据不能从客户端获取。 （在您的示例中，您可以从客户端获取用户的名称，因为您已经拥有名称状态）。

在您的情况下，我会使用optimisticResponse 和缓存以获得更好的性能。

乐观的用户界面： https://www.apollographql.com/docs/react/performance/optimistic-ui/#gatsby-focus-wrapper