react-apollo使用报错：this.getClient未定义无法调用watchQuery

看来你踩了 react-apollo 上下文传递的坑，这个报错的核心原因是组件没有正确接入 Apollo 的环境，或者调用方式不符合它的规范。我来帮你拆解问题点和修复方案：

1. 首要检查：是否用 ApolloProvider 包裹了根组件 #

react-apollo 依赖上下文来传递 Apollo Client 实例，如果你的应用根组件没被 ApolloProvider 包裹，所有子组件都拿不到 client，自然会出现找不到方法的报错。

你需要在项目入口文件（比如 index.js）里做如下配置：

import React from 'react';
import ReactDOM from 'react-dom';
import { ApolloProvider } from 'react-apollo';
import { ApolloClient, InMemoryCache, HttpLink } from 'apollo-client';

// 初始化 Apollo Client
const client = new ApolloClient({
  link: new HttpLink({ uri: '你的 GraphQL 接口地址' }),
  cache: new InMemoryCache()
});

// 用 ApolloProvider 包裹根组件，把 client 注入上下文
ReactDOM.render(
  <ApolloProvider client={client}>
    <App /> {/* 你的应用根组件 */}
  </ApolloProvider>,
  document.getElementById('root')
);

2. 检查组件的导出方式是否正确 #

react-apollo 是通过**高阶组件（HOC）**给组件注入 client 或查询数据的，如果你直接导出原始的 Review 组件，没用到 graphql 或 withApollo 包裹，组件的 props 里就不会有 client 实例，也没法调用相关方法。

修复方案一：用 graphql HOC 自动注入查询数据（推荐） #

这种方式会帮你自动执行查询，并把数据、加载状态、错误信息注入到组件 props 中：

import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';

// 定义你的查询
const userInfoQuery = gql`
  query UserInfo {
    user {
      id
      name
      email
    }
  }
`;

class Review extends React.Component {
  render() {
    const { data, loading, error } = this.props;
    
    if (loading) return <div>加载中...</div>;
    if (error) return <div>查询出错：{error.message}</div>;
    
    return (
      <div>
        <h3>用户信息</h3>
        <p>姓名：{data.user.name}</p>
        <p>邮箱：{data.user.email}</p>
      </div>
    );
  }
}

// 关键：用 graphql 高阶组件包裹 Review 后再导出
export default graphql(userInfoQuery)(Review);

修复方案二：用 withApollo HOC 手动注入 client 实例 #

如果你需要自定义调用 watchQuery 这类方法（比如做数据监听），可以用 withApollo 把 client 注入到组件 props 中：

import React from 'react';
import gql from 'graphql-tag';
import { withApollo } from 'react-apollo';

const userInfoQuery = gql`
  query UserInfo {
    user {
      id
      name
    }
  }
`;

class Review extends React.Component {
  componentDidMount() {
    // 从 props 中获取 client，而不是调用不存在的 this.getClient()
    const { client } = this.props;
    
    // 手动调用 watchQuery
    const queryObservable = client.watchQuery({ query: userInfoQuery });
    queryObservable.subscribe({
      next: (result) => console.log('查询结果：', result.data),
      error: (err) => console.error('查询错误：', err)
    });
  }

  render() {
    return <div>Review 页面</div>;
  }
}

// 用 withApollo 包裹组件后导出
export default withApollo(Review);

3. 更现代的方案：函数组件 + useQuery 钩子 #

如果你已经升级到 React 16.8+，更推荐用 Apollo Client 提供的 useQuery 钩子，写法简洁还能避开类组件 this 相关的问题：

import React from 'react';
import gql from 'graphql-tag';
import { useQuery } from '@apollo/client'; // 注意新版 Apollo Client 的导入路径

const userInfoQuery = gql`
  query UserInfo {
    user {
      id
      name
    }
  }
`;

const Review = () => {
  const { loading, error, data } = useQuery(userInfoQuery);

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

  return <div>用户姓名：{data.user.name}</div>;
};

export default Review;

常见错误总结 #

• 忘记用 ApolloProvider 包裹根组件，导致上下文没有 client 实例
• 导出组件时没用到高阶组件包裹，无法获取到 client 或查询数据
• 错误调用了不存在的 this.getClient() 方法，正确方式是从 props 中获取 client

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