Nuxt3中useAsyncQuery返回null：浏览器与终端表现不一致问题

现象原因拆解 #

1. 浏览器console的惰性求值特性
   当你直接console.log(data)（data是Nuxt返回的响应式ref对象）时，浏览器会先记录这个对象的引用，但显示的是执行console.log瞬间的快照——此时客户端数据同步还未完成，所以value显示为null。当你点击展开箭头查看详情时，浏览器会实时读取这个对象的最新状态，这时候数据已经加载完成，所以能看到正确的value值。

2. Nuxt3 SSR与客户端hydration的差异

   • 服务端执行代码时，await useAsyncQuery会等待GraphQL请求完全结束，data.value已经被赋值为查询结果，所以终端（服务端日志）能打印正确数据。
   • 客户端hydration阶段，组件会重新执行代码，虽然useAsyncQuery会复用服务端预取的数据，但这个同步过程是异步的。当你直接console.log(data.value)时，客户端还没完成数据同步，所以输出null；而setTimeout延迟100ms后，hydration完成，data.value已经更新，因此能打印正确结果。

修正建议 #

不需要用setTimeout这种不可靠的方式，推荐用以下两种方式处理：

• 监听响应式数据变化：用watch监听data，确保数据更新后再执行逻辑

<script setup>
const { data, error, refresh } = await useAsyncQuery({
    query: GetProjectByID,
    variables: { id: 1 },
});

watch(data, (newData) => {
  if (newData) {
    console.log(newData);
  }
}, { immediate: true }); // immediate: true 会在初始化时立即执行一次
</script>

• 客户端挂载后执行：在onMounted中打印，此时客户端hydration已完成，数据已同步

<script setup>
const { data, error, refresh } = await useAsyncQuery({
    query: GetProjectByID,
    variables: { id: 1 },
});

onMounted(() => {
  console.log(data.value);
});
</script>

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