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

【问题标题】：React Apollo - how to refetch (update) data after nodejs graphql backend returned async responseReact Apollo - nodejs graphql后端返回异步响应后如何重新获取（更新）数据
【发布时间】：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]等待返回突变响应
我这样做了，当然......它不起作用。
当然是显示变异解析器代码

标签： node.js reactjs graphql apollo-client react-apollo

【解决方案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

【讨论】：