如何在react-query的useQueries中使用自定义查询Hook

你遇到的报错是因为违反了React Hook的调用规则——Hook只能在React组件或自定义Hook的顶层作用域调用，而queryFn是useQueries内部执行的普通函数，在里面调用usePost/usePosts这类自定义Hook，相当于在非Hook/组件的函数里调用Hook，自然会触发报错。

推荐解决方案：拆分配置与Hook #

为了兼顾自定义Hook的复用性和useQueries的使用需求，我们可以把查询逻辑拆成纯配置生成函数和自定义Hook两部分：

// 第一步：定义纯函数生成查询配置（无Hook调用）
const getPostQueryConfig = (id: string) => ({
  queryKey: ['posts', id],
  queryFn: () => getPost(id)
})

const getPostsQueryConfig = () => ({
  queryKey: ['posts'],
  queryFn: () => getPosts()
})

// 第二步：基于配置创建自定义Hook（顶层调用useQuery）
const usePost = (id: string) => {
  return useQuery(getPostQueryConfig(id))
}

const usePosts = () => {
  return useQuery(getPostsQueryConfig())
}

// 第三步：在useQueries中直接使用配置函数
const queries = useQueries([
  getPostsQueryConfig(),
  getPostQueryConfig(id)
])

这种方案的优势：

• 自定义Hook依然可以单独使用，保持原有复用性
• 传给useQueries的是普通查询配置对象，queryFn直接调用数据获取函数，完全符合Hook规则

备选方案：直接调用多个自定义Hook（适合少量查询） #

如果你的查询数量不多，也可以直接在组件顶层调用多个自定义Hook，无需使用useQueries：

const { data: postsData, isLoading: postsLoading } = usePosts()
const { data: postData, isLoading: postLoading } = usePost(id)

这种方式更直观，但如果需要动态生成大量查询，还是拆分配置的方案扩展性更好。

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