React Native中RTK-Query动态Base URL替换方案咨询

RTK Query的query函数确实不支持异步逻辑，直接在里面调用AsyncStorage.getItem会触发类型错误。下面提供几个无需牺牲TypeScript类型支持的实用解决方案：

方案1：自定义异步BaseQuery #

直接扩展RTK Query的baseQuery，让它支持异步获取Base URL，所有端点可复用该逻辑，完全保留类型校验：

import { createApi, fetchBaseQuery, FetchArgs, BaseQueryApi } from '@reduxjs/toolkit/query/react';
import AsyncStorage from '@react-native-async-storage/async-storage';

// 自定义支持异步获取Base URL的baseQuery
const asyncBaseQuery = async (args: string | FetchArgs, api: BaseQueryApi, extraOptions: {}) => {
  // 从AsyncStorage读取Base URL，同时设置默认值兜底
  const baseUrl = await AsyncStorage.getItem('baseUrl') || 'https://default-api.example.com';
  // 使用原生fetchBaseQuery处理请求
  const rawBaseQuery = fetchBaseQuery({ baseUrl });
  return rawBaseQuery(args, api, extraOptions);
};

// 创建API时使用自定义baseQuery
const api = createApi({
  baseQuery: asyncBaseQuery,
  endpoints: (build) => ({
    postAuth: build.mutation<PostAuthResponse, PostAuthRequest>({
      query: (data) => ({
        url: '/auth',
        method: 'POST',
        body: data,
      }),
    }),
    // 其他端点同样只需写相对路径
  }),
});

这个方案的优势是无需额外状态管理，每次请求自动拉取最新的Base URL，类型系统完全兼容。

方案2：将Base URL存入Redux Store（同步获取） #

如果Base URL在App运行中可能动态修改，推荐将其存入Redux Store，启动时从AsyncStorage初始化，之后所有请求同步从Store读取：

步骤1：创建管理Base URL的Slice #

import { createSlice, PayloadAction } from '@reduxjs/toolkit';

const baseUrlSlice = createSlice({
  name: 'baseUrl',
  initialState: '' as string,
  reducers: {
    setBaseUrl: (state, action: PayloadAction<string>) => {
      return action.payload;
    },
  },
});

export const { setBaseUrl } = baseUrlSlice.actions;
export default baseUrlSlice.reducer;

步骤2：App启动时初始化Base URL #

import { useDispatch } from 'react-redux';
import { setBaseUrl } from './path-to-baseUrl-slice';
import AsyncStorage from '@react-native-async-storage/async-storage';

function App() {
  const dispatch = useDispatch();

  useEffect(() => {
    const initBaseUrl = async () => {
      const savedUrl = await AsyncStorage.getItem('baseUrl');
      if (savedUrl) {
        dispatch(setBaseUrl(savedUrl));
      }
    };
    initBaseUrl();
  }, [dispatch]);

  // ...其他App组件逻辑
}

步骤3：自定义动态BaseQuery从Store读取URL #

import { createApi, fetchBaseQuery, FetchArgs, BaseQueryFn, FetchBaseQueryError } from '@reduxjs/toolkit/query/react';
import { RootState } from './path-to-redux-store';

const dynamicBaseQuery: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> = async (args, api, extraOptions) => {
  const baseUrl = (api.getState() as RootState).baseUrl || 'https://default-api.example.com';
  
  // 拼接Base URL和请求路径
  const modifiedArgs = typeof args === 'string' 
    ? `${baseUrl}${args}` 
    : { ...args, url: `${baseUrl}${args.url}` };

  return fetchBaseQuery({ baseUrl: '' })(modifiedArgs, api, extraOptions);
};

// 创建API
const api = createApi({
  baseQuery: dynamicBaseQuery,
  endpoints: (build) => ({
    postAuth: build.mutation<PostAuthResponse, PostAuthRequest>({
      query: (data) => ({
        url: '/auth',
        method: 'POST',
        body: data,
      }),
    }),
  }),
});

该方案适合需要动态更新Base URL的场景，更新Store后后续请求会自动使用新地址，同样保留完整的TypeScript类型支持。

注意事项 #

• 所有方案都要设置默认Base URL，避免AsyncStorage未存入值时出现请求错误。
• 如果Base URL修改频率低，方案1更简洁；如果需要频繁切换Base URL，方案2的状态管理更灵活。

内容的提问来源于stack exchange，提问作者Nikita Babeev