Apollo graphql useMutation 会触发组件重新渲染答案

【问题标题】：Apollo graphql useMutation would trigger the component to re-renderApollo graphql useMutation 会触发组件重新渲染
【发布时间】：2021-06-20 07:49:08
【问题描述】：

所以我有以下使用 Apollo Graphql 的代码，每次我单击将触发 onClick 事件的按钮时，该组件都会重新渲染。如果我在突变函数中的then 调用之后添加一些状态更改，则组件基本上会重新渲染两次，一次用于突变重新渲染，一次用于其他状态更改重新渲染，它会在页面。

如何阻止useMutation 重新呈现页面？

import { useMutation, gql } from '@apollo/client';;
import React from 'react';

const ADD_TAGS = gql`
mutation($ids: [ID!]!) {
  addTags(ids: $ids) {
    id
  }
}
`;

export default () => {
  const [addTags] = useMutation(ADD_TAGS, {
    onCompleted: () => {console.log('on complete')}
  });
  console.log('render');
  return <div>
    This is a test idPages
    <button onClick={() => addTags({
      variables: {
        ids: ['123']
      }
    }).then(data => console.log('finished', data))}>Add</Button>
  </div>
}

【问题讨论】：

你确定吗？记录了什么？ ...重新渲染用于加载状态、新数据...没什么好打的

标签： reactjs graphql react-apollo

【解决方案1】：

根据useMutation 和MutationData 的实现，如果previous result 与current result 不同，则会导致状态更新：

private updateResult(result: MutationResultWithoutClient<TData>) {
    if (
      this.isMounted &&
      (!this.previousResult || !equal(this.previousResult, result))
    ) {
      this.setResult(result);
      this.previousResult = result;
    }
 }

由于某种原因，每次您调用 addTags 时，它都会检测到当前结果与之前的结果不同。

【讨论】：