запрос на подключение к GraphQL отменяется - PullRequest
Новая
       7

запрос на подключение к GraphQL отменяется

0 голосов
/ 12 декабря 2018

У меня есть форма ввода с одним полем ('name_studies') в React.Нажатие на кнопку отправки должно вызвать мутацию graphQL (createStudy), которая записывает данные в таблицу базы данных postgreSQL («учеба»).

Однако запрос молча завершается неудачно, и сохранение журнала в Chrome показывает, что запрос был отменен(запрос также содержит значения state.values ​​формы).

Запрос graphQL работает, как и ожидалось, при вызове из графического интерфейса graphQL.

Почему этот запрос отклоняется?Я обманул клиента Apollo?

Компонент, содержащий форму (определение запроса на стороне клиента): 

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 и resolver: 

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, в результате состояние запроса «отменяется», когда выполняется через Apollo изРеактивный ввод, и я не знаю, почему

...