Как правильно передать переменные в graphql с помощью apollo?ИЛИ как передать состояние в запросе grapQL с помощью apollo - PullRequest
Новая
       12

Как правильно передать переменные в graphql с помощью apollo?ИЛИ как передать состояние в запросе grapQL с помощью apollo

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

Привет, ребята, нужна помощь. Меня попросили создать аутентификацию, и мы используем GraphQL для бэкэнда.и GraphQL-apollo на нашем интерфейсе.Я пытаюсь выяснить, как сделать запрос из внешнего интерфейса.вот мой код. 

// ! imported dependecies
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { graphql, compose } from 'react-apollo';

// ! imported files
import Input from '../Common/Input/input';
import Button from '../Common/Button/button';
import { login } from '../../reduxes/actions/loginAction';

// ! imported query
import { userLogin } from '../../util/graphQLQuery';


// email: "boo@boo.com", password: "password")
class Login extends Component {
  state = {
    email: '',
    password: '',
  };

  handleChange = (e) => {
    const { value, name } = e.target;
    this.setState({
      [name]: value,
    });
  };

  handleClick = () => {
    const { email, password } = this.state;
    this.props.login({ email, password });
  };

  render() {
    const { email, password } = this.state;
    return (
      <div>
        <Input
          value={email}
          onChange={this.handleChange}
          placeholder="email"
          name="email"
        />
        <Input
          value={password}
          onChange={this.handleChange}
          placeholder="password"
          name="password"
        />
        <Button onClick={this.handleClick}> Login </Button>
      </div>
    );
  }
}

const mapStateToProps = (state) => ({
  state,
});

const mapDispatchToProps = (dispatch) => ({
  login: (args) => {
    console.log(args, 'dis');
    dispatch(login(args));

  }
});

export default compose(
  connect(
    mapStateToProps,
    mapDispatchToProps
  ),
  // graphql query from backend
  graphql(userLogin, {
    options: (props) => {
      return {
        variables: {
          email: props.state.credentials.email,
          password: props.state.credentials.password
        },
      }
    }
  })
)(Login);

При загрузке это будет экспортировано немедленно, и у меня будет ошибка запроса, потому что в моем начальном состоянии '' пустая строка.Есть ли другой способ запросить это?просто используя состояние вместо реквизита?

graphql(userLogin, {
        options: (props) => {
          return {
            variables: {
              email: props.state.credentials.email,
              password: props.state.credentials.password
            },
          }
        }
      })

На моем бэкэнде при попытке ввести адрес электронной почты и пароль я получаю токен, но не вижу его в моем интерфейсе.Кстати, я тоже использую Redux.

...