在使用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缓存中