Apollo Client Query调用异常：持续返回loading:true及networkStatus:1求助

我来帮你排查这个Query一直加载的问题，从你的代码和控制台输出来看，有几个关键问题需要优先检查：

1. fetchPolicy的配置位置错误 #

你在options里把fetchPolicy放到了variables对象里面，这是不正确的！fetchPolicy是Apollo Client的配置项，应该和variables同级，而不是作为变量传给GraphQL服务器。

错误的写法：

options: (props) => ({
  variables: {
    _id:props.houseAddress._id,
    fetchPolicy: 'network-only' // 这里错了！
  }
})

正确的写法应该是：

options: (props) => ({
  variables: { _id: props.houseAddress._id },
  fetchPolicy: 'network-only' // 移到顶层
})

原来的写法会导致你传给服务器的变量包含fetchPolicy字段，而服务器期望的只有_id，这会让请求参数不符合接口要求，可能导致服务器无法正确处理请求，进而让Apollo一直处于loading状态。

2. houseAddress._id的值无效 #

从控制台输出的props{"houseAddress":{},"houseDetail":...}可以看到，houseAddress是空对象，这意味着props.houseAddress._id是undefined。如果你的GraphQL接口要求_id是必填的非空ID类型，那么这个无效参数会导致：

• Apollo可能直接跳过请求（因为参数不合法）
• 服务器返回参数错误，但客户端没有正确处理，一直卡在loading

解决方法：

• 先确认houseAddress数据是否已经加载完成，是不是在Page2组件渲染时，houseAddress还没从父组件或其他地方获取到。
• 可以给Query加上skip属性，当_id不存在时跳过请求，避免无效请求：

options: (props) => ({
  variables: { _id: props.houseAddress?._id },
  skip: !props.houseAddress?._id, // 没有_id就不发起请求
  fetchPolicy: 'network-only'
})

3. 检查实际的网络请求和响应 #

打开浏览器的开发者工具（F12），切换到Network标签，找到GraphQL请求：

• 如果没有看到GraphQL请求，说明Apollo因为参数问题没有发起请求，上面的两个点就是原因。
• 如果看到请求处于pending状态，可能是跨域（CORS）配置错误，或者服务器没有响应。
• 如果请求有响应，查看响应体里是否有errors字段，这时候可以在组件里打印props.houseDetail.error来查看具体错误：

const Dashboard = (props) => {
  if (props.houseDetail.error) {
    console.log('Query Error:', props.houseDetail.error);
  }
  // 其他组件代码
}

4. 确认networkStatus的含义 #

networkStatus:1对应的就是Apollo的loading状态，说明请求正在进行中。如果一直停在这个状态，基本都是请求没有正常完成——要么没发出去，要么服务器没返回，要么客户端处理异常。

先把前两个问题修复，应该就能解决大部分情况了。

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