Я перемещал действия из компонента входа в контекст (я настроил контекстный 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);