如何使用 React-Query 处理多个查询

IT技术 reactjs react-query
2021-04-29 15:38:55

我已经开始使用 React-Query,如果我只需要从我的数据库中的单个集合中获取数据,它的效果会很好。但是,我正在努力寻找一种查询多个集合以在单个组件中使用的好方法。

一个查询(没问题):

const { isLoading, isError, data, error } = useQuery('stuff', fetchStuff)

if (isLoading) {
     return <span>Loading...</span>
   }
 
   if (isError) {
     return <span>Error: {error.message}</span>
   }
 
   return (
     <ul>
       {data.map(stuff => (
         <li key={stuff.id}>{stuff.title}</li>
       ))}
     </ul>
   )
 }

对不同集合的多个查询 (😬):

const { isLoading: isLoadingStuff, isError: isErrorStuff, data: stuff, error: errorStuff } = useQuery('stuff', fetchStuff);
const { isLoading: isLoadingThings, isError: isErrorThings, data: Things, error: errorThings } = useQuery('things', fetchThings);
const { isLoading: isLoadingDifferentStuff, isError: isErrorDifferentStuff, data: DifferentStuff, error: errorDifferentStuff } = useQuery('DifferentStuff', fetchDifferentStuff);

const isLoading = isLoadingStuff || isLoadingThings || isLoadingDifferentStuff
const isError = isErrorStuff || isErrorThings || isErrorDifferentStuff
const error = [errorStuff, errorThings, errorDifferentStuff]

if (isLoading) {
     return <span>Loading...</span>
   }
 
if (isError) {
    return (
      <span>
        {error.forEach((e) => (e ? console.log(e) : null))}
        Error: see console!
      </span>
    );
  }
 
   return (
  <>
    <ul>
      {stuff.map((el) => (
        <li key={el.id}>{el.title}</li>
      ))}
    </ul>
    <ul>
      {things.map((el) => (
        <li key={el.id}>{el.title}</li>
      ))}
    </ul>
    <ul>
      {differentStuff.map((el) => (
        <li key={el.id}>{el.title}</li>
      ))}
    </ul>
  </>
);
 }

我相信一定有更好的方法来做到这一点。出于多种原因,我对 React-Query 非常感兴趣,但一个不错的好处是减少样板。但是,这种方法似乎并不比使用 useEffect 和 useState 来管理我的 api 调用好多少。我确实找到了 useQueries 钩子,但它并没有真正使这个更清洁。

有谁知道 React-Query 中是否有一种方法可以进行多个查询并且只返回一个 isLoading、isError 和 error(array?) 响应?或者只是处理我遗漏的多个查询的更好方法?

2个回答

我确实找到了 useQueries 钩子,但它并没有真正使这个更清洁。

useQueries 为您提供一个结果数组,因此您可以映射它们:

const isLoading = queryResults.some(query => query.isLoading)

如果您有一个触发多个并发请求的组件,则库可以做的只有这么多来降低复杂性。每个查询都可以有自己的加载状态/错误状态/数据。每个查询都可以有自己的设置,并且可以有不同的行为。推荐的方法仍然是将其提取到自定义钩子并从中返回您想要的内容。

通过在useErrorBoundary选项中使用错误边界,可以简化错误处理为了简化加载体验,您可以尝试suspense(虽然是实验性的),它将显示fallback所有查询加载器。

这种方法似乎并不比使用 useEffect 和 useState 来管理我的 api 调用好多少。

这忽略了所有优点,例如(除其他外)缓存、后台重新获取、突变、智能失效等。

使用 Dependent Queries,您可以按照文档示例进行操作。

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,
  }
 )

官方文档 - 依赖查询