如何在React中提前检查GraphQL服务器是否正常运行？

当然有可行的办法！在React项目里，你可以通过几种实用的方式，在发起GraphQL查询前先确认服务器是否正常运行，下面是具体的方案：

1. 利用服务器健康检查端点 #

很多GraphQL服务会提供一个专门的健康检查接口（比如/graphql/health或者/health），你可以先发送一个简单的GET请求到这个端点，验证服务器是否能正常响应。这种方式开销小、响应快，适合作为前置检查。

import { useEffect, useState } from 'react';
import { useQuery } from '@apollo/client'; // 适配你使用的GraphQL客户端

// 健康检查函数
const checkServerHealth = async () => {
  try {
    const response = await fetch('/graphql/health', { method: 'GET' });
    return response.ok; // 状态码200-299则返回true
  } catch (error) {
    console.error('服务器健康检查失败:', error);
    return false;
  }
};

const MyQueryComponent = () => {
  const [isServerHealthy, setIsServerHealthy] = useState(false);
  // 主查询：只有服务器健康时才发起
  const { data, error } = useQuery(YOUR_MAIN_QUERY, {
    enabled: isServerHealthy,
  });

  useEffect(() => {
    // 组件挂载时执行健康检查
    const verifyHealth = async () => {
      const healthy = await checkServerHealth();
      setIsServerHealthy(healthy);
      if (!healthy) {
        // 这里可以加入错误日志逻辑
        console.error('GraphQL服务器未正常运行');
      }
    };
    verifyHealth();
  }, []);

  if (!isServerHealthy) {
    return <div>正在验证服务器状态...</div>;
  }

  if (error) {
    return <div>查询出错：{error.message}</div>;
  }

  return <div>查询结果：{JSON.stringify(data)}</div>;
};

2. 发送极简的GraphQL自省查询 #

如果你的服务器没有专门的健康端点，可以利用GraphQL的自省特性——发送一个极简的自省查询（比如查询__typename），只要服务器能正常响应这个请求，就说明它处于可用状态。

import { useState } from 'react';
import { gql, useQuery } from '@apollo/client';

// 极简自省查询
const INTROSPECTION_CHECK = gql`
  query {
    __typename
  }
`;

const MyQueryComponent = () => {
  const [isServerOnline, setIsServerOnline] = useState(null);

  // 先执行自省查询检查服务器状态
  const { error: introspectionError } = useQuery(INTROSPECTION_CHECK, {
    onCompleted: () => setIsServerOnline(true),
    onError: () => {
      setIsServerOnline(false);
      console.error('GraphQL服务器无响应');
    },
    fetchPolicy: 'no-cache', // 禁用缓存，确保每次都是实时检查
  });

  // 主查询：服务器在线后才启用
  const { data, error } = useQuery(YOUR_MAIN_QUERY, {
    enabled: isServerOnline === true,
  });

  if (isServerOnline === null) {
    return <div>正在连接服务器...</div>;
  }

  if (!isServerOnline) {
    return <div>服务器连接失败，请稍后重试</div>;
  }

  if (error) {
    return <div>查询错误：{error.message}</div>;
  }

  return <div>数据：{JSON.stringify(data)}</div>;
};

3. 封装自定义Hook复用检查逻辑 #

如果多个组件都需要做服务器状态检查，建议封装一个自定义Hook，把检查逻辑抽离出来，方便全局复用。

import { useState } from 'react';
import { gql, useQuery } from '@apollo/client';

// 自定义健康检查Hook
const useGraphQLServerHealth = () => {
  const [isHealthy, setIsHealthy] = useState(null);

  useQuery(gql`{ __typename }`, {
    onCompleted: () => setIsHealthy(true),
    onError: () => {
      setIsHealthy(false);
      console.error('服务器健康检查未通过');
    },
    fetchPolicy: 'no-cache',
  });

  return isHealthy;
};

// 在组件中使用
const MyQueryComponent = () => {
  const serverHealthy = useGraphQLServerHealth();
  const { data, error } = useQuery(YOUR_MAIN_QUERY, {
    enabled: serverHealthy === true,
  });

  if (serverHealthy === null) return <div>加载中...</div>;
  if (!serverHealthy) return <div>服务器暂时不可用</div>;
  if (error) return <div>查询出错，请稍后重试</div>;

  return <div>{JSON.stringify(data)}</div>;
};

额外提示 #

• 如果你的项目使用的是其他GraphQL客户端（比如urql、Relay），核心思路是一致的：先发送一个轻量请求验证服务器状态，再决定是否发起主查询。
• 可以考虑在App根组件做一次全局检查，把服务器状态存入上下文（Context），避免每个组件重复发起检查请求。

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