Vue3组合式API下Apollo查询结果访问属性报错问题

核心是异步请求初始阶段的空值访问错误：

• useQuery 发起的GraphQL请求是异步的，组件首次渲染时请求还未返回，此时result.value为undefined
• 原有计算属性result.value?.entities[0]中，可选链仅对result.value做了空值判断：当result.value为undefined时，result.value?.entities返回undefined，后续直接访问[0]下标，相当于读取undefined[0]，直接触发JS运行时错误，导致Vue渲染函数执行中断、页面白屏。
• 直接渲染{{client}}不报错的原因是：Vue模板渲染undefined值时会直接输出空内容，不会访问其内部属性；一旦主动访问.address、.name这类属性，就会触发空值读取错误。

另外代码存在一个隐藏问题：给useQuery传参时直接取了id.value的静态值，后续路由参数id变化时，不会自动重新触发查询。

1. 补全计算属性的可选链判断，覆盖所有可能为空的层级：

// 原错误写法
// const client = computed(() => result.value?.entities[0])
// 修复后
const client = computed(() => result.value?.entities?.[0])

补全后，只要链路中任意一层值为null/undefined，整个表达式就会返回undefined，不会抛出访问错误。

2. （推荐）结合加载状态做渲染拦截，从根源避免空值访问，同时提升体验：

// 从useQuery中解构loading状态
const { result, loading } = useQuery(clientEntity, () => ({
  id: id.value,
}))
const client = computed(() => result.value?.entities?.[0])

return {
  client,
  result,
  loading
}

模板中通过v-if控制渲染时机：

<template>
  <div v-if="loading">客户信息加载中...</div>
  <div v-else>
    <p>客户名称：{{ client.name }}</p>
    <p>客户地址：{{ client.address }}</p>
    <p>备注：{{ client.notes || '无' }}</p>
  </div>
</template>

如果不想用loading做整体拦截，也可以在属性访问时加兜底值：

<p>客户名称：{{ client?.name ?? '加载中' }}</p>

3. 修正useQuery的参数传值方式，保证路由参数变化时能自动重新拉取数据：

注意：给useQuery传静态对象时，Vue Apollo不会追踪对象内部属性的变化，只有传入返回参数对象的函数，才能自动响应id的变化重新发起请求

// 原错误写法 传静态对象，id变化不会重新查询
// const { result } = useQuery(clientEntity,{
//   id: id.value,
// })
// 修复后
const { result, loading } = useQuery(clientEntity, () => ({
  id: id.value,
}))

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