Vue Apollo useQuery忽略响应式筛选变量变更问题求助

• 变量未绑定响应式依赖：若useQuery的variables直接传入静态对象而非返回变量的函数，Vue Apollo无法追踪内部响应式变量的变更，只会使用初始值发起请求。比如直接写variables: { verified: filters.verified, skip: ... }，而非函数形式，导致filters.verified更新时，variables不会同步更新。
• 分页逻辑未同步过滤条件：手动调用refetch时未传入当前最新的verified值，或分页函数仅修改skip但未关联当前verified状态，会导致分页时复用初始的verified=true变量。
• 响应式对象使用错误：如果filters不是ref/reactive包裹的响应式对象，修改verified后无法触发Vue的响应式更新，useQuery感知不到变量变化。

1. 用函数形式定义useQuery的variables #

将variables改为返回响应式变量的函数，确保每次依赖变化时重新计算变量：

const filters = ref({ verified: true })
const pagination = ref({ skip: 0, take: 10 })

const { result, loading, fetchMore } = useQuery(YOUR_QUERY, () => ({
  variables: {
    verified: filters.value.verified,
    skip: pagination.value.skip,
    take: pagination.value.take
  }
}))

修改filters.value.verified或pagination.value.skip时，useQuery会自动触发重取，且变量会使用最新值。

2. 修正分页逻辑，同步当前过滤条件 #

分页时仅需修改pagination.skip，无需手动传递旧变量，variables函数会自动获取当前的verified值：

const nextPage = () => {
  pagination.value.skip += pagination.value.take
}

const prevPage = () => {
  pagination.value.skip = Math.max(0, pagination.value.skip - pagination.value.take)
}

3. 确保filters是响应式对象 #

必须用ref或reactive包裹filters，否则修改verified无法触发响应式更新：

// 用ref包裹
const filters = ref({ verified: true })
// 或用reactive
const filters = reactive({ verified: true })

4. 手动refetch需传递最新变量（可选） #

如果必须手动触发重取，需传入当前最新的变量集合，避免复用初始值：

const handleRefetch = () => {
  refetch({
    verified: filters.value.verified,
    skip: pagination.value.skip,
    take: pagination.value.take
  })
}

优先推荐让useQuery自动响应变量变化，无需手动refetch。

内容的提问来源于stack exchange，提问作者Tomas Gil Amoedo