如何在客户端全局处理Apollo GraphQL错误并渲染自定义ErrorHandler组件？

Hey there! Let’s break down the right way to handle Apollo GraphQL errors globally and render your custom ErrorHandler component—you’re right that relying solely on afterware or apollo-link-error won’t cut it if you need to render a UI component in response to errors. Below are two production-ready solutions tailored to your use case:

This approach combines Apollo’s error-catching capabilities with React’s global state management to seamlessly trigger your custom error UI.

Step 1: Create a Global Error Context #

First, set up a context to share error state across your app:

// src/contexts/GlobalErrorContext.js
import { createContext, useContext, useState, useEffect } from 'react';

const GlobalErrorContext = createContext();

// Initialize a mutable handler to connect Apollo's error link to the context
let errorCallback = null;

export const GlobalErrorProvider = ({ children }) => {
  const [globalError, setGlobalError] = useState(null);

  const clearError = () => setGlobalError(null);

  // Link Apollo's error events to the context state
  useEffect(() => {
    errorCallback = ({ graphQLErrors, networkError }) => {
      // Format error message based on your needs
      const errorMsg = graphQLErrors?.map(e => e.message).join(', ') 
        || networkError?.message 
        || 'An unexpected error occurred';
      setGlobalError({ message: errorMsg, type: graphQLErrors ? 'graphql' : 'network' });
    };

    // Cleanup on unmount
    return () => { errorCallback = null; };
  }, [setGlobalError]);

  return (
    <GlobalErrorContext.Provider value={{ globalError, clearError }}>
      {children}
    </GlobalErrorContext.Provider>
  );
};

export const useGlobalError = () => useContext(GlobalErrorContext);

Step 2: Configure Apollo Client with Error Link #

Update your Apollo client to use apollo-link-error and route errors to the context:

// src/apollo/client.js
import { ApolloClient, InMemoryCache, from, HttpLink } from '@apollo/client';
import { onError } from '@apollo/client/link/error';
import { errorCallback } from '../contexts/GlobalErrorContext';

const errorLink = onError((errorDetails) => {
  if (errorCallback) {
    errorCallback(errorDetails);
  }
});

const httpLink = new HttpLink({ uri: '/graphql' });

export const client = new ApolloClient({
  link: from([errorLink, httpLink]),
  cache: new InMemoryCache(),
});

Step 3: Render Your Custom ErrorHandler #

Add the error component to your app’s root so it’s always accessible:

// src/App.js
import { ApolloProvider } from '@apollo/client';
import { GlobalErrorProvider, useGlobalError } from './contexts/GlobalErrorContext';
import { client } from './apollo/client';
import ErrorHandler from './components/ErrorHandler';
import YourAppContent from './components/YourAppContent';

const AppWrapper = () => {
  const { globalError, clearError } = useGlobalError();

  return (
    <>
      {/* Render error component only when there's an active error */}
      {globalError && <ErrorHandler error={globalError} onClose={clearError} />}
      <YourAppContent />
    </>
  );
};

function App() {
  return (
    <ApolloProvider client={client}>
      <GlobalErrorProvider>
        <AppWrapper />
      </GlobalErrorProvider>
    </ApolloProvider>
  );
}

export default App;

If you want a global fallback for unhandled errors (including those from Apollo requests), use React’s built-in Error Boundary:

Step 1: Create a Global Error Boundary #

// src/components/GlobalErrorBoundary.js
import { Component } from 'react';
import ErrorHandler from './ErrorHandler';

class GlobalErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    // Optional: Log error to monitoring service
    console.error('Global error caught:', error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <ErrorHandler 
        error={this.state.error} 
        onClose={() => this.setState({ hasError: false, error: null })} 
      />;
    }

    return this.props.children;
  }
}

export default GlobalErrorBoundary;

Step 2: Modify Apollo Error Link to Throw Errors #

// src/apollo/client.js
const errorLink = onError(({ graphQLErrors, networkError }) => {
  if (graphQLErrors) {
    throw new Error(graphQLErrors.map(e => e.message).join(', '));
  }
  if (networkError) {
    throw new Error(networkError.message);
  }
});

Step 3: Wrap Your App with the Error Boundary #

// src/App.js
function App() {
  return (
    <ApolloProvider client={client}>
      <GlobalErrorBoundary>
        {/* Your app content goes here */}
      </GlobalErrorBoundary>
    </ApolloProvider>
  );
}

• Afterware: Designed for modifying HTTP responses or handling status codes, not triggering React component updates (it operates outside React’s lifecycle).
• Apollo-link-error alone: Captures errors but can’t directly pass state to React components—you need a way to bridge Apollo’s error events to React’s state system (Context or Error Boundary).

内容的提问来源于stack exchange，提问作者shiva tammana