React+GraphQL笔记应用更新Mutation返回400 Bad Request求助

你的问题出在更新笔记的Mutation调用时缺少必填的id参数。根据错误提示（Variable "$id" of required type "ID!" was not provided），具体原因是：

在EditNote组件中，你给useMutation配置了初始variables: {id}，但当NoteForm调用props.action时，传入的variables: {...value}会覆盖掉初始变量，最终Mutation只收到了content参数，缺少了id，导致GraphQL服务返回400错误。

解决方案1：包装Mutation函数（推荐，无需修改NoteForm） #

在EditNote.js中，包装editNote函数，自动合并id参数，避免NoteForm关心id的传递：

const EditNote = props => {
  // ... 其他代码保持不变

  // 包装mutation函数，自动合并id参数
  const handleEditNote = (mutationParams) => {
    editNote({
      variables: {
        id,
        ...mutationParams.variables
      }
    });
  };

  // ... 权限判断等代码保持不变

  // 传递包装后的函数给NoteForm
  return <NoteForm content={data.note.content} action={handleEditNote} />;
};

解决方案2：给NoteForm传递id并在提交时一起传递 #

1. 修改EditNote.js，给NoteForm添加noteId属性：

return <NoteForm content={data.note.content} action={editNote} noteId={id} />;

2. 修改NoteForm.js的提交逻辑，合并id和content参数：

<Form
  onSubmit={e => {
    e.preventDefault();
    props.action({
      variables: {
        id: props.noteId,
        ...value
      }
    });
  }}
>

解决方案3：移除useMutation的初始变量配置 #

在EditNote.js中去掉useMutation的variables配置，然后同样通过NoteForm传递id：

const [editNote] = useMutation(EDIT_NOTE, {
  onCompleted: () => {
    props.history.push(`/note/${id}`);
  }
});

// 传递id给NoteForm
return <NoteForm content={data.note.content} action={editNote} noteId={id} />;

以上三种方式都能让Mutation同时获取到id和content两个必填参数，解决400错误。

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