从 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 v4Vue 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() 函数中获取上下文父属性?

Vue 3,基于类的API,基于函数的API和组合API的含义

组合式api

多个组件中的 Vue 3 组合 API 重用

Vue 3 可重用错误处理和 handleSubmit 在可重用“useForm”函数中使用组合 api