许多前端应用程序都使用 GraphQL 来获取后端数据。在执行 GraphQL 查询时，我们经常需要处理错误并与我们的用户进行交互。通常，我们将错误处理逻辑集成到各个组件中，这样就很难维护。在本文中，我们将学习如何将 GraphQL 查询和错误处理集成到同一个地方，从而使代码更加简单和易于维护。
错误处理
在使用 GraphQL 时，许多种类的错误可能会发生。例如，查询可能无法正确解析，无法连接到服务器，因为没有足够的权限而被拒绝，等等。在 GraphQL 中，错误处理非常灵活，您可以使用错误对象 (Error Object) 来表示任何类型的错误。
以下是一个处理 GraphQL 错误的示例：
--- - ----- ------ - ----- --------------- ------ --- --- ----------- ------ ------- - ----- --- - --------------- ------ - ------- --- -- -
在上面的代码中，我们调用了 graphql 方法来执行 GraphQL 查询。如果查询出现任何错误，我们就会通过调用 catch 子句来捕获错误，并将该错误添加到错误数组中。然后，我们返回包含错误数组的对象。
您可以使用任何适用于您的项目的错误处理方法。例如，您可以将错误记录到日志文件中，将其显示在用户界面中，或以其他任何方式处理错误。
将查询和错误处理集成在一起
如果您在前端应用程序中多次执行 GraphQL 查询，则很容易让您的代码变得复杂。如果您使用前面的方法仅仅是将错误处理集成到每个单独的查询中，那么您将不得不在每个查询处重新实现该逻辑，并且您的代码将会变得重复和难以维护。
幸运的是，GraphQL 提供了一个称为 useQuery 的钩子，可以用来执行查询，并自动处理错误。使用 useQuery，您可以将查询和错误处理逻辑集成在一个文件中，从而使您的代码变得更加清晰和易于维护。
以下是使用 useQuery 的示例：
----- - -------- ------ ---- - - --------------- --------- -- --------- ------ ------------------ -- ------- ------ -------- ------- ------ ------------------
在上面的代码中，我们使用 useQuery 钩子来执行 GraphQL 查询。useQuery 接受两个参数：一个查询字符串和一些选项。它返回三个变量：loading，error 和 data。当查询正在加载时，loading 变量为 true。如果查询失败，则 error 变量包含一个错误对象。 data 变量包含从 GraphQL 服务器获取的数据。
这样，我们就可以在一个文件中执行查询并处理结果，从而简化了代码并使其易于维护。
示例
以下是一个完整的示例，说明了如何执行 GraphQL 查询并将错误处理集成到同一个文件中。
------ - --------- --- - ---- -----------------
------ ----- ---- --------
----- --------- - ----
----- -------- -
----- -
------
------
-
-
--
-------- ------- -
----- - -------- ------ ---- - - --------------------
-- --------- ------ ------------------
-- ------- ------ -------- -------
------ -
-----
------------------ ------ ------ -- -- -
---- ------------
--------------
---------------
------
---
------
--
-在上面的示例中，我们使用 useQuery 来执行名为 getBooks 的 GraphQL 查询。如果该查询失败，则使用错误处理逻辑来显示错误消息。如果该查询成功，则使用返回的数据来渲染组件。
结论
在本文中，我们学习了如何将 GraphQL 查询和错误处理集成到同一个文件中。通过使用 useQuery 来执行查询和处理错误，我们可以使我们的代码更加简单和易于维护。希望这篇文章可以帮助您在开发前端应用程序时处理 GraphQL 查询和错误。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/67358bcb0bc820c5824f0a1e