如何通过onClick按钮触发GraphQL mutation删除对象及报错解决

问题2：GraphQL界面测试时出现“Assignment to constant variable”错误 #

原因 #

你的BFF代码中，carts变量是用const声明的，而const变量不允许被重新赋值。代码里carts = carts.filter(...)试图给const变量重新赋值，导致报错。

解决方法 #

将carts的声明改为let，允许后续重新赋值：

// 把原来的const carts改成let
let carts = [/* 初始购物车数据 */];

deleteCart: (_, args) => {
  carts = carts.filter((c) => c.id !== args.id);
  return carts;
}

问题1：通过按钮onClick触发删除操作 #

假设你使用React + Apollo Client（主流前端GraphQL组合），实现步骤如下：

1. 导入所需依赖和mutation：

import { useMutation } from '@apollo/client';
import { CART_ITEMS } from './你的文件路径';

2. 在组件内初始化mutation：

const [deleteCart] = useMutation(CART_ITEMS);

3. 给按钮绑定点击事件，传入要删除的购物车ID：

<button onClick={() => deleteCart({ variables: { id: 目标ID } })}>
 删除该项
</button>

如果需要处理操作结果，可以添加回调：

const [deleteCart] = useMutation(CART_ITEMS, {
  onCompleted: () => {
    console.log('删除成功');
    // 可在此添加数据刷新、用户提示等逻辑
  },
  onError: (err) => {
    console.error('删除失败:', err);
  }
});

若使用其他前端框架，核心逻辑一致：调用对应GraphQL客户端的mutation方法，在按钮点击事件中传入目标ID变量即可。

内容的提问来源于stack exchange，提问作者Vasilii