问题可能是由于Apollo没有正确触发更新导致的。在使用useMutation钩子时,可以手动触发更新来解决此问题。
示例代码:
import React from 'react';
import { useMutation } from '@apollo/client';
import gql from 'graphql-tag';
const UPDATE_USER = gql`
mutation UpdateUser($id: ID!) {
updateUser(input: { id: $id }) {
id
name
}
}
`;
const User = ({ id, name }) => {
const [updateUser, { loading }] = useMutation(UPDATE_USER, {
optimisticResponse: {
updateUser: {
__typename: 'User',
id,
name: 'New Name'
}
}
});
const handleUpdate = async () => {
await updateUser({ variables: { id } });
// 手动触发更新
window.location.reload();
}
return (
Name: {name}
);
};
export default User;
这里我们手动触发了更新来强制页面重新渲染。在实际应用中,可能需要更有效的方法来触发更新并避免复杂性。但是,这个解决方法可以作为一个起点,帮助你在使用useMutation钩子时解决此问题。