Apollo GraphQL查询数据在Vue组件无法访问：缺失analytics属性

场景说明 #

已编写Apollo GraphQL查询，在Altair中可正常执行并返回目标数据，但在Vue视图组件中访问嵌套数据时，即使添加了条件渲染仍报错"Missing analytics attribute on result"，控制台却能看到目标数据结构。

1. Apollo查询代码 #

apollo: {
    analytics: gql `
        query getAnalyticsViews {
            viewer {
                zones(filter: { zoneTag: "tag" }) {
                    httpRequestsAdaptiveGroups(
                        filter: {
                            clientRequestHTTPHost: "domain.co.uk"
                            date_geq: "2023-01-01"
                            date_leq: "2023-01-24"
                            requestSource: "eyeball"
                        }
                        limit: 1
                    ) {
                        sum {
                        visits
                        edgeResponseBytes
                        }
                    }
                }
            }
        }
    `
}

2. 查询返回结果 #

{
  "data": {
    "viewer": {
      "zones": [
        {
          "httpRequestsAdaptiveGroups": [
            {
              "sum": {
                "edgeResponseBytes": 4542764000,
                "visits": 1200
              }
            }
          ]
        }
      ]
    }
  },
  "errors": null
}

3. Vue组件中访问数据的代码 #

<div v-if="analytics">
    {{ analytics.viewer.zones[0].httpRequestsAdaptiveGroups[0].sum.visits }}
</div>

解决方案 #

1. 使用可选链操作符规避深层嵌套空值
   直接访问多层嵌套属性时，若某一层数据未加载完成（比如异步请求过程中），会触发报错。改用可选链操作符，确保某一层为undefined时不会抛出错误：

<div v-if="analytics">
    {{ analytics.viewer?.zones?.[0]?.httpRequestsAdaptiveGroups?.[0]?.sum?.visits }}
</div>

2. 结合Apollo加载状态控制渲染
   利用Vue Apollo提供的查询状态，更精准判断数据是否就绪，避免在加载阶段访问未初始化的属性：

<div v-if="!$apollo.queries.analytics.loading">
    {{ analytics?.viewer?.zones?.[0]?.httpRequestsAdaptiveGroups?.[0]?.sum?.visits }}
</div>
<div v-else>加载中...</div>

3. 校验变量名与数据映射
   确认apollo选项中定义的analytics变量名，与模板、组件中引用的名称完全一致，无拼写错误。

4. 调试数据实际结构
   在组件生命周期钩子中打印analytics，确认实际数据结构是否与预期一致：

mounted() {
    console.log('Analytics实际数据:', this.analytics);
}

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