Apollo GraphQL React：useLazyQuery实现循环数据查询的正确方法

• 基础语法错误：原代码中useLazyQuery[QUERY_ID]采用方括号取属性的方式调用Hook，并非函数传参的正确写法，本身就无法正常执行。
• 触发逻辑位置错误：直接在组件主体的条件判断里调用lazy query的触发函数，会形成触发查询→更新内部loading/data状态→触发组件重渲染→满足条件再次触发查询的无限循环，最终导致页面崩溃。
• 循环逻辑缺陷：map回调中反复调用触发函数时，useLazyQuery返回的是单条查询的共享状态，后一次触发的查询会直接覆盖前一次的返回结果，根本无法收集到所有ID对应的关联对象。
• 流程缺失：遍历过程没有异步等待，也没有对查询返回结果做收集，即便代码不报错，也无法组装出完整的结果数组。

对于批量按ID查询关联数据的场景，优先改造GraphQL查询入参，直接支持ID数组的批量传参，无需循环发起多次请求，减少网络开销，也从根源上避免循环调用Hook的问题。

1. 定义支持批量入参的查询语句

const GET_ITEMS_BY_IDS = gql`
  query GetItemsByIds($ids: [ID!]!) {
    itemsByIds(ids: $ids) {
      _id
      # 补充其他需要返回的关联对象字段
    }
  }
`

2. 组件内的正确写法

// 正确以函数传参的方式调用Hook
const [fetchBatchItems, { loading, data, error }] = useLazyQuery(GET_ITEMS_BY_IDS)

// 用useEffect明确控制触发时机，配置合理依赖避免重复执行
useEffect(() => {
  // 仅在触发条件满足、ID列表非空、未加载、无已缓存数据时发起请求
  if (queryForIds && idList?.length && !loading && !data) {
    fetchBatchItems({
      variables: {
        ids: idList
      }
    })
  }
}, [queryForIds, idList, fetchBatchItems, loading, data])

// 直接从返回结果中获取组装好的对象数组
const resultList = data?.itemsByIds || []

如果后端接口无法改造，只能逐ID发起单次查询，需要通过状态存储收集查询结果，用标记位避免重复触发：

import { useLazyQuery } from '@apollo/client'
import { useEffect, useRef, useState } from 'react'

// 单条ID查询的Hook调用
const [fetchSingleItem] = useLazyQuery(GET_SINGLE_ITEM_BY_ID)
// 存储批量查询结果
const [batchResult, setBatchResult] = useState([])
// 用ref标记位锁定查询流程，避免重复触发
const isFetchingRef = useRef(false)

useEffect(() => {
  // 满足触发条件时执行批量查询
  if (queryForIds && idList?.length && !isFetchingRef.current) {
    isFetchingRef.current = true
    // 并行发起所有ID的单条查询
    Promise.all(
      idList.map(id => 
        fetchSingleItem({ variables: { id } }).then(res => res.data?.item)
      )
    ).then(items => {
      // 过滤空值后存入状态，得到完整结果数组
      setBatchResult(items.filter(Boolean))
      isFetchingRef.current = false
    })
  }
}, [queryForIds, idList, fetchSingleItem])

关键注意事项：

• 绝对不要在组件渲染阶段（即组件函数体的直接执行逻辑）调用lazy query的触发函数，这类操作必须放在事件回调、useEffect等有明确执行时机的流程里。
• Hook调用必须放在组件顶层，不能放在循环、条件判断内部，否则会违反React Hooks的调用规则，导致状态错乱。
• 单条查询Hook返回的状态是共享的，循环触发时不要直接依赖返回的data值，要在每个请求的Promise回调里单独取结果做收集。

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