React Apollo Mutation отправляет повторяющийся пустой запрос с 204 - PullRequest
Новая
       39

React Apollo Mutation отправляет повторяющийся пустой запрос с 204

0 голосов
/ 19 июня 2020

У меня есть компонент React, который использует Мутацию из '@ apollo / react-components'; Все работает нормально, но при каждом запросе, инициированном кнопкой отправки, отправляется пустой дублирующий запрос с неопознанным инициатором. Я проверил, что событие отправки кнопки вызывается только один раз. Локальный сервер, и он получает этот запрос, подтвержденный промежуточным программным обеспечением. Возвращается пустой запрос 204. Пожалуйста, посоветуйте.

enter image description here

Как у меня это:

ИНДЕКС: 

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './components/App';
import Signin from './components/Auth/Signin';
import Signup from './components/Auth/Signup';

import ApolloClient from "apollo-boost";
import { ApolloProvider } from "@apollo/react-hooks";

import { BrowserRouter as Router, Route, Switch, Redirect } from "react-router-dom"

const client = new ApolloClient({

    uri: 'http://localhost:4444/graphql'

});

const Root = () => (
    <Router>
        <Switch>

            <Route exact path="/signin" component={Signin} />
            <Route exact path="/signup" component={Signup} />
            <Route exact path="/" component={App} />

            <Redirect to="/" />
        </Switch>
    </Router>
)

ReactDOM.render(

    <ApolloProvider client={client}>
        <Root />
    </ApolloProvider>,

  document.getElementById('root')
);

SIGNIN 

import React from "react";

import { Link } from "react-router-dom";
import { Mutation } from "@apollo/react-components";

import { SIGNIN_USER } from "../../queries";

import Error from "../Error";

const INIT_STATE = {
    username: '',
    password: ''
}

class Signin extends React.Component {

    state ={ 
        ...INIT_STATE
    }

    handleChange = (e) => {
        const { name, value } = e.target;

        this.setState({ [name]: value });
    }

    handleSubmit = (e, signinUser) => {
        e.preventDefault();

        signinUser().then(({data}) => {

            const token = data.signinUser.token; 
            localStorage.setItem('token', token);

        }).catch(error => {

            console.warn('there is an error', error)

        })
    }

    clearForm = () => {
        this.setState({...INIT_STATE})
    }

    render () {
        const {username, email, password, passwordConfirmation} = this.state;

        return (
            <div className="App">
                <h2>Sign in</h2>
                <Mutation 
                    mutation={SIGNIN_USER} 
                    variables={{ username, email, password }}>


                    {( signinUser, {data, loading, error} ) => {



                        return data

                            ? <div>You are in.</div>

                            : <form className="form" onSubmit={ e => {console.log('wTF ONCE'); this.handleSubmit(e, signinUser)} }>
                                    <input onChange={this.handleChange} value={username} type="text" name="username" placeholder="username" />
                                    <input onChange={this.handleChange} value={password} type="password" name="password" placeholder="password" />
                                    <button type="submit" className="button-primary">submit</button>
                                    <span onClick={signinUser}>asdfasdf</span>
                                    {error && <Error error={error} />}
                                </form>

                    }}
                </Mutation>


            </div>
        )
    }

}

export default Signin;

SIGNIN_USER из запросов 

export const SIGNIN_USER = gql`

mutation ( 
  $username:String!,
  $password:String! ){
    signinUser(
      username: $username,
      password: $password){
    token
  }
}

`
...