react-query with graphql-request:错误边界未运行

import React, { Component } from 'react';
import { useQuery } from 'react-query';
import { request } from 'graphql-request';

// 错误边界组件
class ErrorBoundary extends Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  componentDidCatch(error, errorInfo) {
    // 处理错误，例如显示错误信息或记录错误日志
    console.error(error);
    this.setState({ hasError: true });
  }

  render() {
    if (this.state.hasError) {
      // 显示备用UI或错误信息
      return <div>Oops, something went wrong.</div>;
    }
    return this.props.children;
  }
}

// 使用react-query和graphql-request的组件
function MyComponent() {
  const { data, error } = useQuery('myQuery', () =>
    request('https://api.example.com/graphql', '{ myQuery }')
  );

  if (error) {
    throw new Error('GraphQL request failed');
  }

  return (
    <div>
      {data && data.myQuery}
    </div>
  );
}

// 在应用中使用错误边界组件包裹需要捕获错误的组件
function App() {
  return (
    <ErrorBoundary>
      <MyComponent />
    </ErrorBoundary>
  );
}