Ошибка при запросе файла мутации с контекстным API - PullRequest
0 голосов
/ 13 февраля 2020

Я перемещал действия из компонента входа в контекст (я настроил контекстный API), все шло нормально, пока мне не пришлось устанавливать graphql и перемещать файлы мутаций из компонента входа в файл контекста. Прямо сейчас выдает мне следующую ошибку:

Аргумент undefined, переданный парсеру, не является допустимым GraphQL DocumentNode. Возможно, вам понадобится использовать 'graphql-tag' или другой метод для преобразования вашей операции в документ

, эта ошибка возникла, когда я использовал ее, когда вызывал мутацию в нижней части моего компонента AppProvider. Я думаю, что это не так с контекстом, чтобы использовать мутации graphql.

AppProvider:

    // React
    import React, { Fragment } from 'react';

    // React apollo
    import { graphql } from 'react-apollo';
    import * as compose from 'lodash.flowright';

    // React router
    import { withRouter, Redirect } from 'react-router-dom';

    // Mutation
    import mutations from './mutations';

    // Context
    export const Context = React.createContext();

    class AppProvider extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                // Login & logout states
                login_credentials: {},
                isLogged: false,
                get_data: this.get_data,
                submit: this.submit,
            }
        }

        // Actions

        // Login & Logout

        get_data = async(e) => {
            e.preventDefault();
            const { name, value } = e.target;
            const data = { [name]: value };
            const newData = { ...this.state.login_credentials, ...data };
            this.setState({
                login_credentials: newData
            });

        }

        submit = async(e) => {
            e.preventDefault();
            const { signinUser } = this.props;
            const { login_credentials, isLogged } = this.state;

            try {
                let variables = login_credentials;
                const response = await signinUser({variables});
                const get_token = response.data.signinUser.token;

                // setting localStorage
                localStorage.setItem('token', get_token);
                this.setState({
                    isLogged: true
                });

                this.props.history.push({pathname: '/home', state: {isLogged: this.state.isLogged}});


            } catch(error) {
                console.log(error);
            }

        }

        // END LOGIN & LOGOUT ACTIONS

        render() {
            return(
                <Context.Provider value={this.state}>
                    {this.props.children}
                </Context.Provider>
            );
        }
    }

    export default compose(
        withRouter,
        graphql(mutations.signinUser, { name: 'signinUser' }),
    )(AppProvider)

Войдите компонент, где я использовал для использования функции и мутации:

        // React
    import React, { Fragment } from 'react';

    // React apollo
    import { graphql } from 'react-apollo';
    import * as compose from 'lodash.flowright';

    // React router
    import { withRouter, Redirect } from 'react-router-dom';

    // import mutations
    import mutations from './mutations';

    // React bootstrap
    import { Container, Row, Form, Button } from 'react-bootstrap';

    // Import Style
    import './style.css';

    // Component
    import NavbarLayout from '../Navbar';

    // Context
    import  Context  from '../../context/context';



    class LoginForm extends React.Component {

    /*     state = {
            login_credentials: {},
            isLogged: false
        }

        get_data = async(e) => {
            e.preventDefault();
            const { name, value } = e.target;
            const data = { [name]: value };
            const newData = { ...this.state.login_credentials, ...data };
            this.setState({
                login_credentials: newData
            });

        }

        submit = async(e) => {
            e.preventDefault();
            const { signinUser } = this.props;
            const { login_credentials, isLogged } = this.state;

            try {
                let variables = login_credentials;
                const response = await signinUser({variables});
                const get_token = response.data.signinUser.token;

                // setting localStorage
                localStorage.setItem('token', get_token);
                this.setState({
                    isLogged: true
                });

                this.props.history.push({pathname: '/home', state: {isLogged: this.state.isLogged}});


            } catch(error) {
                console.log(error);
            }

        }
    */

        render() {

            return(

                <Fragment>
                <Context.Consumer>
                    {c => {
                        return(
                            <Container>
                                <Form className="form-container">
                                    <h2 className="text-center pb-4">Ingreso</h2>
                                    <Form.Group controlId="formBasicEmail">
                                        <Form.Control name='email' onChange={e => c.get_data(e)} type="email" placeholder="Email" />
                                    </Form.Group>

                                    <Form.Group controlId="formBasicPassword">
                                        <Form.Control name='password' onChange={e => c.get_data(e)} type="password" placeholder="Contraseña" />
                                    </Form.Group>
                                    <div className="text-center">
                                        <Button className="button-login" variant="primary" onClick={e => c.submit(e)} type="submit">
                                            Ingresa
                                        </Button>
                                    </div>
                                </Form>
                            </Container>
                        );
                    }}
                </Context.Consumer>
                </Fragment>
            );
        }
    }

    export default compose(
        /* withRouter,
        graphql(mutations.signinUser, { name: 'signinUser' }), */
    )(LoginForm);
...