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

Question

如何动态更改通过 injectEndpoints 注入(inject) 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 添加到 wrapper-baseQuery 并将其传递到 Hook 中，或者通过查看 baseQueryApi.endpoint(在 RTK 中可用>=1.7) 在 baseQuery 包装器中，但上面的解决方案可能是最简单的。