![](/img/trans.png)
[英]graphQL mutation error handling with React hooks(useMutation + Apollo-client)
[英]Weird error in react - using apollo/client - graphql
我正在开发一个 MERNG 应用程序,到目前为止一切正常,但是我在 useMutations 前面遇到了一些错误,让我向你解释一下。
因此,在登录/注册部分,如果您将字段留空或在登录中,如果在数据库中找不到您的用户,它将给出错误,并且我在 function onError(err) 中收到这些错误,但是,问题是,它总是给我错误,它说,无法读取未定义的属性“扩展”,即使我没有错误,它也会给出错误,让我给你看代码
import React, { useState } from "react";
import { useMutation, gql } from "@apollo/client";
import { useHistory } from "react-router-dom";
import { useDispatch } from "react-redux";
import {
FormAuth,
TitleAuth,
TitleAuthImage,
ContainInput,
InputAuth,
ContainSingleInput,
ContainButtons,
Button,
ButtonSpan
} from "../../website/Auth/AuthStyled";
import instagram from "../../img/instagram.svg";
import Loading from "../Loading/Loading";
const Login = ({ setLogin }) => {
const history = useHistory();
const dispatch = useDispatch();
const [userData, setUserData] = useState({
email: "",
password: ""
});
const [errors, setErrors] = useState({});
const [addUser, { loading }] = useMutation(LOGIN_MUTATION, {
update(
_,
{
data: { login: data }
}
) {
dispatch({ type: "LOGIN", payload: data });
history.push(`/profile/${data.id}`);
},
onError(err) {
setErrors(err.graphQLErrors[0].extensions.exception.errors);
},
variables: userData
});
const handleSubmit = e => {
e.preventDefault();
addUser();
setUserData({ email: "", password: "" });
};
// Framer motion animations
const PopUp = {
hidden: { x: 1000 },
visible: {
x: 0,
transition: { duration: 0.7 }
}
};
return (
<>
{!loading ? (
<FormAuth
onSubmit={handleSubmit}
variants={PopUp}
initial="hidden"
animate="visible"
>
<TitleAuth>
<TitleAuthImage src={instagram} />
</TitleAuth>
<ContainInput>
<ContainSingleInput top="2rem">
<InputAuth
name="email"
type="email"
placeholder={errors.email ? errors.email : "Email"}
maxLength="50"
value={userData.email}
onChange={e =>
setUserData({ ...userData, email: e.target.value })
}
/>
</ContainSingleInput>
<ContainSingleInput top="7rem">
<InputAuth
name="password"
type="password"
placeholder={errors.password ? errors.password : "Password"}
maxLength="50"
value={userData.password}
onChange={e =>
setUserData({ ...userData, password: e.target.value })
}
/>
</ContainSingleInput>
</ContainInput>
<ContainButtons>
<Button
type="submit"
Login
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.85 }}
>
Login
</Button>
<ButtonSpan
Register
whileHover={{ scale: 1.1 }}
whileTap={{ scale: 0.85 }}
onClick={() => setLogin(false)}
>
Register
</ButtonSpan>
</ContainButtons>
</FormAuth>
) : (
<Loading />
)}
</>
);
};
const LOGIN_MUTATION = gql`
mutation login($email: String!, $password: String!) {
login(email: $email, password: $password) {
id
email
password
token
}
}
`;
export default Login;
点击登录后浏览器报错
这里奇怪的部分是,它以前正常工作,但知道它坏了,我不知道为什么或如何,如果我有错误,它们会出现在输入的 placeHolder 中,但知道,它总是坏
根据 apollo docs onError for useMutation传递了一个ApolloError ,其中包含几个元素。
在您当前的实现中,您假设onError
中有这样一个graphQLErrors
元素,并且它确实填充了至少 1 个元素。 情况可能并非如此。 出于这个原因,当您尝试访问err.graphQLErrors[0]
时,您会得到undefined
,这会导致您的特定错误。
文档建议在采取行动之前测试特定错误的证据:
onError(({graphQLErrors, networkError}) => {
if (graphQLErrors)
graphQLErrors.forEach(({message, locations, path}) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`,
),
);
if (networkError) {
console.log(`[Network error]: ${networkError}`);
}
});
或者,您可以使用内置机制来跟踪加载和错误 state
const [addUser,
{loading: mutationLoading, error: mutationError}] = useMutation(LOGIN_MUTATION, {
update(
_,
{
data: {login: data}
}
) {
dispatch({type: "LOGIN", payload: data});
history.push(`/profile/${data.id}`);
},
variables: userData
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.