问题描述:在使用 Apollo Mutation 的 useMutation 更新数据后,UI 没有更新。
解决方法:
确保你已经正确地使用了 useMutation 钩子函数,并且正确地定义了 mutation 的参数和返回值。
例如,下面是一个使用 useMutation 的示例代码:
import { useMutation } from '@apollo/react-hooks';
import { gql } from 'apollo-boost';
const UPDATE_USER = gql`
mutation UpdateUser($id: ID!, $name: String!) {
updateUser(id: $id, name: $name) {
id
name
}
}
`;
function UserForm({ user }) {
const [updateUser] = useMutation(UPDATE_USER);
const handleFormSubmit = e => {
e.preventDefault();
const name = e.target.name.value;
updateUser({ variables: { id: user.id, name } });
};
return (
);
}
确保你正确地处理了 mutation 返回的数据。
在 useMutation 钩子函数的返回值中,包含了一个包含了 mutation 返回数据的对象。你可以通过该对象的 loading、error 和 data 属性来处理更新 UI。
function UserForm({ user }) {
const [updateUser, { loading, error, data }] = useMutation(UPDATE_USER);
const handleFormSubmit = e => {
e.preventDefault();
const name = e.target.name.value;
updateUser({ variables: { id: user.id, name } });
};
if (loading) return Loading...
;
if (error) return Error: {error.message}
;
return (
);
}
上述代码中,我们使用 loading 属性来显示加载中的消息,使用 error 属性来显示错误消息。当 mutation 执行成功后,data 属性会包含返回的数据,你可以在这里更新 UI。
确保你在 mutation 执行成功后,正确地更新了 UI。
你可以在 useMutation 钩子函数的返回值中,使用 onCompleted 属性来指定一个回调函数,在 mutation 执行成功后调用该函数。在该函数中,你可以更新 UI 或执行其他操作。
function UserForm({ user }) {
const [updateUser] = useMutation(UPDATE_USER, {
onCompleted: data => {
// 在这里更新 UI 或执行其他操作
},
});
const handleFormSubmit = e => {
e.preventDefault();
const name = e.target.name.value;
updateUser({ variables: { id: user.id, name } });
};
return (
);
}
你可以在 onCompleted 回调函数中,更新组件的状态、重新查询数据或执行其他操作,以确保 UI 的更新。