Vue Apollo中带computed参数的请求如何设置跳过或等待参数就绪规则

解决方案 #

核心问题是你给enabled配置的是固定布尔值，只在初始化useQuery时计算一次，不会跟随params的响应式变化更新，同时提前返回会跳过useQuery初始化，自然没有后续的自动请求逻辑。

修正后的useGraphQuery代码 #

import { computed, isRef } from "@vue/composition-api";
import { useQuery, useResult } from "@vue/apollo-composable";

export function useGraphQuery(params, gql, pathFn, clientId = "apiClient") {
  // 构造响应式的启用判断，自动跟随params变化更新
  const enabled = computed(() => {
    // 兼容ref和普通值两种入参场景
    const paramVal = isRef(params) ? params.value : params;
    return !!paramVal;
  });

  const { result, loading, error, query, fetchMore } = useQuery(gql, params, {
    clientId,
    enabled: enabled, // 传入响应式判断变量
  });
  const response = useResult(result, null, pathFn);

  return { response, loading, error, query, fetchMore };
}

逻辑说明 #

• @vue/apollo-composable 4.x版本的useQuery的enabled选项支持传入响应式变量，当enabled从false变为true时，会自动触发查询
• 无需提前返回空ref，保留useQuery的初始化逻辑即可自动监听参数变化
• 当你的params（computed返回的ref）值为undefined时，enabled自动变为false跳过请求；当路由参数更新，params计算出有效值后，enabled变为true自动触发查询

如果你使用的是3.x版本的@vue/apollo-composable，没有enabled选项，替换配置为skip: computed(() => !enabled.value)即可，逻辑完全一致。

内容的提问来源于stack exchange，提问作者r3plica