Question

所以我有以下使用 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>
}

Answer 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 时，它都会检测到当前结果与之前的结果不同。

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

1 个答案: