如何仅为一组特定的注入端点动态更改我的 RTK 查询 api 的 baseURL？

Question

如何动态更改通过 injectEndpoints 注入 RTK 查询端点的特定资源的 baseURL？

这是我的用例：

我有 4 个资源，我已使用 RTK 的 injectEndpoints() 功能拆分（4 个文件），如下所示：

const resource1Api = emptyApi.injectEndpoints({
  endpoints: (builder) => ({
    getData: builder.query({
      query: () => '/resource1/data'
    })
  }),
  overrideExisting: false
});

const resource2Api = emptyApi.injectEndpoints({
  endpoints: (builder) => ({
    getData: builder.query({
      query: () => '/resource2/data'
    })
  }),
  overrideExisting: false
});

...etc

我希望能够单独覆盖所有 Resource1 或 Resource2 等的 baseURL。它们都插入单独的第 5 个文件中的 createApi() 调用，如下所示：

const baseQuery = fetchBaseQuery({
  baseUrl: `${process.env.REACT_APP_API_HOST}`
 
});

export const emptyApi = createApi({
  baseQuery: baseQuery,
  endpoints: () => ({})
});

在生产中，所有资源都使用相同的基数url。例如，“baseURL/resource1/...”、“baseURL/resource2/...”等。但是，在开发中，我们的团队可以通过运行 API 的本地托管版本仅该资源。因此，这些资源的端点看起来更像是“baseURL/resource1/...”、“localURL1/resource2/...”、“baseURL/resource3/...”、“localURL2/resource4/...".

如果 API 中的任何一个是运行本地的，则它们的每个 URL 都有一个单独的环境变量。理想情况下，只有在设置 url 时，才有办法将资源的 baseURL 更改为 localURL。

Answer 1

最简单的方法是为这些端点指定一个完整的 url：

query: () => myOtherBaseUrl + '/resource2/data'

您也可以变得更复杂，方法是将 DefinitionExtraOptions 添加到包装器基础查询并将其传递到挂钩中，或者通过查看 baseQueryApi.endpoint（在 RTK >=1.7 中可用） baseQuery 包装器，但上面的解决方案可能是最简单的。

如何仅为一组特定的注入端点动态更改我的 RTK 查询 api 的 baseURL？

How can I dynamically change the baseURL of my RTK Query api only for a specific group of injected endpoints?

web-applications

reactjs

redux

redux-toolkit

rtk-query