Unhandled Rejection (TypeError): Cannot read property 'extensions' of undefined. (GraphQL)

Question

I am using GraphQL along with MERNG and I am getting the following error: Unhandled Rejection (TypeError): Cannot read property 'extensions' of undefined. Please help me out. I also reinstalled graphql. This is the line where the error occurs: setErrors(err.graphQLErrors[0].extensions.exception.errors);

This is my Register.js file:

 import React, { useState } from 'react' import { Button, Form } from 'semantic-ui-react' import gql from 'graphql-tag' import { useMutation } from '@apollo/react-hooks' function Register() { const [errors, setErrors] = useState({}); const [values, setValues] = useState({ username: '', email: '', password: '', confirmPassword: '' }) const onChange = (event) => { setValues({...values, [event.target.name]: event.target.value }); } const [addUser, { Loading }] = useMutation(REGISTER_USER, { update(proxy, result) { console.log(result); }, onError(err) { console.log(err.graphQLErrors[0].extensions.exception.errors); setErrors(err.graphQLErrors[0].extensions.exception.errors); }, variables: values }) const onSubmit = (event) => { event.preventDefault(); addUser(); } return ( < div className = "form-container" > < Form onSubmit = { onSubmit } noValidate > < h1 > Register < /h1> < Form.Input label = "Username" placeholder = "Username" name = 'username' type = "text" value = { values.username } onChange = { onChange } /> < Form.Input label = "Email" placeholder = "Email" name = 'email' type = "email" value = { values.email } onChange = { onChange } /> < Form.Input label = "Password" placeholder = "Password" name = 'password' type = "password" value = { values.password } onChange = { onChange } /> < Form.Input label = "Confirm Password" placeholder = "Confirm Password" name = 'confirmPassword' type = "password" value = { values.confirmPassword } onChange = { onChange } /> < Button type = "submit" primary > Register < /Button> < /Form> { Object.keys(errors).length > 0 && ( < div className = "ui error message" > < ul className = "list" > { Object.values(errors).map(value => ( < li key = { value } > { value } < /li> )) } < /ul> < /div> ) } < /div> ) } const REGISTER_USER = gql ` mutation register( $username: String: $email: String: $password: String: $confirmPassword: String: ){ register( RegisterInput: { username; $username email: $email password: $password confirmPassword: $confirmPassword } ){ id email username createdAt token } } ` export default Register;

Answer 1

It suggests clealry that err.graphQLErrors[0] is undefined,if you dont want that undefined error you can do something like this:

setErrors(err&&err.graphQLErrors[0]?err.graphQLErrors[0].extensions.exception.errors:{});

Answer 2

Change your setErrors from

setErrors(err.graphQLErrors[0].extensions.exception.errors);

to

setErrors(err.graphQLErrors[0].extensions.errors);