GraphQL+React+Apollo：服务器查询正常但React渲染组件无法获取数据

我之前碰到过一模一样的情况——直接用GraphQL工具查数据完全正常，但放到React组件里就报错，大概率是客户端配置或者组件查询逻辑没到位，给你梳理几个常见的坑和修复方案：

1. 先补全ApolloClient的URI配置 #

你代码里的uri: "https://localhost:5..."明显没写完，必须填完整的GraphQL服务器端点，比如https://localhost:5000/graphql（根据你实际的服务器端口和路径调整），不然客户端根本连不上服务器，自然会抛出错误。

2. 确保组件正确实现查询逻辑 #

你提到的ExchangeRates组件（应该是用来展示counterparty数据的组件），大概率是没按照Apollo的规范写查询逻辑。下面分两种组件类型给出完整的修正代码：

类组件版本（用<Query>组件） #

补全App.js的完整代码，确保导入所有必要依赖：

import React, { Component } from 'react';
import ApolloClient from "apollo-boost";
import { ApolloProvider, Query } from "react-apollo";
import gql from 'graphql-tag';

// 定义你的GraphQL查询语句
const GET_COUNTERPARTY = gql`
  query {
    counterparty {
      name
    }
  }
`;

// 修正完整的服务器URI
const client = new ApolloClient({
  uri: "https://localhost:5000/graphql" // 替换成你实际的服务器地址
});

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <div className="App">
          <h1>Counterparty Info</h1>
          {/* 用Query组件包裹查询逻辑，处理加载、错误、数据三种状态 */}
          <Query query={GET_COUNTERPARTY}>
            {({ loading, error, data }) => {
              // 加载中状态
              if (loading) return <p>Loading data...</p>;
              // 错误状态，显示具体错误信息
              if (error) return <p>Oops! Error: {error.message}</p>;
              // 数据存在时渲染，用可选链操作符避免null/undefined报错
              return <p>Counterparty Name: {data.counterparty?.name}</p>;
            }}
          </Query>
        </div>
      </ApolloProvider>
    );
  }
}

export default App;

函数组件版本（用useQuery Hook） #

如果是新版的@apollo/client，推荐用Hook写法，代码更简洁：

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery } from "@apollo/client";
import gql from 'graphql-tag';

const GET_COUNTERPARTY = gql`
  query {
    counterparty {
      name
    }
  }
`;

// 新版ApolloClient需要配置缓存
const client = new ApolloClient({
  uri: "https://localhost:5000/graphql",
  cache: new InMemoryCache()
});

// 封装查询组件
function CounterpartyDisplay() {
  const { loading, error, data } = useQuery(GET_COUNTERPARTY);
  
  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  
  return <p>Counterparty: {data.counterparty?.name}</p>;
}

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="App">
        <h1>Counterparty Info</h1>
        <CounterpartyDisplay />
      </div>
    </ApolloProvider>
  );
}

export default App;

3. 排查其他潜在问题 #

• 依赖是否安装完整：旧版依赖执行npm install apollo-boost react-apollo graphql graphql-tag；新版用npm install @apollo/client graphql
• 跨域问题：如果React项目和GraphQL服务器端口不同，需要在服务器端配置CORS（比如用cors中间件），不然浏览器会拦截请求
• 查看网络请求：打开浏览器DevTools的Network标签，检查GraphQL请求的状态和响应内容，如果请求返回错误，直接根据响应信息排查

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