Error: use* functions may only be called during the `setup()` or other lifecycle hooks

Question

我里面有这个简单的代码 <script lang='ts' setup>:

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>

Error: use* functions may only be called during the `setup()` or other lifecycle hooks

Error: use* functions may only be called during the `setup()` or other lifecycle hooks

vuejs3

urql

vue3-sfc-loader