使用Apollo Client包裹React组件时GraphQL查询报错的解决方法

这个错误我之前用Apollo Client的高阶组件时也踩过坑，本质原因很明确：你的GraphQL查询没有被转换成Apollo能识别的DocumentNode对象，提示里提到的graphql-tag（也就是gql标签）就是用来完成这个转换的关键工具。

下面是具体的解决步骤和注意事项：

1. 正确导入并使用gql标签 #

首先要确认你已经导入了gql，然后必须用它包裹你的GraphQL查询字符串——这是把普通字符串转换成Apollo可识别结构的核心步骤。

给你一个完整的正确示例：

import React, { Component } from 'react';
import { graphql, gql } from 'react-apollo'; // 务必导入gql

// 用gql标签包裹你的查询字符串（注意用反引号`包裹多行内容）
const HOME_DATA_QUERY = gql`
  query FetchHomeData {
    # 这里替换成你的实际查询字段
    articles {
      id
      title
      content
    }
  }
`;

class HomeView extends Component {
  render() {
    const { data: { loading, articles } } = this.props;
    if (loading) return <div>加载中...</div>;
    
    return (
      <div className="home">
        {articles.map(article => (
          <div key={article.id}>{article.title}</div>
        ))}
      </div>
    );
  }
}

// 将经过gql处理的查询作为第一个参数传给graphql高阶组件，再包裹HomeView
export default graphql(HOME_DATA_QUERY)(HomeView);

2. 排查常见错误点 #

• 忘记用反引号包裹查询：gql后面必须跟反引号（`）包裹的多行字符串，不能用普通单/双引号，否则查询的语法结构会被破坏。
• 导入路径错误：如果是较新的Apollo Client版本（比如@apollo/client），gql需要从@apollo/client导入，而不是react-apollo，要注意版本匹配。
• 直接传递未处理的内容：不要把未经过gql转换的字符串或普通对象直接传给graphql函数，Apollo无法识别这种原始格式。

为什么必须用gql？ #

gql标签的作用是把字符串形式的GraphQL查询，解析成Apollo Client内部需要的DocumentNode抽象语法树。只有转换成这种结构，客户端才能正确解析查询、发送请求，以及处理返回的数据。跳过这一步的话，Apollo就无法理解你的查询逻辑，自然会抛出那个错误。

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