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

【问题标题】：How to trigger a graphql query when a ref changes with the vue composition api?当 ref 随 vue 组合 api 发生变化时，如何触发 graphql 查询？
【发布时间】：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)

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

【问题讨论】：

标签： javascript typescript vue.js graphql vue-component

【解决方案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。