urql useQuery返回data为undefined但网络面板显示有数据的问题

1. 错误访问了data的value属性 #

你在fetchAddressDetails里写了console.log(data.value)，但urql的executeQuery返回的Promise结果中，data就是查询返回的顶层数据对象，不存在value属性。先直接打印data确认结构：

const fetchAddressDetails = async () => {
    const { data }  = await getAddressDetails();
    console.log(data); // 先查看原始结构，再按需访问具体属性
};

既然mapExchange里能看到正确数据，说明data本身就是你需要的结果，不需要额外加.value。

2. Exchanges顺序配置错误 #

urql的Exchanges执行顺序是从左到右，必须保证cacheExchange（如果使用）在fetchExchange之前，同时mapExchange要放在cacheExchange之后、fetchExchange之前，才能正确处理缓存和返回结果。

修正你的client配置：

import { cacheExchange, mapExchange, fetchExchange } from '@urql/core';

const client = createClient({
  url: import.meta.env.VITE_GRAPHQL_URL ?? '',
  exchanges: [
    cacheExchange(), // cacheExchange需放在最前面
    mapExchange({
      onResult(result) {
        console.log(result);
      }
    }),
    fetchExchange, // fetchExchange必须是最后一个执行的Exchange
  ],
  fetchOptions: {
    headers: fetchHeaders()
  }
});

之前你添加cacheExchange({})但没解决问题，大概率是顺序错误——fetchExchange负责实际发送网络请求，必须放在所有处理类Exchange的后面。

3. 额外检查点 #

• 确认AddressDetailsResponse类型定义是否和后端返回结构匹配，避免TypeScript类型提示误导你访问不存在的属性。
• 给executeQuery添加错误捕获，排查是否有未被处理的请求错误：

  const fetchAddressDetails = async () => {
      try {
        const { data, error }  = await getAddressDetails();
        if (error) console.error('请求错误:', error);
        console.log(data);
      } catch (err) {
        console.error('捕获异常:', err);
      }
  };
  

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