React无法连接Graphcool后端：Apollo函数错误及查询字段问题

我来帮你一步步拆解这两个常见的集成问题：

1. 先搞定Uncaught TypeError: (0 , _reactApollo2.default) is not a function #

这个错误基本是因为你用了新版本的Apollo Client（官方已经把旧的react-apollo包合并到@apollo/client里了），但代码还沿用了旧版本的写法。

常见错误场景： #

你可能写了类似这样的导入和使用：

import reactApollo from 'react-apollo'
// 试图用这个默认导出的函数包裹组件
reactApollo(...)

但新版本的@apollo/client里没有这个默认导出的reactApollo函数，而是用命名导出的ApolloProvider和各类钩子（比如useQuery）。

修复步骤： #

• 先更新依赖：

  npm uninstall react-apollo
  npm install @apollo/client graphql
  

• 修正index.js里的Apollo配置，正确写法示例：

  import React from 'react';
  import ReactDOM from 'react-dom';
  import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';
  import App from './App';
  
  // 初始化客户端，替换成你的Graphcool后端地址
  const client = new ApolloClient({
    uri: 'https://your-graphcool-endpoint.com/graphql',
    cache: new InMemoryCache(),
  });
  
  // 用ApolloProvider包裹根组件，把客户端注入整个应用
  ReactDOM.render(
    <ApolloProvider client={client}>
      <App />
    </ApolloProvider>,
    document.getElementById('root')
  );
  

2. 解决IDE提示cannot query field "allGroups" on type "Query" #

这个问题是因为前端没有同步Graphcool后端的Schema，IDE不知道allGroups这个字段的存在。

修复方法（两种可选）： #

方法一：手动同步Schema

• 先安装graphql-cli工具，然后下载后端Schema到前端：

  npm install -g graphql-cli
  # 替换prod为你的Graphcool环境名，指定Schema保存路径
  graphql get-schema -e prod --output src/schema.graphql
  

• 给IDE安装GraphQL插件（比如VSCode的GraphQL插件），让它识别这个本地Schema文件，IDE的错误提示就会消失。

方法二：用代码生成工具自动同步（更推荐）

用@graphql-codegen自动生成类型定义，既能解决IDE报错，还能获得类型提示：

1. 安装依赖：

   npm install -D @graphql-codegen/cli @graphql-codegen/typescript @graphql-codegen/typescript-react-apollo
   

2. 项目根目录创建codegen.yml配置文件：

   schema: https://your-graphcool-endpoint.com/graphql
   documents: './src/**/*.graphql'
   generates:
     src/generated/graphql.tsx:
       plugins:
         - typescript
         - typescript-react-apollo
   

3. 在package.json里添加脚本：

   "scripts": {
     "codegen": "graphql-codegen --config codegen.yml"
   }
   

4. 运行脚本生成类型：

   npm run codegen
   

   之后后端Schema更新时，再跑一次这个脚本就能同步前端类型。

额外检查： #

确保App.js里的查询写法正确，比如用useQuery钩子的示例：

import { useQuery, gql } from '@apollo/client';

const GET_ALL_GROUPS = gql`
  query {
    allGroups {
      id
      description
    }
  }
`;

function App() {
  const { loading, error, data } = useQuery(GET_ALL_GROUPS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.allGroups.map(group => (
        <div key={group.id}>{group.description}</div>
      ))}
    </div>
  );
}

export default App;

按上面的步骤操作，两个问题应该都能解决啦。

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