Error Handling for graphql mutation hook in react and apollo not working

Question

I seem to have missed a config somewhere in my code but cannot seem to find what I have done wrong.

We have a simple login form. If the correct username and password are entered, no problem, the application continues to work.
However, if the incorrect username or password is entered, Apollo throws an error on the DOM. The "login" function is wrapped within the try-catch block, yet error still shows on the DOM.

See screenshot below:

const LoginForm = () => {
  const classes = useStyles();
  const [inputData, setInputData] = useState();
  const { register, errors } = useForm({
    mode: "onBlur",
    validationSchema: LoginSchema,
  });
  const [login, { data, error }] = useMutation(LOGIN_MUTATION, {
    errorPolicy: "all",
  });

  const handleLogin = (e) => {
    try {
      e.preventDefault();
      login({
        variables: {
          identifier: inputData.email,
          password: inputData.password,
        },
      });
    } catch (err) {
      console.log("There was an error");
    }
  };

  if (error) {
    console.log("ERRORSSSS:   ", error.graphQLErrors);
    return <h1>Error</h1>;
  } else if (data) {
    console.log(data);
  }

  const handleInput = (e) => {
    setInputData({ ...inputData, [e.target.name]: e.target.value });
  };

  return (
    <>
      <Form onSubmit={handleLogin}>
        <Grid container spacing={3}>
          <Grid item xs={12} sm={12}>
            <TextField
              className={classes.width}
              id="email"
              name="email"
              label="Email"
              // fullWidth
              inputRef={register({ required: true })}
              onChange={handleInput}
              error={errors.email ? true : null}
              helperText={errors.email ? errors.email.message : null}
            />
          </Grid>
          <Grid item xs={12} sm={12}>
            <TextField
              className={classes.width}
              id="password"
              name="password"
              label="Password"
              // fullWidth
              type="password"
              inputRef={register({ required: true })}
              onChange={handleInput}
            />
          </Grid>
          <Grid item xs={12} sm={12}>
            <LoginButton
              type="submit"
              text="Login"
              margin="1.5em 0 0 0"
              bg="blue3"
            />
          </Grid>
        </Grid>
      </Form>
    </>
  );
};

Note: - We are using Strapi 3.0.1 for our backend - Below is our Apollo Client setup:

const errorLink = onError(
  ({ graphQLErrors, networkError, response, operation }) => {
    if (graphQLErrors) {
      if (operation.operationName === "IgnoreErrorsQuery") {
        response.errors = undefined;
      }
      graphQLErrors.map(({ message, locations, path }) => {
        console.log(
          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
        );
      });
    }
    if (networkError) console.log(`[Network error]: ${networkError}`);
  }
);

const httpLink = new HttpLink({ uri: "http://localhost:1337/graphql" });
const link = ApolloLink.from([errorLink, httpLink]);

const client = new ApolloClient({
  link,
  cache: new InMemoryCache(),
});

try add `onError` handler in options `useMutation`, example: `onError: (error) => console.log(error)` — Nikita Madeev, Jun 19 '20 at 08:24

score 1 · Accepted Answer · answered Jun 19 '20 at 09:33

1

Console tells that there is an uncaught promise. Your login function is a Promise so you need to use then/catch. Like this :

const handleLogin = (e) => {

  e.preventDefault();
  login({
    variables: {
      identifier: inputData.email,
      password: inputData.password,
    },
  })
  .then(v => console.log(v))
  .catch(e => console.log(e))

};

answered Jun 19 '20 at 09:33

Thomas H.

170
4

Thanks it works! as well. I tested both your method, Nikita Madeev's method and another async/await method. Works like a charm. Again, thank you so much – Stephan Du Toit Jun 19 '20 at 17:23

Error Handling for graphql mutation hook in react and apollo not working

1 Answers1