当 ref 随 vue 组合 api 发生变化时，如何触发 graphql 查询？

Posted 2023-03-08

【中文标题】当 ref 随 vue 组合 api 发生变化时，如何触发 graphql 查询？

【英文标题】：How to trigger a graphql query when a ref changes with the vue composition api?

【发布时间】：2021-01-16 04:52:47

【问题描述】：

使用graphql Vue code generator，我们创建了以下返回应用首选项的工作查询：

const  result, loading, error  = useViewerQuery()
const preference = useResult(result, null, (data) => data.viewer.preference)

我们希望在用户在MainLayout.vue 组件中通过身份验证后仅获取一次首选项，因此我们可以使用基于loading 引用的微调器，然后才能以正确的用户语言呈现完整的 UI （来自偏好）。

我们遇到的问题是只有在 MainLayout.vue 设置函数中将 ref isAuthenticated 设置为 true 时才会触发 userViewerQuery。当 loading 和 error 引用在 watchEffect 函数中时，我们似乎无法公开它们。

// MainLayout.vue
<script>
import  defineComponent, watchEffect  from '@vue/composition-api'
import  isAuthenticated  from 'src/store/authStore'
import  useViewerQuery  from 'src/graphql/generated/operations'

export default defineComponent(
  setup(_,  root ) 
    watchEffect(() => 
      if (isAuthenticated.value === true) 
        const  result, loading, error  = useViewerQuery()
      
    )

    return 
      isAuthenticated,
      loading,
      error,
    
  ,
)
</script>

稍后我们只想使用在Settings.vue 组件中检索到的首选项。因为它们已经被提取，所以偏好的数据应该被缓存并且随时可用：

// Settings.vue
const  result  = useViewerQuery()
const preference = useResult(result, null, (data) => data.viewer.preference)

也许我们以错误的方式处理这个问题。欢迎任何帮助或建议。

【参考方案1】：

感谢this tip，我想通了。将 useQuery 与 Vue Apollo 一起使用时，an option 称为 enabled，用于定义查询是否运行。

来自文档：

const enabled = ref(false)

const  result  = useQuery(gql`
  ...
`, null, () => (
  enabled: enabled.value,
))

function enableQuery () 
  enabled.value = true

将此逻辑应用于我自己的情况，我只希望在用户登录并且引用 isAuthenticated 设置为 true 时运行查询：

export default defineComponent(
  setup(_,  root ) 
    const  result, loading, error  = useViewerQuery(() => (
      enabled: isAuthenticated.value,
    ))

    watchEffect(() => 
      console.log('MainLayout isAuthenticated: ', isAuthenticated.value)
    )
    watchEffect(() => 
      console.log('MainLayout result: ', result.value)
    )

    return 
      isAuthenticated,
      loading,
      error,
    
  ,

我希望这可以帮助其他有类似问题的人。

【参考方案2】：

我认为您可以扩大 refs 的范围并添加一个调用 gql 端点的属性。比如……

export default defineComponent(
  setup() 
    const  result, loading, error, call  = useViewerQuery()
    watchEffect(async () => 
      if (isAuthenticated.value) 
          await call()
      
    )

    return 
      isAuthenticated,
      loading,
      error
    
  
)

【讨论】：

我尝试了您的建议，但 useViewerQuery() 始终被执行并且不返回用作调用者的函数。 useMutaton 具有 this functionality 和 mutate 功能，但 useQuery does not。