在数据获取期间显示全局微调器

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 来获取输入数据并且它有效，但我可以访问 isLoading 属性在 Data 组件中，我想要一个全局微调器，它会在任何数据请求期间显示。是否可以使用 react-query 来做到这一点？

我考虑过在 Suspense 中包装 App 并将 Loader 设置为回退并在 useQuery 调用中启用 suspense，但也许还有其他方法怎么做？

Answer 1

在 isLoading 旁边，useQuery 也 return 是一个 isFetching 布尔值，只要查询的请求“正在运行”，它就会为真，包括后台更新（isLoading 仅当您还没有数据时才适用于“初始”加载）。

如果您想要全局加载微调器，还有 useIsFetching 挂钩，它将 return 当前正在提取的查询数量。参见：https://react-query.tanstack.com/reference/useIsFetching

在数据获取期间显示全局微调器

Showing global spinner during data fetching

react-query