如何避免TanStack Query删除操作误触发单个用户查询失效

问题根源在于 invalidateQueries({ queryKey: ['users'] }) 默认会匹配所有以['users']为前缀的查询，包括单个用户的['users', userId]，导致删除操作后单个用户查询被重新触发，但此时用户已不存在，返回404错误。

下面是两种可行的解决办法：

1. 精准匹配用户列表查询 #

给invalidateQueries添加exact: true选项，这样只会完全匹配查询键为['users']的用户列表查询，不会影响带用户ID的单个用户查询：

const deleteMutation = useMutation(
  () => axios.delete('api/v1/users/' + userId),
  {
    onSuccess: () => {
      toast.success(`successfully deleted`);
      resetForm();
    },
    onError: (error: AxiosError) => {
      toast.error(`Failed to delete ${error.message}`);
      resetForm();
    },
    onSettled: () => {
      // 仅精准匹配用户列表查询
      queryClient.invalidateQueries({ queryKey: ['users'], exact: true });
    },
  }
);

2. 主动清理已删除用户的缓存（可选优化） #

既然用户已被删除，单个用户的缓存已无意义，可以在删除成功后主动移除该缓存，避免后续任何可能的误触发：

const deleteMutation = useMutation(
  () => axios.delete('api/v1/users/' + userId),
  {
    onSuccess: () => {
      toast.success(`successfully deleted`);
      resetForm();
      // 移除已删除用户的单个查询缓存
      queryClient.removeQueries({ queryKey: ['users', userId] });
    },
    onError: (error: AxiosError) => {
      toast.error(`Failed to delete ${error.message}`);
      resetForm();
    },
    onSettled: () => {
      queryClient.invalidateQueries({ queryKey: ['users'], exact: true });
    },
  }
);

这样既保证用户列表会实时刷新，又不会触发已删除用户的单个查询，彻底避免404问题。

内容的提问来源于stack exchange，提问作者Wiktor Kęska