React-query：在获取数据时显示加载微调器

Question

在新项目中使用 react-query 并且有小问题。要求是在加载数据之前在空页面上显示加载微调器，而不是在用户使用不同查询获取新结果以在先前结果上方显示微调器之后。

第一种情况非常简单且有据可查：

  const { isLoading, error, data } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading) return <p>Loading...</p>;

  return <div>{data.map((item) => <ListItem key={item.id} item={item}/></div>

但是，无法弄清楚第二种情况 - 因为，在查询更改后，react-query 执行从 useQuery 获取新结果和数据的操作为空，结果我得到默认的空数组，在这种情况下属于该条件 - if (isLoading && !data.length )

  const { isLoading, error, data=[] } = useQuery(["list", query], () =>
    fetch(`https://api/list/${query}`)
  );

  if (isLoading && !data.length ) return <p>Loading...</p>;

  return <div>
    {data.map((item) => <ListItem key={item.id} item={item}/>
    {isLoading && <Spinner/>}
  </div>

Answer 1

当您没有缓存时（第一次查询获取或 5 分钟垃圾收集器后），isLoading 从 true 切换到 false（并且 status === "loading"）。

但是，当您已经在缓存中有数据并重新获取（或在其他组件中使用查询）时，useQuery 应返回先前缓存的数据并在后台重新获取。在这种情况下，isLoading 始终为 false，但您拥有从 true 切换到 false 的道具“isFetching”。

在您的示例中，如果在调用之间传递给数组的变量“查询”不同，则没有结果是正常的。缓存键是用数组上的所有变量构建的。

const query = "something"
const { isLoading, error, data } = useQuery(["list",query], () =>
    fetch(`https://api/list/${query}`)
  );

const query = "somethingElse"
const { isLoading, error, data } = useQuery(["list",query], () =>
    fetch(`https://api/list/${query}`)
  );

在这种情况下，缓存不会共享，因为每个 useQuery 上的“查询”都不同