Apollo Client useLazyQuery调用fetchMore时loading与called不更新

核心问题 #

你把useLazyQuery的配置项错误嵌套在了options字段里，导致notifyOnNetworkStatusChange等配置根本没生效。Apollo Client 3.x中，useLazyQuery的第二个参数是顶层配置对象，不需要套在options里。

修正后的useLazyQuery代码 #

const [ getOSO, { loading: loadingOSO, fetchMore: fetchMoreOSO, networkStatus: networkStatusOSO, called: calledOSO } ] = useLazyQuery(SALES_ORDERS, {
  notifyOnNetworkStatusChange: true,
  nextFetchPolicy: 'cache-first',
})

额外优化：fetchMore调用格式修正 #

你的fetchMore把updateQuery作为第二个参数传递，不符合Apollo的API规范，应该把它放在第一个参数对象里：

fetchMoreOSO({ 
  variables: { ...newPageCursor },
  updateQuery
})
.then((results) => {
  const fetchedOrders = results.data.orders.edges.map(item => item.node)
  setOrders(fetchedOrders)
  setPageInfo(results.data.orders.pageInfo)
})

原因说明 #

1. 原代码里的options嵌套是错误用法，Apollo不会读取这个嵌套对象里的配置，所以notifyOnNetworkStatusChange: true完全没起作用，导致fetchMore时networkStatus、loading等状态不更新，useEffect自然不会触发。
2. fetchMore的正确调用方式是接收一个包含variables、updateQuery等属性的对象作为唯一参数，分开传参可能导致updateQuery不执行或状态异常。

修改后，当你调用fetchMore时，networkStatus会切换到fetchMore状态，loading也会相应变化，useEffect就能监听到这些状态更新，正确设置tableLoading。

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