Question

如何使用 redux-toolkit 动态更改基本 URL?

2021-10-14

12809

redux-toolkit rtk-query

我使用Redux工具包创建API 问题很短：如何动态更改API中的baseurl？详细的问题：这是createapi方法一个对象传递给此方法，其键之一是“ basequery”

678829562

，这是问题，我如何动态更改baseurl？它在商店里，但我不能只把它放在这里。我尝试了自定义查询文档的解决方案 https ：//redux-toolkit.js.org/rtk-query/usage/customizing-queries-cormies-constructing-a-a-dynamic-base-url-usl-usis-redux-state

不允许精确更改baseurl，只能动态处理请求本身，该请求本身已经出现在baseurl

之后，因此，我如何在CreateApi方法中获取和更改baseurl？

Answer 1

所以，答案是：

就在您创建 api 的文件中以下代码：

const dynamicBaseQuery: BaseQueryFn<string | FetchArgs,
  unknown,
  FetchBaseQueryError> = async (args, WebApi, extraOptions) => {
  const baseUrl = (WebApi.getState() as any).configuration.baseUrl;
  const rawBaseQuery = fetchBaseQuery({ baseUrl });
  return rawBaseQuery(args, WebApi, extraOptions);
};

我使用来自 store 的 baseUrl ，因为我的配置已经在里面了。但您可以在这里进行异步等待提取，以从任何地方获取数据

并将此常量 dynamicBaseQuery 插入到 createApi 中的 baseQuery 键中

export const WebApi = createApi({
  reducerPath: 'API',
  baseQuery: dynamicBaseQuery,
  endpoints: () => ({}),
});

Answer 2

如果您传入完整的 URL（以 http:// 或 https:// 开头）， fetchBaseQuery 将跳过 baseUrl 并使用提供的 URL。因此，您可以使用上面链接的逻辑将当前的 baseUrl 添加到查询的 url 前面。

Answer 3

我可能迟到了，但我只是想分享一个扩展的替代方案。

const rawBaseQuery = (baseUrl: string) => fetchBaseQuery({baseUrl: baseUrl});

export function baseQuery(baseUrl: string) : BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> {
return async (args, api, extraOptions) => {

    let result = await rawBaseQuery(baseUrl)(args, api, extraOptions);
    // more logic can go here
}};

// 并使用它

const api = createApi({  reducerPath: 'my-api', baseQuery: baseQuery(BASE_URL),   endpoints: (builder) => ({
helloWorld: builder.query<string, string>({
  query: (arg) => ({
    url: '/helloworld',
    credentials: 'include',
  }),
}), }),});