使用GraphQL和Hasura实现CREATE_COMMENT mutation时遇非空变量错误

在前端通过GraphQL和Hasura实现评论创建功能时，测试阶段持续报错：String value cannot be saved to non-nullable variable。Comment表包含字段：id、post_id、user_id、created_at和content。

相关代码 #

Comment组件代码 #

function Comment({ postId }) {
  const classes = usePostStyles();
  const { currentUserId } = React.useContext(UserContext);
  const [content, setContent] = React.useState('');
  const [createComment] = useMutation(CREATE_COMMENT);

  function handleAddComment() {
    const variables = {
      content,
      postId,
      userId: currentUserId,
    };
    createComment({ variables });
    setContent('');
  }
  return (
    <div className={classes.commentContainer}>
      <TextField
        fullWidth
        value={content}
        placeholder='Add a comment...'
        multiline
        maxRows={2}
        minRows={1}
        onChange={(event) => setContent(event.target.event)}
        className={classes.textField}
        InputProps={{
          classes: { root: classes.root, underline: classes.underline },
        }}
      />
      <Button
        color='primary'
        className={classes.commentButton}
        onClick={handleAddComment}
      >
        Post
      </Button>
    </div>
  );
}

CREATE_COMMENT mutation代码 #

export const CREATE_COMMENT = gql`
  mutation createComment($postId: uuid!, $userId: uuid!, $content: String!) {
    insert_comments(
      objects: { post_id: $postId, user_id: $userId, content: $content }
    ) {
      returning {
        id
        created_at
        post_id
        user_id
        content
        user {
          username
        }
      }
    }
  }
`;

已尝试的排查操作 #

• 将Hasura中content字段设为Nullable: True，并更新mutation的$content类型为String，错误消失但数据库中content值始终为NULL
• 尝试将$content类型改为[String!]，问题未解决

解决方案 #

问题根源在于TextField的onChange事件处理错误：代码中使用了event.target.event来获取输入值，正确的属性应该是event.target.value。这个错误导致输入框的内容从未同步到state，传递给mutation的content变量始终为空字符串/undefined，而mutation要求$content是String!（非空字符串类型），因此触发了非空校验错误。

修复步骤 #

1. 修正TextField的onChange回调：

onChange={(event) => setContent(event.target.value)}

2. 恢复Hasura中content字段的Nullable: False设置
3. 保持mutation中$content: String!的类型定义

修复后，输入框内容会正确同步到state，点击Post按钮时，content变量会携带用户输入的字符串，mutation可以正常执行，评论内容会正确存入数据库。

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