错误：use* 函数只能在 `setup()` 或其他生命周期挂钩期间调用

Question

我在

let isServiceAlive = true;
let articles: IArticle[] = ref(null);

onMounted(async () => 
{
    await loadServiceStatus()

    if (isServiceAlive == false)
        return

    await loadArticles()
})

async function loadServiceStatus()
{
    const { data } = await useQuery(
    { 
        query: GetIsServiceAlive 
    })

    isServiceAlive = data.value.alive
}

async function loadArticles()
{
    const { data } = await useQuery(
    {
        query: GetArticlesQuery
    })

    articles.value = data.value.articles
}

我认为它没有本质上的错误，但它会弹出此错误：

Uncaught (in promise) Error: use* functions may only be called during the `setup()` or other lifecycle hooks.
    at useClient (useClient.ts?f3e5:28:1)
    at callUseQuery (useQuery.ts?cc4d:72:1)
    at useQuery (useQuery.ts?cc4d:64:1)
    at loadPosts (Index.vue?a170:39:1)
    at eval (Index.vue?a170:24:1)

一旦我删除至少一个，它就会消失调用 loadArticles 或 loadServiceStatus - 这会适得其反。

Answer 1

我找到了一个解决方案，它不是您应该对 urql 采取的默认方法 - 但如果您不想环绕反应式对象来访问从查询返回的单个属性，那么这是您想要的唯一方法。

<script lang='ts' setup>
import { IArticle } from '@/services'
import { ref } from 'vue'
import { GetIsServiceAliveQuery } from './queries/GetIsServiceAliveQuery'
import { GetArticlesQuery } from './queries/GetArticlesQuery'
import { useQuery } from '@urql/vue'
import Article from './Article.vue'

let articles = ref(null)
let serviceAvailable = ref(false);

useQuery(
{
    query: GetIsServiceAliveQuery
})
.then(result => serviceAvailable.value = result.data.value.alive)

useQuery(
{
    query: GetArticlesQuery
})
.then(result => articles.value = result.data.value.articles)
</script>