如何在React类组件中实现GraphQL API数据访问

你代码中使用的useQuery是Apollo Client面向函数组件提供的Hook API，类组件无需手动封装请求逻辑，直接使用Apollo内置的Query渲染属性组件即可实现完全一致的效果。

方法1：使用Query渲染属性组件（推荐） #

先从依赖包中引入Query组件，将你定义的GraphQL查询语句作为query属性传入，组件的子元素是一个渲染函数，入参结构和useQuery返回值完全一致，包含loading/error/data三个核心状态，直接复用你原有的判断和渲染逻辑即可：

import React from 'react';
import { Query } from '@apollo/client';
// 按你项目原有路径引入CURRENCIES查询、Loader组件

class LinkList extends React.Component {
  render() {
    return (
      <Query query={CURRENCIES}>
        {({ loading, error, data }) => {
          if (loading) return <Loader />;
          if (error) return <pre>{error.message}</pre>;

          return (
            <div className="options">
              {data.currencies.map((currency) => {
                return (
                  <button
                    key={currency}
                    id={currency}
                    className="option"
                  >
                    {currency.symbol}
                    {currency.label}
                  </button>
                );
              })}
            </div>
          );
        }}
      </Query>
    );
  }
}

export default LinkList;

如果你使用的是v3版本之前的旧版react-apollo，只需要把Query的引入路径从@apollo/client换成react-apollo即可，API完全不变。

方法2：使用withQuery高阶组件 #

如果更习惯传统类组件的props获取数据模式，可以用withQuery高阶组件包裹类组件，查询状态会自动注入到组件props中：

import React from 'react';
import { withQuery } from '@apollo/client';
// 按你项目原有路径引入CURRENCIES查询、Loader组件

class LinkList extends React.Component {
  render() {
    const { loading, error, data } = this.props;
    if (loading) return <Loader />;
    if (error) return <pre>{error.message}</pre>;

    return (
      <div className="options">
        {data.currencies.map((currency) => {
          return (
            <button
              key={currency}
              id={currency}
              className="option"
            >
              {currency.symbol}
              {currency.label}
            </button>
          );
        })}
      </div>
    );
  }
}

export default withQuery(CURRENCIES)(LinkList);

两种写法运行效果完全一致，渲染属性写法灵活度更高，高阶组件写法类组件结构更清晰，按需选择即可。

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