React Apollo配置问题：调用GraphQL查询时出现网络错误

看你的问题描述，核心问题其实出在Apollo客户端的配置和查询语句上，咱们一步步来修复：

1. 修正Apollo客户端的API端点 #

你现在把Apollo的请求地址指向了/graphiql，这是GraphQL的可视化调试界面地址，而真正处理API请求的端点应该是/graphql（这是Rails GraphQL默认挂载的路径）。

你的index.js里这段配置需要修改：

// 原来的错误配置
const httpLink = createHttpLink({ uri: 'http://localhost:3000/graphiql' })

// 修改为正确的API端点
const httpLink = createHttpLink({ uri: 'http://localhost:3000/graphql' })

服务器报错No route matches [OPTIONS] "/graphiql"的原因是：浏览器发起CORS预检请求（OPTIONS方法）到/graphiql，但你的Rails路由里只给/graphiql配置了GET请求（用于显示UI），没有处理OPTIONS请求，所以抛出路由错误。而直接访问/graphiql是GET请求，所以能正常打开。

2. 修正GraphQL查询语句 #

你的查询语句存在语法问题，当前写法不符合GraphQL规范，正确的写法应该指定根查询字段（比如posts列表）后再取子字段：

import gql from 'graphql-tag';

const queries = {
  posts: gql`
    query GetPosts {
      posts {
        title
      }
    }
  `,
}

export default queries;

这样Apollo才能正确解析查询，获取到posts列表中的title字段。

3. 额外检查：Rails的CORS配置 #

如果修改完端点后仍有网络错误，需要确认你的Rails项目是否配置了CORS支持：

• 添加rack-cors gem到Gemfile，执行bundle install
• 在config/initializers/cors.rb中配置允许跨域请求：

Rails.application.config.middleware.insert_before 0, Rack::Cors do
  allow do
    origins 'http://localhost:3000' # 你的React客户端地址
    resource '*',
      headers: :any,
      methods: [:get, :post, :put, :patch, :delete, :options, :head]
  end
end

配置完成后重启Rails服务器即可。

做完这些修改，你的Apollo客户端应该就能正常调用GraphQL接口了。

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