如何使用 React Apollo Link Rest 获取错误正文

Question

我正在使用Apollo Graphql创建一个React应用程序，我在使用Apollo Link Rest时遇到了一些问题。问题是在我的应用程序中，我必须发出 REST 请求，但是此请求可能会成功并返回状态代码 = 200，或者可能会失败，返回状态代码 = 400。

对于我的应用来说，在发生 400 错误时，向最终用户显示此请求正文中返回的错误消息非常重要。但是，当发生错误时，Apollo Link Rest 只会抛出异常，但它不会将响应正文返回给我。

当阿波罗链接休息出现错误时，我有没有办法获取响应正文？我以为我可以从result变量中获取它，但由于 Apollo 抛出异常，这个变量永远不会改变。

这是我的代码：

const result = await context.client.query<MyQuery>({
query: MyQuery,
variables: {
input: {
companyId: variables.companyId,
},
},
});

query MyQuery($input: MyQueryInput!) {
myQuery(input: $input) @rest(
type: "QueryResponse",
method: "POST"
path: "v1/my-query"
) {
id
minimumPreparationTime
maximumPreparationTime
extras {
id
optional
key
}
warning
error {
id
type
message
}
}
}

Answer 1

扩展 Greg 注释和 apollo-link-error，您可以从networkError.result.message中检索错误正文。

Answer 2

您可以使用apollo-link-error来捕获和处理服务器错误、网络错误和 GraphQL 错误。如果需要，您应该能够有条件地设置response.errors。

import { onError } from "apollo-link-error";
const link = onError(({ graphQLErrors, networkError, response, operation }) => 
{
if (graphQLErrors)
graphQLErrors.map(({ message, locations, path }) =>
console.log(
`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: 
${path}`,
),
);
if (networkError) console.log(`[Network error]: ${networkError}`);
response.error = // set error property here 
});

可能还值得注意的是，阿波罗公开了一个errorPolicy选项，其默认值为none。根据文档，可以将该策略修改为all

是通知用户潜在问题的最佳方式 显示来自服务器的尽可能多的数据。它节省了两个数据 以及错误到阿波罗缓存中，以便您的 UI 可以使用它们。