问题可能是由于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钩子时解决此问题。