使用 React 钩子处理 graphQL 突变错误（useMutation + Apollo-client）

Posted 2023-03-08

【中文标题】使用 React 钩子处理 graphQL 突变错误（useMutation + Apollo-client）

【英文标题】：graphQL mutation error handling with React hooks(useMutation + Apollo-client)

【发布时间】：2021-03-11 04:15:26

【问题描述】：

如果登录失败，我将无法显示错误...

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>
    );

我不知道我是否应该使用 react-hooks，因为这里有不同的答案：

Apollo client mutation error handling

它工作正常......但错误处理是不可能的。

【问题讨论】：

这会帮助apollographql.com/docs/react/data/mutations/…

【参考方案1】：

其实没关系...你只是忘了加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,
        ,
    );