如何使用 apollo-link-error 渲染错误答案

【问题标题】：How to render errors with apollo-link-error如何使用 apollo-link-error 渲染错误
【发布时间】：2022-01-25 23:13:42
【问题描述】：

我想使用 apollo 客户端错误链接创建一个 MUI 快餐栏，显示 graphql 返回的任何错误。该设置是使用 Material-ui 和 Apollo 客户端的 Nextjs Web 应用程序。从 Error links 上的 Apollo 文档可以创建一个错误链接，该链接将处理 graphql API 返回的错误。 Apollo 错误链接无法自行渲染任何内容，因为它将返回 void。

import { onError } from "@apollo/client/link/error";

// Log any GraphQL errors or network error that occurred
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors)
    graphQLErrors.forEach(({ message, locations, path }) =>
      console.log(
        `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
      )
    );
  if (networkError) console.log(`[Network error]: ${networkError}`);
});

我最初的想法是使用钩子和上下文。在我的_app.ts 中创建一个 Apollo 错误链接可以推送通知的钩子和一个上下文提供程序。但是，Apollo 客户端不是功能组件，因此这不起作用。

我确实考虑过创建一个函数来处理 Apollo 查询和突变中的 onError 回调，但在每个查询/突变上放置一个 onError 函数似乎需要做很多工作。

【问题讨论】：

标签： react-hooks material-ui apollo-client

【解决方案1】：

这可以使用上下文来处理。您必须对组件层次结构进行一些更改。

ContextProvider => ApolloProvider

确保两者都用于不同的组件。否则，您将无法访问挂钩。

例如：您应该能够访问 Root 组件内的钩子，您可以在其中添加 ApolloProvider。

我创建了一个示例，希望对您有所帮助（不使用 apollo，但您可以添加）：https://stackblitz.com/edit/react-ts-m7swyo

import React, { createContext, useContext, useReducer } from "react";
import { render } from "react-dom";
import "./style.css";

const Context = createContext({});

const Root = () => {
  const { state, dispatch } = useContext(Context);
  return (
    <ApolloProvider
      client={
        new ApolloClient({
          link: ApolloLink.from([
            onError(({ graphQLErrors, networkError }) => {
              // Do something and dispatch to context
              // dispatch({ type: 'ERROR', error: graphQLErrors || networkError });
            }),
          ]),
        })
      }
    >
      <App />
    </ApolloProvider>
  );
};

const reducer = (state, action) => {
  if (action.type === "ERROR") {
    return { ...state, ...action.payload };
  }
  return state;
};

const App = () => {
  const [state, dispatch] = useReducer(reducer, {});
  return (
    <Context.Provider
      value={{
        state,
        dispatch,
      }}
    >
      <Root />
    </Context.Provider>
  );
};
render(<App />, document.getElementById("root"));

【讨论】：