在数据获取过程中显示全局微调器

Question

我有类似于的组件树

<App>
<Loader show={...}/>
<Form>
<input name="val" />
<input type="submit" />
</Form>
<Data input={...}>
Data is {here is data fetched for props.input}
</Data>
</App>

我在Data组件中使用来自react-query的钩子useQuery来获取输入数据，它可以工作，但我可以访问Data组件中的isLoading属性，我希望有一个全局微调器，它将在任何数据请求期间显示。有可能用react-query来做吗？

我想过在Suspense中封装App，并将Loader设置为回退，并在useQuery调用中启用suspense，但也许还有其他方法可以做到这一点？

Answer 1

在isLoading旁边，useQuery还返回一个isFetching布尔值，每当查询请求"在飞行中"时，该值都将为真，包括后台更新(当您还没有数据时，isLoading仅在"初始"加载时为真(。

如果您想要一个全局加载微调器，还有useIsFetching钩子，它将返回当前正在获取的查询量。请参阅：https://react-query.tanstack.com/reference/useIsFetching