我有一个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']);

我也try 使用apiSlice.util.resetApiSlice,但没有触发用白屏替换整个站点的所有内容的重新获取,我必须刷新才能再次加载它.

推荐答案

基于这Code Splitting: 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;

我认为这就是您正在寻找的,但由于我不知道您的任何查询是什么,或者您的其余代码围绕您的查询做了什么,所以我不能轻松地测试/验证这一点.

Reactjs相关问答推荐

运行 node server.js会导致以下错误:Route.post()需要回调函数,但在Route.&处得到了[对象Undefined] lt;计算>

如何在useEffect中使用useParams()

在每页上应用字体-NextJS

React路由dom布局隐藏内容

Gitlab CI和VITE环境变量出现问题

React 错误: 只能用作 元素的子元素,从不直接渲染.请将您的 包裹在

如何将 npm 包添加到我的 Vite + React 应用程序中?

我可以在加载器函数中多次 fetch() 并使用一次 useloaderdata() 提取它吗?

React对象值下降2次而不是1次

如何让 useEffect 在 React.JS 中只运行一次?

我收到Uncaught TypeError: props.handleSelect is not a function

在 React 中使用复选框管理状态

表单错误后 Ionic React 无法 Select 单选按钮

使用 React Router v6 监听来自不同组件的组件状态变化

如何使用 React 在客户端获取 nestjs websocket 异常错误?

调用 Statsig.updateUser 时 UI 不呈现

设置 Material UI 表格默认排序

为什么重新渲染不会影响 setTimeout 的计数?

无法有条件地更新useEffect中的setState

React 似乎在触发另一个组件时重新渲染了错误的组件