引言
GraphQL 是一种用于 API 的查询语言,它让客户端可以精确地获取所需的数据,避免了过度获取不必要的数据。而当用户发送 GraphQL 查询时,如果查询中存在某些错误,比如字段不存在、类型错误等,GraphQL 服务端会返回一个错误响应。
本文将探讨 GraphQL 返回错误处理及异常信息解析的相关知识,以及如何在前端进行错误处理和异常信息解析。本文假设你已经对 GraphQL 有一定的了解,并且熟悉以下技术栈:React、Apollo Client。
错误响应格式
GraphQL 返回的错误响应格式如下所示:
-- -------------------- ---- ------- - --------- - - ---------- ------- ----- ----- ------- -- ---- ------------ ------------ - - ------- -- --------- - - - - - -
errors
:一个数组,其中每一项都是一个表示错误信息的对象。message
:错误信息字符串。locations
:一个数组,其中每一项都是表示错误在查询文本中的位置的对象。
错误处理
当 GraphQL 返回错误时,我们需要在前端进行相应的错误处理。在 React 应用中,可以使用 Apollo Client 提供的 ApolloError
类处理 GraphQL 错误。有两种方法可以处理 GraphQL 错误:
1.使用 useQuery
useQuery
是 React Hooks 的一种,它可以与 ApolloProvider
配合使用,方便地从 GraphQL 查询获取数据。useQuery
可以接受一个名为 errorPolicy
的属性,用于指定当 GraphQL 查询返回错误时应采取的策略。errorPolicy
属性有以下几个值:
"none"
:默认值,将错误传递到组件的ApolloError
状态中。"ignore"
:忽略错误,不会触发任何错误处理逻辑。"all"
:将错误传递到组件的ApolloError
状态中,并显示错误提示。
示例代码:
-- -------------------- ---- ------- ------ - --------- --- - ---- ----------------- ----- ----- - ---- ----- ---------------- ---- - -------- ---- - ---- - - -- -------- ---------- -- -- - ----- - -------- ------ ---- - - --------------- - ---------- - -- -- ------------ ------ --- -- --------- - ------ ------------------ - -- ------- - ------ --------- -------------------- - ------ ------------------------ -
2.使用 catch
除了在 useQuery
中设置 errorPolicy
属性外,还可以使用 catch
方法捕获错误并进行处理。catch
方法返回一个新的 Observable,它可以让我们在 Apollo Client 缓存之前拦截错误,并采取自定义的错误处理逻辑。
示例代码:
-- -------------------- ---- ------- ------ - --------- --- - ---- ----------------- ----- ----- - ---- ----- ---------------- ---- - -------- ---- - ---- - - -- -------- ---------- -- -- - ----- - -------- ------ ---- - - --------------- - ---------- - -- -- --- -- --------- - ------ ------------------ - -- ------- - ------ --------- -------------------- - ------ ------------------------ - -- -------- ------ - ------------- ------------ --------- ------------- - ---- ----------------- ----- ------ - --- -------------- ------ --- ---------------- ----- --- ---------- ---- ------------------------------ --- --- ------ -------- ------ ------ ---------- - --- - - -- -------------- -- - -- ------ ---------- ------------ - ------------------- ------- -------- ------- - ---- - ------------------- ------- -------- ------- - ---
异常信息解析
当 GraphQL 返回错误时,我们可能需要对错误信息进行解析,以便更好地向用户传达错误信息。在解析 GraphQL 异常信息时,我们通常会从以下几个方面入手:
1.错误类型
GraphQL 返回的错误信息可以基于错误类型分类,比如查询错误、验证错误、执行错误等。可以根据错误类型,对错误信息进行分类展示。
示例代码:
-- -------------------- ---- ------- -------- ------------ ------- -- - -- ----------------------- ----- ----- ------- -- ---- --------- - ------ ---------------------- - -- ---------------------- ------ -- ---- ------ ---- ---- - --------- -- ------------ - ------ ---------------------- - -- ------------------------ -------- ----- -- ----- ----- -- ---- ------- - ------ ---------------------- - -- ------------ ------ ---------- ----------------- -
2.错误字段
GraphQL 返回的错误信息中通常会包含错误字段,也就是查询中存在问题的字段。可以将错误字段高亮展示,以帮助用户更快地找到错误。
示例代码:
-- -------------------- ---- ------- -------- ------------ -------- --------- -- - ----- -------- - --------- -- ------------- -- ---------- - ----- ------------- - --------------- - -- ----- ----------- - --------------- ------ - --- ------- ------------------------ --------------- ----- -------- ------ ------ ------------------------------------ -------------------- ---- -- - ------ ---------- ----------------- -
3.错误消息
GraphQL 返回的错误信息可能很长,需要对错误消息进行截断或者格式化,以便更好地展示给用户。可以采取一些常用的格式化方式,比如截断消息、将长消息折叠起来等。
示例代码:
-- -------------------- ---- ------- -------- ------------ ------- -- - ----- --------- - ---- -- --------------- - ---------- - ------ - --- ------- ------------------------ -------------- --------- ----------------------- -------------------- ---------- ---- -- - ------ ---------- ----------------- -
结论
本文探讨了 GraphQL 返回错误处理及异常信息解析的相关知识,并介绍了几种处理 GraphQL 错误的方法。在开发中,我们应该根据实际需求,灵活使用这些技术,以便更好地展示 GraphQL 错误信息,提升用户体验。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66fffc27485b53fc16b7c4d0