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

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