在使用Apollo时,有些GraphQL查询返回不可变的只读数据。当你试图更新一个只读字段时,会抛出“Cannot assign to read only property”错误。这时需要使用一些技巧,在客户端中修改数据。
例如,假设我们有以下查询:
query GetUser {
user(id: "1") {
id
name
email
isVerified
}
}
返回的数据结构为:
{
"data": {
"user": {
"id": "1",
"name": "John Doe",
"email": "john.doe@example.com",
"isVerified": true
}
}
}
如果我们想更新"isVerified"字段,我们需要使用"update"函数来修改数据:
import { useQuery, gql, useApolloClient } from '@apollo/client';
import { useState } from 'react';
const GET_USER = gql`
query GetUser {
user(id: "1") {
id
name
email
isVerified
}
}
`;
function UserProfile() {
const [isVerified, setIsVerified] = useState(true);
const { data } = useQuery(GET_USER);
const client = useApolloClient();
const handleClick = async () => {
await client.writeQuery({
query: GET_USER,
data: {
user: {
...data.user,
isVerified,
},
},
});
};
return (
User Profile
{data.user.name}
{data.user.email}
Is Verified: {data.user.isVerified ? 'Yes' : 'No'}
);
}
export default UserProfile;
在这个例子中,我们使用"writeQuery"函数来将更新后的数据写回到Apollo缓存中