是否可以将标签应用于 Redux Toolkit Query 中 API 切片内的所有端点？

Question

我有一个 API，其中包含一个名为“region”的参数，该参数应用于请求标头中。该区域是动态的，随着用户在网站中执行操作而变化，并且因为它不是请求 URL/参数的一部分，所以我必须使用

serializeQueryArgs

:

将其添加到缓存键中

serializeQueryArgs: args => {
    const region = localStorage.getItem('region');

    return `${region}_${defaultSerializeQueryArgs(args)}`;
}

这可以防止 API 在不同区域的缓存条目之间发生混淆，这很好，但它不会导致请求像我想要的那样使用新区域重新获取。

我认为我可以使用缓存标签完成自动重新获取，方法是在 API 的定义中添加标签类型，然后在区域更改时使该标签无效：

export const apiSlice = createApi({
    tagTypes: ['region'],

    // Other stuff.
});

const changeRegion = region => {
    dispatch(setRegion(region));
    dispatch(apiSlice.util.invalidateTags([cloudTag]));
}

这个效果太棒了！问题是，对于我想要重新获取的每个端点，我必须添加标签：

providesTags: ['region']

我有数百个端点，所以这并不实际，并且强制每个添加新端点的人都记得添加标签而不忘记它似乎......相当困难。我真的很希望能够一次性将标签添加到每个端点。

我想也许

enhanceEndpoints

可以做到这一点，但我不知道如何使用它。理想情况下，我想要一个像这样简洁的解决方案：

export const apiSlice = createApi({
    tagTypes: ['region']
})
.providesTags(['region']);

---

我还尝试使用

apiSlice.util.resetApiSlice

来实现此目的，但不是触发重新获取用白屏替换整个网站的所有内容，而是必须刷新才能再次加载。

Answer 1

基于代码分割：enhanceEndpoints文档，我可以想出这个似乎可以使用

"region"

标签和序列化查询参数正确注入/增强每个端点。

const apiSlice = createApi({
  tagTypes: ['region'],
  // Other stuff.
});

const enhancedApi = apiSlice.enhanceEndpoints({
  endpoints: Object.fromEntries(
    Object.entries(apiSlice.endpoints).map(([key, endpoint]) => {
      const enhancedEndpoint = {
        ...endpoint,
        providesTags: ["region"],
        serializeQueryArgs: (args) => {
          const region = JSON.parse(localStorage.getItem("region"));

          return `${region}_${defaultSerializeQueryArgs(args)}`;
        }
      };

      return [key, enhancedEndpoint];
    })
  )
});

export default enhancedApi;

我认为这就是您正在寻找的内容，但我不知道您的任何查询是什么，也不知道您的其余代码在查询周围做了什么，所以这不是我可以轻松测试/验证的东西。