如何在方法内调用tanstack的vue-query get请求？

Question

我需要查询 API 作为操作的副作用，并且我正在尝试使用 @tanstack/vue-query。每当我尝试在函数内调用 useQuery 时，它都会抛出错误，

vue-query hooks can only be used inside setup() function or functions that support injection context.

例如：

api.js

export const getAPIRequest = (url, params={}) => useQuery({
    queryKey: [url, params],
    queryFn: fetch(url, {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json'
        },
    })
})

组件.vue

<script setup>
const getDetails = () => {
    const { data: data } = getAPIRequest('/some-url')
    return data
}
</script>

<template>
    <button @click="getDetails">Click Here</button>
</template>

我试图找到一种更好的方法从函数内部查询 API，但我得出的结论是 vue-query 只能从设置函数中调用。我遇到的一个 hack 在这个 github 讨论中得到了回答thread。

我们真的只能在 setup 函数中使用 vue-query 吗？如果属实，我不确定应该如何构建我的项目。我必须设计来自按钮单击或打字的副作用。我应该将这些副作用移至 POST 请求以避免这种情况还是有更好的方法？

我想继续使用 @tanstack/vue-query，因为它具有缓存、后台更新数据、反应式响应等等。还有更好的选择吗

Answer 1

您应该使用

useQueryClient

与缓存交互。

当然，例如，您必须在设置或可组合项中声明

useQuery

。

这样，您就可以获取、重新获取、使缓存无效以及您想要使用的其他方法。