VueJs3中如何正确访问Apollo Result对象的返回数据

你拿不到数据是三个核心问题：

• @vue/apollo-composable 的 useQuery 返回的result是Vue响应式Ref对象，脚本里访问必须先取.value，不能直接点属性
• 你写的字段路径完全不对：GraphQL查询返回的根字段是lookupFile，city是lookupFile下的属性，根本不存在result.cities这个字段
• GraphQL请求是异步的，你写的同步读取代码在组件初始化阶段就执行，这时候请求还没返回，result初始值是null，自然读出来是undefined。你在DevTools里能看到数据，是因为你打开调试面板的时候请求已经完成，result已经被赋值了。

脚本部分修正 #

import gql from "graphql-tag";
import { useQuery } from "@vue/apollo-composable";
import { computed, watch } from "vue";
const store = useCaseFileStore();

const FILE_QUERY = gql`
  query File($term: String!) {
    lookupFile(term: $term) {
      id
      author
      city
      state
    }
  }
`;
const term = "101707058976";
const { result, loading, error } = useQuery(FILE_QUERY, {
  term,
})

// 要在脚本里拿city字段，用computed做响应式派生，做空值兼容避免报错
const fileCity = computed(() => {
  return result.value?.lookupFile?.city ?? null
})

// 如果要调试打印数据，不要同步打，用watch监听result变化
watch(result, (newResult) => {
  if (newResult?.lookupFile) {
    console.log('返回的城市数据：', newResult.lookupFile.city)
  }
}, { immediate: true })

模板部分写法 #

模板会自动解包Ref，不需要手动写.value，记得加状态判断避免空值渲染报错：

<template>
  <div v-if="loading">数据加载中</div>
  <div v-else-if="error">请求失败：{{ error.message }}</div>
  <div v-else>
    <p>文件ID：{{ result.lookupFile.id }}</p>
    <p>作者：{{ result.lookupFile.author }}</p>
    <p>所属城市：{{ result.lookupFile.city }}</p>
    <p>所属省份：{{ result.lookupFile.state }}</p>
  </div>
</template>

如果你的查询返回的是列表数据，比如lookupFile返回数组，只需要对应调整遍历逻辑即可，核心逻辑不变：

• 脚本里访问Ref必须加.value
• 字段路径严格和你GraphQL查询定义的结构对齐
• 异步请求的数据必须等加载完成后再访问，不要在初始化同步代码里直接读

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