所以我有以下使用 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>
}
答案 0 :(得分:0)
根据 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
时,它都会检测到当前结果与之前的结果不同。