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 应该return 以前缓存的数据并在后台重新获取。在这种情况下，isLoading 始终为 false，但您拥有从 true 切换为 false 的道具“isFetching”。

在您的示例中，如果传递给数组的变量“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 时都不同

Answer 2

每次获取新数据时都可以使用 isFetching

const { isFetching, isError, isSuccess, data } = useQuery('key', fnc())
if (isFetching) {
    return <LoaderSpinner />
}
else if (isError) {
    return "error encountered"
}
return (
    { isSuccess && data?.map((item) => <li>{item?.name}</li>)}
)

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

React-query: Show loading spinner while fetching data

javascript

reactjs

react-query