RTK 查询：如何为 useLazyQuery 使用 fixedCacheKey 方法？答案

【问题标题】：RTK-query: how to have the fixedCacheKey approach also for useLazyQuery?RTK 查询：如何为 useLazyQuery 使用 fixedCacheKey 方法？
【发布时间】：2022-11-30 23:17:09
【问题描述】：

阅读 documentation 我看到突变可以使用 fixedCacheKey 选项共享它们的结果：

RTK 查询提供了一个选项，可以使用 fixedCacheKey 选项在突变挂钩实例之间共享结果。当调用任何触发器函数时，任何具有相同 fixedCacheKey 字符串的 useMutation 挂钩将在彼此之间共享结果。这应该是您希望共享结果的每个突变挂钩实例之间共享的唯一字符串。

我有一个 GET api 调用，我需要使用 useLazyQuery 挂钩的 trigger 方法调用它，但我需要在许多地方利用它的布尔值（isSuccess、isError 等）。 useLazyQuery 挂钩是否有可能具有相同的行为？

【问题讨论】：

标签： reactjs rtk-query

【解决方案1】：

在 RTK 查询中，查询实例在缓存中遵循此逻辑（来自文档）：

当您执行查询时，RTK Query 会自动序列化请求参数并为请求创建一个内部queryCacheKey。任何产生相同 queryCacheKey 的未来请求都将针对原始请求进行重复数据删除，并且如果在来自任何订阅组件的查询上触发重新获取，则将共享更新。

鉴于在不同的组件中，获取相同缓存条目的唯一方法是传递相同的查询参数。如果您在许多组件中有很多 useLazy，那么这些挂钩不会指向任何缓存条目，直到您触发它们（使用一些参数）。

这是我从官方文档中了解到的

【讨论】：

感谢您及时的回复。所以我必须重新触发懒惰来获取布尔值？这意味着布尔生命周期也将再次重播。我只需要在一个地方触发 GET，同时在另一个地方读取布尔值，就像我可以使用 fixedCacheKey 选项处理突变一样。我可以实现一个反应上下文，但我想先尝试一些 rtkq 内置解决方案。

【解决方案2】：

我最终实现了一个自定义挂钩来处理这种情况

// This is the custom hook that wrap the useLazy logic
const useCustomHook = () => {
  const [trigger] = useLazyGetItemQuery();
  const result = apiSlice.endpoints.getItem.useQueryState(/* argument if any */);

  const handleOnClick = async () => { 
    // The second argument for the trigger is the preferCacheValue boolean
    const { data, error } = await trigger(/* argument if any */, true);

    // Here where I will implement the success/error logic ...
   }

  return { onClick: handleOnClick, result} 
}

将 preferCacheValue 设置为 true 会强制 RTQK 返回缓存值（如果存在）以用于我正在使用的延迟。这使我既可以避免触发许多 API 调用。

实现上面的钩子后，我可以执行以下操作：

// Component that will make the API call
function Header() {
  const { onClick } = useCustomHook();

  return (<Button onClick={onClick}>Click me</Button>);
}

// Component that will use the booleans
function Body() {
  const { result: { isFetching } } = useCustomHook()

  return (<Spin spinning={isFetching}>
            <MyJSX />
          </Spin>);
}

通过这种方法，我能够集中 trigger 逻辑（例如，我必须将哪些参数传递给我的触发函数）并在许多组件中利用该 RTKQ 挂钩的布尔值。

【讨论】：