reactjs - 当服务器关闭时 React-Apollo 捕获-6ren

reactjs - 当服务器关闭时 React-Apollo 捕获

转载作者：行者123 更新时间：2023-12-04 13:36:03

25

4

在我的带有节点服务器的 React ApolloGraphQL 应用程序中，当我的节点服务器关闭时，我试图让它捕获错误。当节点服务器启动时，一切正常且正常……捕获并显示 graphQL 错误。但是当我停止节点服务器时，我收到了一个无法避免的运行时错误。当节点服务器关闭时，服务器响应 503 Service Unavailable响应和非 JSON 的 html 页面。

apollo 客户端设置如下:

const client = new ApolloClient({
  assumeImmutableResults: true,
  fetchOptions: {
    credentials: "include"
  },
  fetch: fetch,
  onError: ({ graphQLErrors, networkError }) => {
    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 = {errors:null};
  },
  cache: new InMemoryCache({
    freezeResults: true,
    dataIdFromObject: obj => {
      let dataId = null;
      switch (obj.__typename) {
        default:
          dataId = defaultDataIdFromObject(obj);
      }
      return dataId;
    },
    cacheRedirects: {
      Query: {
        productVariant: (_, args, { getCacheKey }) => {
          const cacheKey = getCacheKey({ __typename: "ProductVariant", ...args });
          return cacheKey;
        }
      }
    },
  }),
});

以上 onError使用此消息阻止响应:

Error: Network error: JSON.parse: unexpected character at line 1 column 1 of the JSON data

我以这种方式设置了突变:

const [mutateVariant, {data, error, loading}] = useMutation(UPDATE_PRODUCT_META);

我这样称呼它:

mutateVariant({ variables: {inputM: {...buildMetaInput(editedData)} }, 
    errorPolicy: 'ignore', onError: (error) => Logger("Error:", error)});

你可以看到我用不同的方式尝试过 errorPolicy设置并添加 onError打回来。

但是我不断收到未处理的运行时错误，并且似乎无法捕获和处理它们:

Unhandled Runtime Error

Error: Network error: JSON.parse: unexpected character at line 1 column 1 of the JSON data
Call Stack
ApolloError           webpack-internal:///./node_modules/apollo-client/bundle.esm.js (76:28)
error                 webpack-internal:///./node_modules/apollo-client/bundle.esm.js (1041:48)
notifySubscription    webpack-internal:///./node_modules/zen-observable/lib/Observable.js (140:18)
onNotify              webpack-internal:///./node_modules/zen-observable/lib/Observable.js (179:21)
error                 webpack-internal:///./node_modules/zen-observable/lib/Observable.js (240:15)
error/<               webpack-internal:///./node_modules/apollo-client/bundle.esm.js (880:76)
error                 webpack-internal:///./node_modules/apollo-client/bundle.esm.js (880:27)
notifySubscription    webpack-internal:///./node_modules/zen-observable/lib/Observable.js (140:18)
onNotify              webpack-internal:///./node_modules/zen-observable/lib/Observable.js (179:21)
error                 webpack-internal:///./node_modules/zen-observable/lib/Observable.js (240:15)
error                 webpack-internal:///./node_modules/apollo-link-error/lib/bundle.esm.js (53:34)
notifySubscription    webpack-internal:///./node_modules/zen-observable/lib/Observable.js (140:18)
onNotify              webpack-internal:///./node_modules/zen-observable/lib/Observable.js (179:21)
error                 webpack-internal:///./node_modules/zen-observable/lib/Observable.js (240:15)
createHttpLink/</</<  webpack-internal:///./node_modules/apollo-link-http/lib/bundle.esm.js (92:26)

返回的 error来自 useMutation 钩子(Hook)的数据:

graphQLErrors: Array []
message: "Network error: JSON.parse: unexpected character at line 1 column 1 of the JSON data"
networkError: {…}
  bodyText: "<!DOCTYPE HTML PUBLIC \"-//IETF//DTD HTML 2.0//EN\">\n<html><head>\n<title>503 Service 
  Unavailable</title>\n</head><body>\n<h1>Service Unavailable</h1>\n<p>The server is temporarily unable 
  to service your\nrequest due to maintenance downtime or capacity\nproblems. Please try again later.  
  </p>\n<p>Additionally, a 503 Service Unavailable\nerror was encountered while trying to use an 
  ErrorDocument to handle the request.</p>\n</body></html>\n"
  name: "ServerParseError"
  response: Object {  }
  statusCode: 503

我如何捕捉这个错误？

最佳答案

mutateVariant 函数返回一个 promise 。尝试在调用后添加 .catch()。

mutateVariant().catch(() => {...});

关于reactjs - 当服务器关闭时 React-Apollo 捕获，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/62051000/

25

4

0

文章推荐： sql - activerecord 中最近的内部查询

apollo - Apollo 客户端的全局加载标志
有没有全局loading react-apollo 客户端在任何地方都可以使用标志吗？我有一个“页面包装器”组件，我想在所有子组件都收到它们的数据后应用 ui 效果。我已经使用 redux 设置了
apollo - 将数据从客户端添加到 Apollo？
我试图通过 React 了解 Apollo。如何将状态添加到我本地的 Apollo 商店？我正在使用 meteor 。它在客户端提供了一个功能来测试用户是否登录并返回他们的 id 如果他们是 Met
apollo - Apollo 中的嵌套查询缓存重定向
我有一个关于 cacheRedirects 的问题在 Apollo 中，我有项目概览和详细 View 。我希望将 detailview 缓存重定向到概览中的一个项目(如文档中的 the book ex
apollo - Apollo 中查询和变异之间的区别？
我们可以使用查询和变异向服务器发出一些请求。在这些查询中，我们可以传递一些参数，并且在这两种情况下我们都会从服务器获得一些结果。唯一的一个强制性区别是，我们可以从 props 中调用突变，例如“thi
graphql - @apollo/client , apollo-client 和 apollo boost 之间的区别
我正在使用 @apollo/client 实现，但我没有看到任何完整的 @apollo/client 示例与 react . 如果我搜索，我会得到示例 apollo-client和 apollo bo
react-apollo - 如何在 apollo-link 或 apollo-client 中禁用缓存？
我正在使用 apollo-client、apollo-link 和 react-apollo，我想完全禁用缓存，但不知道该怎么做。我看了apollo-cache-inmemory的来源，它有一个 c
apollo - 如何在 apollo-link-error 中访问 apollo 客户端到 resetStore？
我正在构建基于 JWT 的身份验证系统. JWT已过期。当JWT过期，我 catch JWT使用 apollo-link-error 的过期错误.我想调用 apolloClient.resetStor
apollo - 何时使用 Apollo 缓存重定向？
Apollo 文档 discusses the use of cacheRedirects 告诉 Apollo 如何从其他查询访问缓存中的数据。它给出了一个例子: In some cases, a
apollo - 重构和 Apollo 查询
react-apollo的Query组件可以使用Recompose吗？ ? https://www.apollographql.com/docs/react/essentials/queries.ht
apollo-server-express、apollo-server 和 apollo-cache-control 中的 TypeScript 导入问题
我正在尝试从“ apollo-server”更新:“^2.9.4”和 “阿波罗服务器 express ” :“^2.9.4”到 2.12.0 版本在 typescript 中，在应用程序的构建过程中
apollo - Apollo 客户端 optimisticResponse 如何工作
http://dev.apollodata.com/react/mutations.html 我正在尝试使用 optimisticResponse，但我很困惑...无法让它在我的本地运行。我的问题是
apollo-client - Apollo Client 中的轮询与订阅？
我正在制作一个社交网站。当任何用户在站点上更新或创建新内容时，我需要查看站点的任何其他用户来查看更改更新。我有一些需要低延迟的评论，因此建议为此订阅。我也有事件，但这些不需要这么低的延迟。每 10
apollo-client - Apollo Link 响应头
我在一个简单的 React 应用程序中使用最新版本的 Apollo Client，我试图从用于显示返回的记录集大小的响应中提取 header 值。我很欣赏这不是提供结果集大小的最优雅的方式，但这就是
apollo-client - Apollo Client 中的乐观响应与更新？
我想在突变后使用乐观 UI 更新:https://www.apollographql.com/docs/react/basics/mutations.html 我对“乐观响应”和“更新”之间的关系感到
apollo - 在 Apollo graphql 服务器中检测取消订阅
在 Apollo 服务器中，当客户端用户订阅订阅(使用 WebSocket)时，我们可以使用订阅解析器检测到这一点。但是有没有办法检测取消订阅？我看到 WebSocket 发送了一个 {"id":
apollo - 如何在 Apollo graphql 中添加联合类型
我创建这个问题是为了防止有人对如何在 Apollo 中添加 union/多态类型感到好奇。希望这会让他们更容易。在此示例中，我希望响应为 Worksheet 或 ApiError // typede
apollo - 如何告诉 apollo codegen 为查询查找确切的文件
我的项目目录结构是这样的: - schema.graphql - package.json - packages -- types --- package.json --- src ---- grap
react-apollo - 当新订阅到达 react-apollo 时如何重新获取查询
我想知道当订阅接收到新数据时是否有一种优雅的方式来触发react-apollo中查询的重新获取(数据在这里并不重要，将与前一个相同)。我只是在这里使用订阅作为通知触发器，告诉 Query 重新获取。
apollo-client - 在 Apollo Client 的第二个查询中使用第一个查询的结果？
我使用 Apollo、React 和 Graphcool。我有一个查询来获取登录的用户 ID: const LoginServerQuery = gql` query LoginServerQ
apollo - 在 Apollo 客户端中，我如何能够记录或拦截所有操作(查询和突变)
出于分析目的，我想跟踪所有 graphql 操作的客户端(包括 @client 操作)。我无法在 API 中找到合适的选项，想知道这在 apollo 客户端级别是否可行，或者我是否需要引入一些代理来拦

首页

博学

6Ren·AI

商城

reactjs - 当服务器关闭时 React-Apollo 捕获