vue.js - 如何仅按需触发一次graphql useQuery？

Question

在graphql-codegenerator的帮助下，我们创建了一个useQuery从后端正确检索数据的 graphql。当一个字符串被输入到一个输入字段时，该函数driverRule被调用来验证输入，而该函数又应该useQuery只调用一次。

问题

但是，当我们立即执行enable使用 useQuery 的查询时，ref会使用该方法调用第二次执行refetch()。所有后续调用driverRule将仅根据需要调用一次 useQuery。但是第一次调用会执行两次，这是不希望的。

import {computed, defineComponent, ref } from '@vue/composition-api'
import { useSapTruckRosterDriverQuery } from 'src/graphql/generated/operations'

export default defineComponent({
  setup(_, { emit }) {
    const showTruckId = ref(false)
    const driverId = computed(() => (!showTruckId.value ? answer.value : ''))
    const queryEnabled = ref<'driver' | 'truck'>()

    const { refetch: getDriverQuery } = useSapTruckRosterDriverQuery(
      () => ({ id: driverId.value }),
      () => ({ enabled: queryEnabled.value === 'driver' })
    )

    const driverRule = async (value: string) => {
      queryEnabled.value = 'driver'

      const result = await getDriverQuery({ id: value })

      if (result.data.driver.__typename === 'DriverArray') {
        return result.data.driver.data?.length ? true : 'Truck not found'
      }
    }

我们尝试了什么：

• useQuery在函数内移动，driverRule但这会产生以下错误：

[Vue 警告]：当没有要关联的活动组件实例时调用 onServerPrefetch。生命周期注入 API 只能在 setup() 执行期间使用。

• 带选项的 useQueryemabled: false且仅refetch()在driverRule. 这根本不执行 useQuery

解决方法

接受默认行为并默认使用静态变量值启用查询，并且不使用第一次运行的结果，而仅使用refetch(). 虽然这仍然会导致对后端的 2 次调用，但这是无法避免的。

    const { refetch: getDriverQuery } = useSapTruckRosterDriverQuery(
      { id: 'initialQueryActivationCall' }
    )

    const driverRule = async (value: string) => {
      const result = await getDriverQuery({ id: value })
      if (result.data.driver.__typename === 'DriverArray') {
        return result.data.driver.data?.length ? true : 'Truck not found'
      }
    }

问题

useQuery在调用函数时只调用一次似乎真的很难driverRule。当后端只需要 1 个调用时，我们如何避免进行 2 个调用？

标签： vue.jsgraphqlvue-componentapollo-clientvue-composition-api