使用GraphQL与React创建新帖子页面时遇400网络错误，求排查

以下是导致你遇到Network error: Response not successful: Received status code 400错误的核心原因及修正方案：

1. useMutation 解构逻辑错误（最关键问题） #

useMutation Hook的返回值顺序是：执行mutation的函数在前，然后是包含loading/error/data的状态对象。你现在把第一个返回值命名为data并传给PostForm的action属性，相当于把无效值（初始状态为undefined）作为提交函数传入，导致请求格式完全不符合GraphQL要求，直接触发400错误。

修正代码：

// NewPost组件中的useMutation部分
const [createPost, { loading, error, data }] = useMutation(NEW_POST, {
  onCompleted: data => {
    props.history.push(`posts/${data.createPost._id}`);
  }
});

// 传给PostForm的应该是真正的mutation执行函数createPost
<PostForm action={createPost} />

2. useState 未设置初始值 #

你写的const [values, setValues] = useState();没有传入初始值，初始状态为undefined。用户第一次输入时，...values会因无法展开undefined导致状态更新异常，最终提交给GraphQL的变量可能缺失或格式错误。

修正：

// 初始化表单状态为包含所有字段的空对象
const [values, setValues] = useState({ title: '', category: '', body: '' });

3. 表单控件未绑定value（受控组件异常） #

当前的input和TextArea没有设置value属性，属于非受控组件，可能导致输入值无法正确同步到state，最终提交的变量不完整，触发后端校验失败返回400。

修正每个表单控件，示例：

<input
  required
  type="text"
  id="title"
  name="title"
  placeholder="title"
  onChange={onChange}
  value={values.title}
/>

// category输入框和TextArea同理
<TextArea
  required
  name="body"
  placeholder="Post content"
  onChange={onChange}
  value={values.body}
/>

4. 额外优化：useEffect 缺少依赖数组 #

虽然这不是导致400的直接原因，但useEffect(() => { document.title = ... })没有依赖数组，会在每次组件渲染时重复执行。建议添加空数组让它仅在组件挂载时执行一次：

useEffect(() => {
  document.title = 'NewPost - Notedly';
}, []);

可选检查：GraphQL参数类型匹配 #

看你提供的示例mutation，category传入的是MongoDB风格ID字符串，你的mutation定义中$category: String是兼容的，但如果后端createPost接口要求category为ID类型，需确认参数类型是否匹配（这类问题通常返回GraphQL语法错误而非400，但可以作为兜底检查项）。

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