react-apollo 突变组件将空字符串发送为 null

Posted 2023-03-08

【中文标题】react-apollo 突变组件将空字符串发送为 null

【英文标题】：react-apollo mutation component sends empty strings as null

【发布时间】：2018-10-21 04:42:27

【问题描述】：

我将把这个问题简化为一个简单的例子。我有一个表格组件，它呈现一个带有查询数据的表格。我还有一个小表格，允许用户将数据输入到表格中。我遇到的问题是输入字段的默认值是空字符串。

示例输入字段：

<td><input  type="text" placeholder="Nombre" name="name" onChange=this.handleChange value=this.state.name/></td>

假设状态将空字符串作为输入字段的默认值

this.state=name:' '

还假设我想在我的表单中向数据库发送一个空字符串。我正在使用 graphql 以阿波罗的方式进行突变：

const ADD_CONTACTS = gql`
mutation createContact(
$name: String,
    )
  createContact(
    name: $name
  )
    id
    name
  
`

<Mutation mutation=ADD_CONTACTS>
        createContact=>(
            <form onSubmit=async e=> 
                e.preventDefault();
                let name = this.state.name;
                await createContact(variables :  
                    "name":name
                 )


                
            >
            <table>
             ... table markup with input fields
            </form>
        )
        </Mutation>

好的，这就是一般情况。实际上，该表单包含 6 个字段。但问题是，当我向变量内的查询发送一个空字符串时，它将查询发送到服务器的那一刻，它会将空字符串更改为 null 值，因此我最终会遇到此错误：

GraphQL 错误：SQLSTATE[23000]：违反完整性约束：1048 列“名称”不能为空

我已经使用 graphiql 测试了服务器，并且请求本身可以接受空字符串，但似乎突变组件或 apollo 在某处将我传递给 graphql 变量的空字符串转换为 null。

我已经设法为这种情况制定了解决方法，但这绝对不是处理这种情况的正确方法。如果我能以某种方式让 apollo 实际发送空字符串而不是 null 它将解决问题。

感谢任何知道为什么会这样的人

【参考方案1】：

尝试删除async 和await。

【讨论】：

不幸的是，它没有这样做......不知道为什么 apollo 将空字符串转换为 null 而不仅仅是传递空字符串