如何在React类组件中使用Apollo Client查询数据并渲染Header导航分类？

Apollo 为类组件提供了原生适配方案，无需使用 Hook 即可完成 GraphQL 查询调用，你现有的index.js、App.js已经正确配置了ApolloProvider无需修改，直接调整Header.js即可，以下是两种可选实现方式：

方案1：使用内置<Query>组件（推荐新手使用） #

无需手动管理查询生命周期，代码更简洁：

import { Component } from 'react';
import { Query, gql } from '@apollo/client';

// 导航分类查询语句
const QUERY = gql`
  query getCategories {
    categories {
      name
    }
  }
`;

class Header extends Component {
  render() {
    return (
      <header>
        <Query query={QUERY}>
          {/* 回调接收查询状态与结果 */}
          {({ loading, error, data }) => {
            // 加载中状态处理
            if (loading) return <div>导航加载中...</div>;
            // 错误状态处理
            if (error) return <div>导航加载失败：{error.message}</div>;
            // 拿到数据后遍历渲染分类项
            return (
              <ul className="nav-list">
                {data.categories.map((category, index) => (
                  <li key={index} className="nav-item">
                    {category.name}
                  </li>
                ))}
              </ul>
            );
          }}
        </Query>
      </header>
    )
  }
}

export default Header;

方案2：使用withApollo高阶组件手动控制查询 #

适合需要自定义查询触发时机的场景，比如组件挂载、用户交互后才发起请求：

import { Component } from 'react';
import { withApollo, gql } from '@apollo/client';

const QUERY = gql`
  query getCategories {
    categories {
      name
    }
  }
`;

class Header extends Component {
  state = {
    categories: [],
    loading: true,
    error: null
  }

  componentDidMount() {
    // 组件挂载后手动发起查询
    this.props.client.query({
      query: QUERY
    }).then(res => {
      this.setState({
        categories: res.data.categories,
        loading: false
      })
    }).catch(err => {
      this.setState({
        error: err,
        loading: false
      })
    })
  }

  render() {
    const { loading, error, categories } = this.state;
    if (loading) return <div>导航加载中...</div>;
    if (error) return <div>导航加载失败：{error.message}</div>;
    return (
      <header>
        <ul className="nav-list">
          {categories.map((category, index) => (
            <li key={index} className="nav-item">
              {category.name}
            </li>
          ))}
        </ul>
      </header>
    )
  }
}

// 用withApollo包裹组件注入client实例
export default withApollo(Header);

• 上述代码中遍历分类时用index作为key仅为示例，若categories返回数据包含唯一id字段，建议替换为key={category.id}获得更好的渲染性能。

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