Vue3 Apollo Client中useLazyQuery重复加载数据问题求助

问题分析 #

你遇到的问题是useLazyQuery的load()方法首次调用返回Promise，后续调用返回false，而使用refetch()时因为没有传入新参数，导致一直返回旧结果。核心原因：

• useLazyQuery初始化时传入的variables不会自动响应configCategory/configSettingName的变化，即使依赖的computed值更新，Apollo也不会自动使用新变量发起请求。
• 直接调用无参数的refetch()会复用之前的变量，自然拿不到新数据。

解决方案 #

直接在每次调用时给refetch()传入最新的查询变量，跳过load()的返回值判断逻辑，确保每次请求都用最新参数：

const { refetch } = useLazyQuery(
  configSettingsQuery,
  {}, // 初始化无需传入变量
  { fetchPolicy: 'no-cache' }
);

const getSetting = async (
  settingName: string,
  settingCategory: SettingCategory
): Promise<string | number | boolean | undefined> => {
  // 构造最新的查询路径
  const currentPath = `/sitecore/content/ABC/BCD/Settings/Config Settings Folder/${settingCategory}/${settingName}`;
  
  // 传入新变量调用refetch，直接获取最新结果
  const result = await refetch({ path: currentPath });
  
  const setting = result.data?.item?.fields?.filter((x: any) => x.name === 'Value')[0]?.value;
  if (setting) {
    const lowerSetting = setting.toLowerCase();
    // 处理布尔值
    if (lowerSetting === 'true' || lowerSetting === 'false') {
      return lowerSetting === 'true';
    }
    // 处理数字
    const numValue = parseFloat(setting);
    if (!isNaN(numValue)) {
      return numValue;
    }
    // 返回原始字符串
    return setting;
  }
  return;
};

补充说明 #

如果坚持使用load()方法，需要每次调用时传入最新变量，同时通过useLazyQuery返回的result对象监听数据变化，但这种方式无法同步获取结果，更适合响应式场景：

const { load, result } = useLazyQuery(
  configSettingsQuery,
  {},
  { fetchPolicy: 'no-cache' }
);

const getSetting = async (
  settingName: string,
  settingCategory: SettingCategory
): Promise<string | number | boolean | undefined> => {
  const currentPath = `/sitecore/content/ABC/BCD/Settings/Config Settings Folder/${settingCategory}/${settingName}`;
  
  // 传入新变量触发查询
  load(undefined, { path: currentPath });
  
  // 等待查询完成
  await new Promise(resolve => {
    const unwatch = watch(result, (newResult) => {
      if (newResult.data || newResult.error) {
        unwatch();
        resolve(true);
      }
    });
  });
  
  const setting = result.value?.data?.item?.fields?.filter((x: any) => x.name === 'Value')[0]?.value;
  // 后续类型转换逻辑同上
};

显然第一种方案更贴合你同步获取结果的需求。

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