启用 useQueries 选项

Question

我正在尝试像这样使用 useQueries

function App({ users }) {
   const userQueries = useQueries(
     users.map(user => {
       return {
         queryKey: ['user', user.id],
         queryFn: () => fetchUserById(user.id),
       }
     })
   )
 }

然而，users 变量是由 useQuery 提供的，最初返回时未定义。这会导致错误无法读取未定义的映射。我想像 useQuery 一样添加启用，但我在文档中没有看到它。您可以使用简单的 useQuery 来完成此操作，如下所示：

// Get the user
 const { data: user } = useQuery(['user', email], getUserByEmail)
 
 const userId = user?.id
 
 // Then get the user's projects
 const { isIdle, data: projects } = useQuery(
   ['projects', userId],
   getProjectsByUser,
   {
     // The query will not execute until the userId exists
     enabled: !!userId,
   }
 )
 
 // isIdle will be `true` until `enabled` is true and the query begins to fetch.
 // It will then go to the `isLoading` stage and hopefully the `isSuccess` stage :)

本质上我想要

function App({ users }) {
   const userQueries = useQueries(
     users.map(user => {
       return {
         queryKey: ['user', user.id],
         queryFn: () => fetchUserById(user.id),
         enabled: !!users
       }
     })
   )
 }

Answer 1

更新

在 React Query v4 中，useQueries钩子已稍作修改（请参阅： https: //tanstack.com/query/v4/docs/guides/migration-to-react-query-4#new-api-for-usequeries）。您需要传递带有参数的对象，而不是直接传递数组query：

  const results = useQueries({
    queries: [
        { queryKey: ['post', 1], queryFn: getProjectsByUser, enabled: !!userId },
        { queryKey: ['post', 2], queryFn: getProjectsByUser, enabled: !!userId },
    ]
  })

原始答案（针对 React Query 3）

对于通过搜索登陆这里的人：现在支持：

  const results = useQueries([
    { queryKey: ['post', 1], queryFn: getProjectsByUser, enabled: !!userId },
    { queryKey: ['post', 2], queryFn: getProjectsByUser, enabled: !!userId },
  ])

请参阅https://react-query.tanstack.com/reference/useQueries#_top

Answer 2

如果没有用户，您可以回退到传递给 useQueries 的空数组：

function App({ users }) {
   const userQueries = useQueries(
     users?.map(user => {
       return {
         queryKey: ['user', user.id],
         queryFn: () => fetchUserById(user.id),
       }
     }) ?? []
   )
 }