我已经开始使用 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?) 响应?或者只是处理我遗漏的多个查询的更好方法?