RTK useLazyQuery 始终调用 API,即使在多个组件上使用相同参数调用时也是如此

Sua*_*aze 3 reactjs redux-toolkit rtk-query

我试图在执行惰性查询时发出使用来自另一个组件的缓存数据的请求。父组件(不是直接父组件,所以我不想通过 props 深入挖掘大型数据集)通过 RTK 进行惰性查询,如下所示:

const [getDocuments, { data: contractDocuments, isLoading, isFetching }] = useLazyGetContractDocumentsQuery();


// inside a fetch function
  getDocuments({
    prop1,
    prop2,
    prop3,
  });
Run Code Online (Sandbox Code Playgroud)

然后子组件也做同样的事情

getDocuments({
  prop1,
  prop2,
  prop3,
}).unwrap().then(documents=>{
  console.log(documents);         
});
Run Code Online (Sandbox Code Playgroud)

我已经验证了 props 是相同的,返回的数据是相同的,但在这两种情况下,每次在任一组件中调用它时,它都会访问 API 端点来获取数据。它永远不会从缓存中获取它。

文档似乎说惰性查询与常规 useQuery 不同,因为您选择何时调用。请参阅不同钩子的功能比较。但我无法与它们一起使用缓存。我是否误解了文档,错过了缓存规则的一些例外,或者有可能在另一个地方我以某种方式禁用了缓存?

顺便说一句,查询如下所示:

    getContractDocuments: builder.query<
      ContractDocument[],
      {
        prop1: string;
        prop2: string | null;
        prop3: string;
      }
    >({
      query: body => ({
        url: '/GetDocuments',
        body,
        method: 'POST',
      }),
      transformResponse: (response: ContractDocument[]) => {
        return response.map(d => ({
          ...d,
          showIconViewFileInNewWindows: extensions.has(`${d.type}`),
        }));
      },
    }),
Run Code Online (Sandbox Code Playgroud)

小智 10

默认情况下,惰性查询触发器始终发出请求调用,但是您可以提供第二个参数作为 true,以在可用时使用缓存

getDocuments({
  prop1,
  prop2,
  prop3,
}, true)
Run Code Online (Sandbox Code Playgroud)

请参阅文档(UseLazyQueryTrigger)

  • 多谢!我想我错过了文档中的那部分!我试图让它起诉缓存,真是伤透了我的头,哈哈。 (2认同)