从 Vue 3 组合 API 中的函数内部返回 Apollo useQuery 结果
Posted
技术标签:
【中文标题】从 Vue 3 组合 API 中的函数内部返回 Apollo useQuery 结果【英文标题】:Returning Apollo useQuery result from inside a function in Vue 3 composition api 【发布时间】:2021-11-05 13:34:02 【问题描述】:我在寻找一种使用 Apollo v4 和 Vue 3 组合 API 将结果从方法内部返回到我的模板的干净方法时遇到了一些问题。
这是我的组件:
export default
components:
AssetCreationForm,
MainLayout,
HeaderLinks,
LoadingButton,
DialogModal
,
setup()
const showNewAssetModal = ref(false);
const onSubmitAsset = (asset) =>
// how do I access result outside the handler function
const result = useQuery(gql`
query getAssets
assets
id
name
symbol
slug
logo
`)
;
return
showNewAssetModal,
onSubmitAsset,
,
onSubmitAsset
在用户点击页面上的按钮时被调用。
如何从设置函数返回 useQuery result
以便能够在模板中访问它?(我不想复制值)
【问题讨论】:
【参考方案1】:您可以将useQuery()
移到提交方法之外,如shown in the docs。如果您想推迟查询获取直到调用提交方法,您可以通过传递enabled:false
作为选项(useQuery
的第三个参数)来禁用自动启动:
export default
setup()
const fetchEnabled = ref(false)
const result = useQuery(gql`...`, null, enabled: fetchEnabled )
const onSubmitAsset = (asset) =>
fetchEnabled.value = true
return result, onSubmitAsset
demo
【讨论】:
非常感谢。以上是关于从 Vue 3 组合 API 中的函数内部返回 Apollo useQuery 结果的主要内容,如果未能解决你的问题,请参考以下文章
尝试使用 Vue 3 组合 API 和 Firebase 返回随机帖子
Vue 3 组合 API,如何在 setup() 函数中获取上下文父属性?