graphql连接请求取消

Question

我在React中有一个带有单个字段（'name_studies'）的输入表单。单击提交按钮应触发graphQL突变（createStudy），该突变会将数据写入postgreSQL数据库表（“研究”）。

但是，请求静默失败，并且在Chrome中保存日志显示该请求已取消（该请求还包含表单的state.values）。

从graphQL GUI调用graphQL查询时，其工作正常。

为什么此请求被拒绝？我对阿波罗客户有恶意吗？

包含表单的组件（也包括客户端查询定义）：

const CREATE_STUDY = gql`
    mutation CreateStudy( $name_studies: String!, ) {
        createStudy( name_studies: $name_studies, ) {
           studies_id
           name_studies
        }    
}`;

class Create extends Component {
        state = {
                name_study: '',
                }

    render() {
        const {name_study, lab_study, objective_study, active_study} = this.state
        return (
            <div style={{marginTop: 10}}>
                <h3>Add New Study</h3>
                <form>
                    <div className="form-group">
                        <label>Study Name:  </label>
                        <input 
                            type="text" 
                            className="form-control"
                            value={name_study}
                            onChange={e=>this.setState({name_study:e.target.value})}
                        />
                    </div>
                    <div className="form-group">
                    <Mutation 
                        mutation={CREATE_STUDY}
                        variables={{ name_study, }}
                    >    
                        {createStudy =>
                            <button 
                                className="btn btn-primary"
                                onClick={createStudy}
                            >    
                                Add Study
                            </button>
                        }
                    </Mutation>    
                    </div>
                </form>
            </div>
        )
    }
};

export default Create;

Index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './components/App.js';
import * as serviceWorker from './serviceWorker';

import { ApolloProvider } from 'react-apollo';
import { client } from './apolloClient.js'

ReactDOM.render(
    <ApolloProvider client={client}>
        <BrowserRouter>
            <App />
        </BrowserRouter>
    </ApolloProvider>, document.getElementById('root')     
);

还有apolloClient.js

import ApolloClient from "apollo-boost";
import { createHttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';

const httpLink = createHttpLink({
    uri: 'http://localhost:4000'
})

const client = new ApolloClient({
    link: httpLink,
    cache: new InMemoryCache()
})
// const client = "";

export { httpLink, client }

以及typeDefs和解析器：

export const typeDefs = `
    type Study {
        studies_id: ID!
        name_studies: String
    }
    type Mutation {
        createStudy (
            name_studies: String!
        ): Study
    }`
;
export const resolvers = { 
    Mutation: {
        createStudy: (root, {input}) => {
            return db.one('INSERT INTO studies(name_studies) VALUES ($1) RETURNING *',
                          [input.name_studies])
                .then(data => { return console.log('INSERT STUDY SUCCESS \n', input); })  
                .catch(error => { console.log('INSERT STUDY ERROR: ', error); });     
        },
    },
};

TL; DR graphQL请求可在graphiQL中工作的突变，当从React输入通过Apollo进行请求时，导致请求状态“取消”，