Проблема с мутацией от Apollo-Client - PullRequest
0 голосов
/ 05 мая 2020

Я пытаюсь выполнить вход с помощью JSON веб-токенов. Прямо сейчас я делаю простую вещь, я просто хочу указать имя пользователя и пароль и, если они верны, в качестве ответа мне нужен консольный журнал с токеном.

Вместо получения токена в консоли все, что я получаю, это изменение http-адреса с http:/localhost:3000/login на http:/localhost:3000/login?username=username&password=password

Может кто-нибудь объяснить мне, почему это происходит?

Вот мой код:

import React, {useState} from 'react';
import {gql} from 'graphql-tag';
import {Mutation} from 'react-apollo';
import {Button, TextField} from '@material-ui/core';

const LOGIN = gql`
  mutation Login($username: String!, $password:String!){
    login(username:$username, password:$password){
      token
    }
  }
`;

export default function Login(){
  const [formState, setFormState] = useState({
      values:{}
    })
  };

  const handleChange = event => {
    event.persist();
    setFormState( formState => ({
      ...formState,
      values:{
        ...formState.values,
        [event.target.name]:event.target.value
      }
    }));   
  };
  
  const handleSubmit = async(event, login)=>{
    event.preventDefault();
    console.log(formState.values)
    login().then(async({data}) => {
      localStorage.setItem('token', data.login.token);
    })
    .catch(function(e){
      console.log('Something went wrong');
    });
      console.log(localStorage.getItem('token'));
  }
  
  return (
  <Mutation mutation={LOGIN} variables={{username:formState.values.username, password: formState.values.password }}>
  {(login, {data}) => (
    <div>
      <form className="form" onSubmit={handleSubmit, login}>
        <TextField
          label="Username"
          name="username"
          onChange={handleChange}
          value=formState.values.username
          ></TextField>
        <TextField
          label="Password"
          name="password"
          onChange={handleChange}
          value=formState.values.password
        ></TextField>
        <Button type="submit">Login</Button>
      </form>
    </div>
    )}</Mutation>
  );

Я хотел бы знать, где моя ошибка, я новичок в React и Javascript

...