Question

我有一个带有React Navigation的基本博览会应用程序。在顶部的function Navigation中，我像这样向Apollo服务器发起了一个useMutation调用：

import { callToServer, useMutation } from '../graphQL';
function Navigation() {
  console.log("RENDERED");
  const [call] = useMutation(callToServer);

  call({ variables: { uid: 'xyz', phoneNumber: '123' } });
  ...

我的GraphQL设置如下：

import {
  ApolloClient,
  createHttpLink,
  InMemoryCache,
  useMutation,
} from '@apollo/client';
import { onError } from '@apollo/client/link/error';

import { callToServer } from './authAPI';

const cache = new InMemoryCache();
const httpLink = createHttpLink({
  uri: `XXXXXXX/my-app/us-central1/graphql`,
});

const errorLink = onError(({ graphQLErrors, networkError }) => {
  ...
});

const client = new ApolloClient({
  cache,
  link: errorLink.concat(httpLink),
});

export {
  useMutation,
  callToServer,
};
export default client;

我想说明一下，我从客户端设置中删除了httpLink，但每次调用仍然获得两个渲染。我在控制台中看到console.log("RENDERED")打印了三遍。应用加载一次（正常），一次useMutation调用之后两次（不正常？）

这是怎么回事？为什么每个useMutation调用都会将react重新渲染两次？如何避免呢？

更新

我做了further digging，看来useMutation确实确实使应用程序渲染了两次-一次在发送请求时，一次在其收到响应时。我不确定我是否喜欢这种默认行为，它似乎无法禁用。为什么不让我们决定是否要重新渲染该应用程序？如果有人可以提供更多的见识，我很乐意听到它。

Answer 1

可能为时已晚，也许您已经找到了解决方案，但仍然...

正如我所见，您不需要从上面代码中的变异返回的数据。在这种情况下，您可以使用 useMutation 选项“ignoreResults”并将其设置为“true”。因此，mutation 不会更新“data”属性，也不会导致任何渲染。

博览会中的Apollo客户端useMutation每次调用都会呈现两次

1 个答案: