数据缓存控制

在大部分情况下利用React Query自带的缓存控制策略就已经可以很好很高效的完成数据的获取工作。但是在一些数据被修改以后，那么让苦等React Query自动控制的缓存过期机制就有一些不合适宜了，这时就需要使用QueryClient中提供的缓存过期通知功能来使React Query得知缓存中的某些数据已经过期而启动数据的重新获取过程。

React Query在QueryClient中通过invalidateQueries方法提供了失效全部查询缓存和失效指定查询缓存的方法。这个方法的调用就像是启动了一个链式反应，React Query会无视之前查询中的所有配置，直接将缓存的查询结果标记为过期状态，并且在后台启动对这些过期数据的重新获取的过程。

以下是invalidateQueries的使用格式示例。

// 将已经缓存的所有查询都标记为过期状态
queryClient.invalidateQueries();
// 将已经缓存的指定查询标记为过期状态
queryClient.invalidateQueries('things');

有了这个方法，就可以结合到数据更新的过程中，在数据更新完成以后使React Query自动重新获取最新的数据了。以下是数据缓存控制与数据更新的组合示例。

function NewThing() {
  const queryClient = useQueryClient();
  const mutation = useMutation(
    newThingForm => {
      return axios.post(`/api/things`, newThingForm);
    },
    {
      onSuccess: () => {
        queryClient.invalidateQueries('things');
      }
    }
  );

  return (
    <>
      {mutation.isLoading ? <div>正在添加数据...</div> : null}
      {mutation.isError ? <div>出现错误：{mutation.error.message}</div> : null}
      <button onClick={() => mutation.mutate({ id: new ID(), name: 'the new one' })}>创建新记录</button>
    </>
  );
}

在使用invalidateQueries方法的时候，指定要标记为过期的查询的Key也同样遵循useQuery中对于查询Key的匹配原则。