1

I'm handling the error with useMutation error handling method however after i attempt to test the error handling by posting an empty post it shows the error in the UI then right after the app breaks and i get the error above.

const [createPost, { error }] = useMutation(CREATE_POST_MUTATION, {
variables: values,
update(proxy, result) {
  const data = proxy.readQuery({
    query: FETCH_POSTS_QUERY,
  });

  let newData = [...data.getPosts];
  newData = [result.data.createPost, ...newData];
  proxy.writeQuery({
    query: FETCH_POSTS_QUERY,
    data: {
      ...data,
      getPosts: {
        newData,
      },
    },
  });
  values.body = '';
}
});

''

{error && (
    <div className="ui error message" style={{ marginBottom: 20 }}>
      <ul className="list">
        <li>{error.graphQLErrors[0].message}</li>
      </ul>
    </div>
  )}
Abdelwahab
  • 149
  • 9
  • console.log the data you send to the server – Or Assayag Dec 15 '20 at 19:31
  • @OrAssayag it sends the empty string which is the posts body when sent empty but the server returns back the error which i'm showing on the front end but for some reason still throws the error – Abdelwahab Dec 16 '20 at 00:22

2 Answers2

1

Or another way is that you can disable the button which won't cause the error. Unless there is a text in the body, the button will not be active. It won't be active if there is only spaces.

<Button disabled={!values.body.trim()} type="Submit" color="teal">
  Submit
</Button>
sarvagya8
  • 92
  • 5
0

I found my solution here Handling errors with react-apollo useMutation hook

NOTE: While you can use the exposed error state to update your UI, doing so is not a substitute for actually handling the error. You must either provide an onError callback or catch the error in order to avoid warnings about an unhandled Promise rejection.

Abdelwahab
  • 149
  • 9