React Query中useQuery的select及相关配置项使用疑问

select 配置项用法 #

select 用于转换、过滤 useQuery 返回的原始数据，请求成功后立即执行，返回处理后的结果给组件，且不会修改缓存中的原始数据。

举个实际场景：接口返回完整用户列表，你只需要活跃用户的姓名，就可以用 select 直接处理：

const { data: activeUserNames } = useQuery(['users'], fetchAllUsers, {
  select: (rawData) => {
    return rawData.filter(user => user.isActive).map(user => user.name)
  }
})

组件拿到的 activeUserNames 就是直接可用的过滤后数据，无需在组件内二次处理。缓存的原始数据更新时，select 会自动重新执行，返回最新处理结果。

onSettled 配置项用法 #

onSettled 是请求无论成功、失败都会触发的回调，适合做请求收尾工作，比如关闭加载弹窗、重置状态等。它接收三个参数：成功时的 data、失败时的 error，以及包含请求上下文的 context。

示例：

const { isLoading } = useQuery(['user', userId], fetchUser, {
  onSettled: (data, error) => {
    console.log('请求已结束')
    error ? console.error('请求失败:', error) : console.log('请求成功:', data)
    // 不管结果如何，关闭加载提示
    setLoadingModalVisible(false)
  }
})

notifyOnChangeProps 配置项用法 #

这个配置用来控制 useQuery 触发组件重渲染的时机。默认情况下，query 的任何状态（如 data、isLoading、error）变化都会触发重渲染。如果组件只关心部分状态变化，用它可以减少不必要的重渲染。

可选使用方式：

• 传入具体属性数组，比如 ['data', 'isError']，只有这些属性变化时才触发重渲染
• 传入 'tracked'，只追踪组件实际用到的 query 状态（需配合 React 严格模式或 TypeScript 类型推断）

示例：

// 仅当 data 或 isError 变化时，组件才重渲染
const { data, isError, isLoading } = useQuery(['posts'], fetchPosts, {
  notifyOnChangeProps: ['data', 'isError']
})
// 此时 isLoading 变化不会触发组件重渲染

queryKeyHashFn 配置项用法 #

queryKeyHashFn 用于自定义 queryKey 的哈希生成逻辑。React Query 默认会把 queryKey 序列化为字符串作为缓存 key，但如果 queryKey 包含复杂对象（如带函数的对象、Symbol），默认序列化会出问题，这时就可以自定义哈希函数。

示例：

const { data } = useQuery(
  ['user', { id: userId, role: 'admin', extra: {} }], 
  fetchUser, 
  {
    queryKeyHashFn: (queryKey) => {
      // 只取关键字段生成缓存 key，忽略无关属性
      return `${queryKey[0]}-${queryKey[1].id}-${queryKey[1].role}`
    }
  }
)

这样即使 queryKey 里的对象有其他无关属性，也不会影响缓存 key 的生成，避免不必要的重复请求。

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