Is there elegant way to catch network errors in apollo?

Question

In this example, inside form submit handler, apollo request wrapped in try/catch block:

 async function handleSubmit(event) {
    event.preventDefault()

    const emailElement = event.currentTarget.elements.email
    const passwordElement = event.currentTarget.elements.password

    try {
      await client.resetStore()
      const { data } = await signIn({
        variables: {
          email: emailElement.value,
          password: passwordElement.value,
        },
      })
      if (data.signIn.user) {
        await router.push('/')
      }
    } catch (error) {
      setErrorMsg(getErrorMessage(error))
    }
  }

Is there more elegant way to catch network errors, not using try/catch?

Or i should just ignore console error:

Uncaught (in promise) Error: Network error: Response not successful: Received status code 400

And use error prop?

 const [login, { error }] = useMutation(LoginMutation)

The `error` variable is only returned by the hook as a convenience if you need to change your UI to reflect the error (like displaying the error for the user) -- it's not a substitute for actually handling the error, which is what you're doing with `catch`. If you want a more streamlined way of doing things, you can look at ErrorLink (and RetryLink if you want to retry the request on network errors). — Daniel Rearden, Mar 10 '20 at 17:19
Duplicate: [Handling errors with react-apollo useMutation hook](https://stackoverflow.com/questions/59465864/handling-errors-with-react-apollo-usemutation-hook) — Daniel Rearden, Mar 10 '20 at 17:19

Is there elegant way to catch network errors in apollo?

0 Answers0