Apollo useMutation，onCompleted 完成在登录身份验证期间总是返回 true？

Question

我正在执行 GraphQL 突变以尝试登录身份验证，但它 returns 每次都为真并存储新用户 AuthToken，即使登录详细信息不正确也是如此。这很奇怪，因为当我运行 IDE 中的 GraphQL 查询时，它可以正常工作。（即，仅当 login/password 正确时才成功）。我不确定它是如何生成 auth.Token 和 console.logs "onSuccess" 的，无论我在表格中输入了什么。任何帮助将不胜感激，这让我发疯。谢谢。

const LOGIN_USER = gql `
mutation LoginUser {
    login (input: {
    clientMutationId:"uniqueId"
    username: "admin"
    password: "password"
    }) {
        authToken
            user {
                id
                name
            }
        }
}
`
const SignIn = (props) => {

const [username, setUsername] = useState('')
const [password, setPassword] = useState('')
const [loggedIn, setLoggedIn] = useState(false)

const onLoginError = () => {
    console.log("onError")
} 

const onLoginSuccess = () => {
    console.log("onSuccess")
} 

const [loginUser, { loading, error }] = useMutation(LOGIN_USER, {
    onCompleted({login}) {
        localStorage.setItem('token', login.authToken)
        onLoginSuccess()
    },
    onError(error){
        alert(error)
        onLoginError()
    }
})

const onLoginSubmit = (event) => {
    event.preventDefault()
    loginUser({ variables:
        {
            "input": {
                "clientMutationId": "uniqueId",
                "username": username,
                "password": password
            }
        }
    })
}
const handleOnChange = (event) => {
    if(event.target.name === "username") {
        setUsername(event.target.value)
    } else if(event.target.name === "password") {
        setPassword(event.target.value)
    }
}
return (
<form onSubmit={onLoginSubmit}>
<>
                        <input
                            className={styles.formInput}
                            name="username" 
                            placeholder="Username or email" 
                            type="text" 
                            value={username}
                            onChange={handleOnChange}
                        >
                        </input>
                        <input 
                            className={styles.formInput}
                            name="password"
                            placeholder="Password" 
                            type="password" 
                            value={password}
                            onChange={handleOnChange}
                        >
                        </input>
                        <button 
                            className="button is-primary is-pulled-right has-text-weight-semibold"
                            type="submit"
                            disabled={loading}
                        ><FiLogIn className={styles.loginIcon}/>
                            Login
                        </button>
                    </form>
</>
export default SignIn

Answer 1

您的查询具有 username 和 password 的硬编码值，因此无论您在表单中输入什么，它们每次都会导致成功登录。您为 variables 传入的任何值实际上都会被忽略，因为您实际上并未在查询中使用变量。更新您的查询以实际使用您传入的变量（username 和 password）。

Apollo useMutation，onCompleted 完成在登录身份验证期间总是返回 true？

Apollo useMutation, onCompleted completion always returning true during Login Authentication?

reactjs

graphql

react-hooks

apollo

react-apollo