背景

使用react-query后，只需要专注于处理后端返回的数据本身。react-query将会帮你自动的请求数据、在合适的时机重新获取数据后将旧数据标记为过期，并在一定时间后彻底清除。

那么react-query如何知道什么时候重新获取数据呢？

需要同时满足下面两个条件：

目前缓存内的数据是过期的

默认情况下，当你的数据从后端请求存入缓存后，数据就会被置为过期（实际上很合理，因为你请求的数据只是当前时间点下后端数据的快照，很有可能请求后的某个时间数据有变化）

满足下面三种事件的其中一种
- 带有useQueryhooks的组件挂载时
- 当用户将浏览器重新聚焦，切换到前台时
- 网络从离线到上线（比如你在地下室无信号，此时网络离线，当你从地下室回到地面，信号满格，此时你又重新上线）

并且react-query只会对当前react中正在挂载的组件进行重新获取操作，如果组件被卸载（比如离开了当前页面组件等），并不会执行上述操作。而且当组件被卸载超过5分钟后，缓存将会被自动清除。

如果默认选项能满足需求，也就不会有这篇文章了，在本文中主要介绍一下，如何去手动重新查询数据。

介绍

更新查询数据

更新查询所有匹配queryKey的查询

你可以通过queryClient中的refetchQueries方法来重新刷新数据。比如下面的刷新按钮：

const RefetchButton = ({org, repo}) => {
  const queryClient = useQueryClient();

  return (
    <button onClick={() => queryClient.refetchQueries(['repo', org, repo])}>
      刷新
    </button>
  );
};

用户点击刷新后，将会刷新所有的满足查询键匹配的查询，包括非活跃查询以及活跃查询

更新查询活跃的匹配queryKey的查询

你可以通过queryClient中的invalidateQueries方法来重新刷新当前活跃查询。例子如下：

const InvalidateButton = ({org, repo}) => {
  const queryClient = useQueryClient();
  return (
    <button onClick={() =>
      queryClient.invalidateQueries(['repo', org, repo])
    }>
      Invalidate Queries
    </button>
  );
};

区别

refetchQueries会把所有的查询都会重新查询一遍，而invalidateQueries则是把当前活跃的查询重新查询一遍。

因此当你有几十个查询匹配搜索（比如三个查询是活跃状态，剩下的全部都是非活跃状态）的时候，invalidateQueries会更加快速的更新数据。

你可能会问了，怎么可能会有几十个查询？

当然有可能，假如一直使用一个页面，并打开过许多的github仓库的详情页，那么当你每打开一个详情页就会产生一条查询（假如打开react仓库此时的querykey时：['repo', 'facebook', 'react']，打开vue仓库此时的querykey是['repo', 'vuejs', 'vue']等等以此类推）。

如果你希望刷新你当前浏览的react仓库详情页，使用了queryClient.refetchQueries(['repo'])方法，此时所有的详情页数据都会被更新，假如你使用了queryClient.invalidateQueries(['repo'])方法，此时只有['repo', 'facebook', 'react']这个查询会被更新。这里只是举一个例子方便大家理解概念。实际使用过程中看你的开发需要灵活运用。

建议除非你明确知道所有的查询都要重新获取时使用queryClient.refetchQueries。否则其他情况下请使用queryClient.refetchQueries。

在上面的例子中，我们使用了不同种类的querykey（比如：queryClient.invalidateQueries(['repo', org, repo])以及queryClient.invalidateQueries(['repo'])），去匹配需要更新的查询。在下一章中，我们将详细讲述querykey的匹配规则。

开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 14 天，点击查看活动详情

react-query手把手教程⑦-更新查询数据

目录

背景

介绍

更新查询数据

更新查询所有匹配queryKey的查询

更新查询活跃的匹配queryKey的查询

区别