react-apollo mutation component sends empty strings as null

Question

I will reduce the issue to a simple example. I have a table component rendering a table with queried data. I also have a small form that allows users to input data into the table. The issue i am having is that the default value of the input fields are empty strings.

Sample input field:

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

Assume that the state is holding an empty string as default value for the input field

this.state={name:' '}

Assume also that i want to send in my form an empty string to the database. I am doing the mutation the apollo way, with 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>

Ok, that's the general context. In actuality the form contains 6 fields. But the issue is that when I send an empty string to the query inside the variable, the moment it sends the query to the server it changes the empty string to a null value so that i end up with this error:

GraphQL error: SQLSTATE[23000]: Integrity constraint violation: 1048 Column 'name' cannot be null

I have tested the server using graphiql and the requests themselves can accept empty strings, but it seems to be that the mutation component or apollo, somewhere, is converting my empty string that im passing to the graphql variables into null.

I have managed to make a workaround for this scenario, but it's definitely not the right way to deal with this. If I could somehow get apollo to actually send empty strings instead of null it would solve the issue.

thanks to anyone that has any idea why this i

Casey Benko Casey Benko · Accepted Answer · 2018-05-14T23:37:05

0

votes

Try removing async and await.

react-apollo mutation component sends empty strings as null

1 Answers