使用await useAsyncQuery()在浏览器中返回null，但在console.log(data.value)时在终端中显示数据值

Question

我正在使用 Nuxt 3 并使用 Apollo 和 graphQL 从 Strapi 获取数据。 我过去曾在 Prepr 中使用过类似的设置，没有出现任何问题。

我的 GraphQL 查询是正确的并且正在返回数据，但问题在于时间。这是我在 Nuxt 页面中使用的代码

<script setup>

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

setTimeout(() => {
  console.log(data)
}, 100);
  console.log(data)

在下面的屏幕截图中，您可以看到这 2 个控制台日志。在第一个日志中，refImpl 将值显示为 null，但是当我展开它时，我可以看到 value 中有一个对象

如果我使用

console.log(data.value)

我在浏览器中得到 null，但我在开发终端中得到正确的对象

我做错了什么？这种行为的原因是什么？

非常感谢任何帮助。谢谢！

Answer 1

经过一番调试，我找到了问题所在。在我的前端我安装了这 3 个软件包

    "@nuxtjs/apollo": "^5.0.0-alpha.7",
    "graphql": "^15.8.0",
    "graphql-tag": "^2.12.6",

[email protected]

已作为

nuxtjs/apollo

的依赖项安装。所以， 当我卸载

graphql

和

graphql-tag

将

"@nuxtjs/apollo": "^5.0.0-alpha.7"

留在我的 package.json 中时，我开始毫无问题地获取数据。 这可能是版本冲突，但至少现在工作正常。