RTK 查询“use*Query”使用缓存的 isLoading 和数据，即使对于不同的参数

Question

我是 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 的请求得到解决——它就会更新并重新渲染我的组件。

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

Answer 1

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

“查询加载状态”文档部分对此进行了解释：

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

isFetching 是指正在针对给定端点+查询参数组合进行的查询，但不一定是第一次。此时可能可以通过先前的请求获得数据。