Apollo Client v3.0.0删除Mutation后UI不更新问题解决

解决方案 #

1. 先解决「变量未定义」错误

调用突变时必须明确传递username变量，确保参数正确传入：

import { useMutation } from '@apollo/client';
import DELETE_USER from './your-mutation-file';

// 组件内代码
const [deleteUser] = useMutation(DELETE_USER);

const handleDelete = (targetUsername) => {
  deleteUser({
    variables: { username: targetUsername }
  });
};

// 按钮使用示例
<button onClick={() => handleDelete(user.username)}>删除</button>

2. 修复缓存更新失败问题

缓存匹配失败的核心原因是readQuery时使用的变量与初始执行GET_ALL_USERS的变量不一致，以下两种方式可解决：

方式一：精准操作缓存（推荐）

在useMutation的update函数中，严格复用useQuery的变量来读取和修改缓存：

import { useQuery, useMutation } from '@apollo/client';
import GET_ALL_USERS from './your-query-file';
import DELETE_USER from './your-mutation-file';

// 全局复用查询参数，避免变量不一致
const queryInput = { /* 你的查询参数，比如分页、筛选条件 */ };

const UserList = () => {
  const { data } = useQuery(GET_ALL_USERS, {
    variables: { input: queryInput }
  });

  const [deleteUser] = useMutation(DELETE_USER, {
    update(cache, { data: { deleteUser: deletedUser } }) {
      // 读取当前查询对应的缓存
      const { getAllUsers } = cache.readQuery({
        query: GET_ALL_USERS,
        variables: { input: queryInput } // 必须和useQuery的变量完全一致
      });

      // 过滤已删除用户，同步更新总数量
      const updatedRows = getAllUsers.rows.filter(user => user.username !== deletedUser.username);
      const updatedTotalItems = getAllUsers.totalItems - 1;

      // 写回修改后的缓存，同步分页信息
      cache.writeQuery({
        query: GET_ALL_USERS,
        variables: { input: queryInput },
        data: {
          getAllUsers: {
            ...getAllUsers,
            rows: updatedRows,
            totalItems: updatedTotalItems,
            currentPage: updatedRows.length === 0 && getAllUsers.currentPage > 1 
              ? getAllUsers.currentPage - 1 
              : getAllUsers.currentPage,
            totalPages: updatedTotalItems === 0 
              ? 0 
              : Math.ceil(updatedTotalItems / getAllUsers.rows.length)
          }
        }
      });
    }
  });

  // 渲染逻辑...
};

方式二：强制重新查询（简单高效）

如果不想处理缓存变量的复杂逻辑，可通过refetchQueries强制重新拉取最新数据：

const [deleteUser] = useMutation(DELETE_USER, {
  refetchQueries: [
    {
      query: GET_ALL_USERS,
      variables: { input: queryInput } // 匹配初始查询的变量
    }
  ]
});

3. 常见坑点排查

• 变量一致性：确保readQuery、writeQuery、refetchQueries中使用的变量与useQuery的变量完全一致，包括空值、默认参数等细节
• 字段匹配：确认突变返回的username与列表中用户的username完全匹配（注意大小写、空格等）
• 分页同步：如果使用分页，删除后需同步更新totalPages和currentPage，避免出现空页面

内容的提问来源于stack exchange，提问作者github.arief