React项目调用TfL API遇GraphQL语法错误，求问题排查

错误根源 #

你的语法错误完全来自类型定义（Type Defs）里的Query类型声明。GraphQL规范明确要求，type Query作为根查询类型，不能直接在后面跟($arrival: String!)这种变量定义，这是不符合语法规则的，这就是抛出Unexpected "("错误的直接原因。

正确的逻辑是：根查询类型的字段（比如getArrivals）需要单独定义参数，而非在type Query级别添加变量。

修正后的类型定义 #

把你的typeDefs修改为以下形式，移除type Query后的变量声明，将参数移到getArrivals字段上：

const typeDefs = `
  type Station {
    id: String!
    stationName: String
    lineId: String
    lineName: String
    platformName: String
    direction: String
    timestamp: String
    timeToStation: Int
    currentLocation: String
    towards: String
    expectedArrival: String
    modeName: String
  }
  
  type Query {
    getArrivals(id: String!): [Station]
    station: [Station]
  }
`;

关于“之前能运行”的解释 #

大概率是之前的代码没有这个语法错误，或者服务缓存了旧的类型定义。一旦重启服务、刷新缓存，GraphQL的语法校验就会触发，暴露这个不符合规范的写法。

查询语句无需修改 #

你的GET_ALL_ARRIVALS查询语句是完全正确的，它正确定义了查询变量$id并传递给getArrivals字段，不需要做任何调整。

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