使用Vue-apollo调用GraphQL接口报错：无法查询Query类型的id字段

Hey there! Let's break down what's causing this error and fix it right away.

问题根源 #

你收到的报错核心问题是查询结构不符合后端GraphQL API的Schema定义：

• GraphQL查询必须从根类型（这里是Query类型）的可用字段开始，你的后端API的Query类型里并没有id、title这些字段，而是暴露了products这个根查询字段。
• 你现在把id、title这类子字段直接写在了根Query的层级下，相当于告诉服务器"从Query类型获取id字段"，但服务器根本不支持这个操作，所以抛出了错误。

修正后的查询代码 #

调整查询的嵌套结构，先声明根查询字段products，再在它的内部定义要获取的子字段：

apollo: {
  products: {
    query: gql`
      query products($currency: Currency) {
        products {  # 先指定根Query下的products字段
          id
          title
          image_url
          price(currency: $currency)
        }
      }
    `,
    variables: {
      currency: "USD",
    },
  },
}

额外小提示 #

• 可以通过后端提供的GraphQL Playground或者Introspection查询，查看API的完整Schema，明确根Query类型的可用字段，以及每个字段返回类型的子字段列表，从根源避免这类结构错误。
• 写GraphQL查询时，记得始终遵循"根字段 -> 子字段"的嵌套逻辑，每个层级的字段都要对应Schema里定义的类型。

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