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

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>

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

我考虑过换行App并Suspense设置Loader为后备并suspense在useQuery通话中启用，但也许还有其他方法可以做到这一点？

Answer 1

旁边的isLoading，useQuery还返回一个isFetching布尔值，每当请求为 \xe2\x80\x9ein Flight\xe2\x80\x9c 进行查询时，该布尔值将为 true，包括后台更新（isLoading仅对于 \xe2\x80\x9einitial\ xe2\x80\x9c 在还没有数据时加载）。

\n

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

\n