时间戳

首页 > 解决方案 > react-apollo 突变组件将空字符串发送为 null

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

问题描述

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

示例输入字段：

<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 它将解决问题。

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

标签： reactjsnullgraphqlreact-apollographql-mutation

解决方案

尝试删除async和await。

推荐阅读