Nuxt3中NuxtApollo的useQuery正确使用方法咨询

你遇到的问题本质是对useQuery的设计逻辑不熟悉——它是响应式异步查询，返回的result是一个ref，初始值就是undefined，因为查询是异步发起的，不会阻塞当前代码执行，所以同步读取result.value肯定拿不到数据。

以下是几种标准的正确用法：

1. 直接在模板中使用（推荐） #

利用Vue的响应式自动更新特性，模板会追踪result的变化，无需手动赋值：

<template>
  <!-- 加载状态提示 -->
  <div v-if="loading">加载中...</div>
  <!-- 错误提示 -->
  <div v-else-if="error">查询失败：{{ error.message }}</div>
  <!-- 渲染数据 -->
  <div v-else>
    {{ result.value?.data }}
  </div>
</template>

<script setup>
import { useQuery } from '@nuxtjs/apollo'
// 导入你的GraphQL查询
import myQuery from '~/graphql/MyQuery.gql'

// 定义查询变量
const queryVariables = { id: 123 }

// 调用useQuery，解构出响应式状态
const { result, loading, error } = useQuery(myQuery, queryVariables)
</script>

2. 在逻辑中处理数据（用watchEffect） #

如果需要在JavaScript逻辑中处理查询结果，watchEffect是比手动watch更简洁的方式，它会自动追踪result的变化：

import { useQuery, watchEffect } from '@nuxtjs/apollo'
import myQuery from '~/graphql/MyQuery.gql'

const myVal = ref(null)
const { result } = useQuery(myQuery, { id: 123 })

watchEffect(() => {
  // 当result.value有值时执行
  if (result.value) {
    myVal.value = result.value.data
    console.log('查询结果：', result.value)
  }
})

3. 等待查询完成（同步逻辑场景） #

如果必须在同步逻辑中等待查询完成，可以用@vueuse/core的until工具，等待result变为真值：

import { useQuery } from '@nuxtjs/apollo'
import { until } from '@vueuse/core'
import myQuery from '~/graphql/MyQuery.gql'

const myVal = ref(null)

const testQuery = async () => {
  const { result } = useQuery(myQuery, { id: 123 })
  // 等待result.value有值
  await until(result).toBeTruthy()
  
  myVal.value = result.value.data
  console.log('查询结果：', result.value)
}

// 调用方法（比如在按钮点击时）
// testQuery()

补充说明 #

useQuery是NuxtApollo推荐的核心查询方式，它会自动管理查询的生命周期：

• 组件挂载时自动发起查询
• 当查询变量变化时自动重新查询
• 组件卸载时自动取消未完成的查询

所以不要试图用同步方式直接获取结果，而是拥抱响应式特性，结合loading/error状态来构建UI，或者用watchEffect/until处理逻辑。

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