时间戳

首页 > 解决方案 > RTK 查询`use*Query` 正在使用缓存的 isLoading 和数据，即使对于不同的 args

redux - RTK 查询`use*Query` 正在使用缓存的 isLoading 和数据，即使对于不同的 args

问题描述

我是 RTK 查询的新手，我在使用不同参数的查询之间共享数据时遇到问题。

// api.js
const { useGetStuffQuery } = api.injectEndpoints({
  endpoints: (builder) => ({
    getStuff: builder.query({
      query: (stuffId) => ({ url: `http://some.random-url.com/${stuffId}` }),
    }),
  }),
});

// component.js
function(props) {
  const [id, setId] = useState(1);
  const { data, isLoading } = useGetStuffQuery(id);

  if (val === '2') {
    console.log('datttt', data); // this initially prints data from id:1
  }

  return <div>
      <input value={id} onChange={(e) => setId(e.target.value)} />
      {
        isLoading ? <span>loading...</span>
                  : <span>data is: {data}</span>
      }

  </div>
}

一旦我将 id 从 1 更改为 2，我期待看到加载指示器出现。

但是，似乎 rtkQuery 仍在使用我之前useGetStuffQuery(1)调用的缓存数据，因此我暂时看到了 id1 的数据。一旦对 id2 的请求得到解决——它会更新并重新呈现我的组件。

这种缓存行为是有意的和预期的吗？还是我错过了什么？

标签： reduxredux-toolkitrtk-query

解决方案

这是有意的，有isLoading并且isFetching有不同的行为（isLoading 直到有数据，isFetching 在任何请求运行时），为了方便起见，钩子将始终为您提供已知的最后一个数据，因此您的 UI 跳转更少。

这在“查询加载状态”文档部分中进行了解释：

isLoading 是指第一次针对给定端点 + 查询参数组合进行的查询。目前没有可用的数据。

isFetching 指的是针对给定端点 + 查询参数组合的查询正在运行，但不一定是第一次。此时可以从较早的请求中获得数据。

推荐阅读