javascript - 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(并且状态 ===“正在加载”)。
但是当您已经在缓存中有数据并重新获取(或在其他组件中使用查询)时，useQuery 应该返回以前缓存的数据并在后台重新获取。
在这种情况下，isLoading 始终为 false，但您拥有从 true 切换为 false 的 Prop “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 上的“查询”都不同