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中获取的数据为空，因为结果是我得到默认的空数组，并且在这种情况下属于这种情况-{{1} }

if (isLoading && !data.length )

Answer 1

没有缓存时（第一次查询获取或5分钟后的垃圾收集器之后），isLoading从true切换为false（状态===“正在加载”）。

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

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

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上的“查询”都不相同

反应查询：获取数据时显示正在加载微调框

1 个答案: