GraphQL Mutation 中如何处理错误-JavaScript中文网-JavaScript教程资源分享门户

GraphQL 是一种用于 API 的查询语言和运行时环境，它提供了一种更加灵活、高效、强类型的方式来定义和访问数据。在 GraphQL 中，Mutation 是一种用于对数据进行修改的操作，它类似于 RESTful API 中的 POST、PUT、DELETE 等操作。

在开发前端应用时，我们通常需要使用 Mutation 来修改客户端和服务端之间的数据，但是在处理 Mutation 的过程中，我们也需要考虑到错误处理的问题。本文将会介绍如何在 GraphQL Mutation 中处理错误，并提供一些实用的技巧和示例代码。

处理错误的方式

在 Mutation 中，错误通常是由服务器返回的。GraphQL 规范定义了一个叫做 errors 的字段，用于存储一个数组，该数组中的元素为错误对象。每个错误对象包含了 message 和 locations 等信息。

当服务器检测到错误时，它会将错误对象添加到 errors 数组中，并将正常的数据添加到 Mutation 返回的结果中。因此，我们在处理 Mutation 返回值时需要首先检查 errors 数组是否为空，如果不为空，就表明出现了错误，需要对错误进行处理。

对于错误的处理，我们需要根据业务需求进行具体的决策，其中可能包括以下几种方式：

抛出异常：如果错误是由于用户输入等原因导致的，我们可以抛出一个异常来提示用户。
显示错误信息：如果错误是由于用户输入等原因导致的，我们也可以直接将错误信息显示在界面上。
重试操作：如果错误是由于服务器或者网络等原因导致的，我们可以尝试重新执行 Mutation 操作。

错误处理的示例代码

下面以 React 和 apollo-client 为例，展示如何在 Mutation 中处理错误。

假设有一个 Mutation，用于修改用户的密码：

mutation changePassword($id: ID!, $password: String!) {
  changePassword(id: $id, password: $password) {
    success
  }
}

我们可以使用 apollo-client 来执行该 Mutation：

// javascriptcn.com 代码示例
import { useMutation, gql } from '@apollo/client';

const CHANGE_PASSWORD = gql`
  mutation changePassword($id: ID!, $password: String!) {
    changePassword(id: $id, password: $password) {
      success
    }
  }
`;

function ChangePassword({ id }) {
  const [password, setPassword] = useState('');
  const [changePassword, { loading, error }] = useMutation(CHANGE_PASSWORD);

  const onSubmit = async (event) => {
    event.preventDefault();
    try {
      const result = await changePassword({
        variables: {
          id,
          password,
        },
      });
      if (result && result.data && result.data.changePassword && result.data.changePassword.success) {
        alert('密码修改成功！');
      }
    } catch (error) {
      alert(error.message);
    }
  };

  return (
    <form onSubmit={onSubmit}>
      <label>
        密码：
        <input type="password" value={password} onChange={(event) => setPassword(event.target.value)} />
      </label>
      {loading ? <div>正在修改密码，请稍候...</div> : null}
      {error ? <div>密码修改失败，请重试！</div> : null}
      <button type="submit">修改密码</button>
    </form>
  );
}

在代码中，我们使用了 useMutation hook 来执行 Mutation，当 Mutation 返回结果时，我们检查 success 字段来判断操作是否成功。如果出现错误，我们将错误信息通过 alert 方法显示在界面上。

需要注意的是，我们对错误进行的处理方式是非常简单的，更加复杂的业务场景可能需要考虑更加复杂的处理逻辑。

总结

在 GraphQL Mutation 中，处理错误是非常重要的一件事情。本文介绍了处理 Mutation 中错误的方式，并提供了一些示例代码。希望本文能帮助读者更好地应对错误处理的问题，提升前端开发的效率。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/65445a0a7d4982a6ebe3a65f