graphQL mutation error handling with React hooks(useMutation + Apollo-client)

Question

i cant show errors if login faild...

import React from 'react';
import {useMutation, gql} from '@apollo/client';

const LOGIN = gql`
    mutation login($userID: String!, $password: String!) {
        login(userID: $userID, password: $password) {
            id
            name
            theme
            lang
            userID
            token
        }
    }
`;

export default function Login() {
    const [state, setState] = React.useState({
           errorMessege: '',
           userID: '',
           password: '',
    });

    const [loginMutation] = useMutation(LOGIN, {
        update(proxy: any, result: any) {
            login(result.data.login);
        },
        variables: {
            userID: state.userID,
            password: state.password,
        },
    });


    return (
        <div>
           // show error here...
        </div>
    );
}

i don't know if i should use react-hooks because there was a different answer here:

Apollo client mutation error handling

it's working fine... but error handling is impossible.

Will this help https://www.apollographql.com/docs/react/data/mutations/#tracking-loading-and-error-states — Harsha Venkataramu, Nov 28 '20 at 18:47

score 1 · Accepted Answer · answered Nov 28 '20 at 18:53

Actually it's ok...you just forgot to add onError!

const [loginMutation] = useMutation(LOGIN, {
        update(proxy: any, result: any) {
            login(result.data.login);
        },
        onError(err: any) {
            // err is for example: "Error: notFound"

            const error = `${err}`.split(':').reverse()[0];
            //this turns ' Error: notFound' to 'notFound'

            setState({
                ...state,
                modalMessege: `${error}`,
            });
        },
        variables: {
            userID: state.userID,
            password: state.password,
        },
    });

graphQL mutation error handling with React hooks(useMutation + Apollo-client)

1 Answers1