如何在React JS类组件中使用useQuery？Query标签已废弃

1. 直接调用Apollo Client实例的query方法 #

如果项目基于Apollo Client，可在类组件的生命周期方法（如componentDidMount）里直接调用客户端的query方法发起请求，手动管理数据、加载状态与错误。

示例代码：

import React from 'react';
import { ApolloClient } from '@apollo/client';

class YourClassComponent extends React.Component {
  state = {
    data: null,
    loading: true,
    error: null
  };

  async componentDidMount() {
    // 若已通过ApolloProvider注入客户端，可通过Context获取，无需重复实例化
    const client = new ApolloClient({ /* 你的客户端配置 */ });
    try {
      const { data } = await client.query({
        query: YOUR_GRAPHQL_QUERY, // 替换为你的查询语句
        variables: { /* 查询变量（可选） */ }
      });
      this.setState({ data, loading: false });
    } catch (error) {
      this.setState({ error, loading: false });
    }
  }

  render() {
    const { loading, error, data } = this.state;
    if (loading) return <div>加载中...</div>;
    if (error) return <div>请求出错：{error.message}</div>;
    
    return (
      <div>
        {/* 根据data渲染UI */}
      </div>
    );
  }
}

2. 封装高阶组件(HOC)复用查询逻辑 #

自己实现一个高阶组件，将查询逻辑封装其中，把数据、加载状态等作为props传递给类组件，方便多组件复用。

示例代码：

import React from 'react';
import { ApolloClient } from '@apollo/client';

const withQuery = (targetQuery, queryVariables) => (WrappedComponent) => {
  return class extends React.Component {
    state = {
      data: null,
      loading: true,
      error: null
    };

    async componentDidMount() {
      const client = new ApolloClient({ /* 客户端配置 */ });
      try {
        const { data } = await client.query({
          query: targetQuery,
          variables: queryVariables
        });
        this.setState({ data, loading: false });
      } catch (error) {
        this.setState({ error, loading: false });
      }
    }

    render() {
      return <WrappedComponent {...this.props} {...this.state} />;
    }
  };
};

// 使用方式
class YourComponent extends React.Component {
  render() {
    const { loading, error, data } = this.props;
    // 渲染逻辑
  }
}

export default withQuery(YOUR_GRAPHQL_QUERY, { /* 变量 */ })(YourComponent);

3. 自定义Render Props组件 #

模拟官方废弃的Query组件逻辑，实现一个自定义的Render Props组件，类组件可通过该组件的子函数获取查询状态与数据。

示例代码：

import React from 'react';
import { ApolloClient } from '@apollo/client';

class CustomQuery extends React.Component {
  state = {
    data: null,
    loading: true,
    error: null
  };

  async componentDidMount() {
    const client = new ApolloClient({ /* 客户端配置 */ });
    try {
      const { data } = await client.query({
        query: this.props.query,
        variables: this.props.variables
      });
      this.setState({ data, loading: false });
    } catch (error) {
      this.setState({ error, loading: false });
    }
  }

  render() {
    return this.props.children(this.state);
  }
}

// 在类组件中使用
class YourClassComponent extends React.Component {
  render() {
    return (
      <CustomQuery query={YOUR_GRAPHQL_QUERY} variables={{ /* 变量 */ }}>
        {({ loading, error, data }) => {
          if (loading) return <div>加载中...</div>;
          if (error) return <div>请求失败</div>;
          return <div>渲染数据内容</div>;
        }}
      </CustomQuery>
    );
  }
}

优化提示 #

若项目已通过ApolloProvider全局注入客户端，可通过React Context直接获取实例，无需重复创建：

import { ApolloContext } from '@apollo/client';

class YourComponent extends React.Component {
  static contextType = ApolloContext;
  
  async componentDidMount() {
    const client = this.context;
    // 后续查询逻辑
  }
}

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