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

【问题标题】：react-apollo mutation component sends empty strings as nullreact-apollo 突变组件将空字符串发送为 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 它将解决问题。

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

【问题讨论】：

标签： reactjs null graphql react-apollo graphql-mutation

【解决方案1】：

尝试删除async 和await。

【讨论】：

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