How to add or remove rtk query api to / from store at runtime?

[ckchiu2]

I am developing an application which aims to provide both online and offline data service, allowing user to choose different data providers. I found that I can pre-type the api and use different api implementation to make this possible. But how can I update the store reducers and middleware, or should I replace the entire store at runtime?

type Todo = {
  content: string;
}

type LocalApiInfo = {
  name: string;
  database: string;
}

const createLocalApi = (apiInfo: LocalApiInfo) => {
  return createApi({
    reducerPath: args.name,
    baseQuery: () => ({ data: undefined }), // unused
    endpoints: (builder) => ({
      getTodo: builder.query<Todo, void>({
        queryFn: async (args) => {
          // get from indexeddb
        }
      })
    })
  })
}

type RemoteApiInfo = {
  name: string;
  url: string;
}

const createRemoteApi = (apiInfo: RemoteApiInfo) => {
  return createApi({
    reducerPath: "remote",
    baseQuery: fetchBaseQuery,
    endpoints: (builder) => ({
      getTodo: builder.query<Todo, void>({
        query: (args) => {
          // return fetch config
        }
      })
    })
  })
}

// store
const store = configureStore({
  reducer: {},
})

type Api = {
  useGetTodoQuery: TypedUseQueryState<Todo, void, any>;
}

// api wrapper
const useApi = () => {
  const apiInfo = useApiInfo(); // some context 
  const [api, setApi] = useState<Api>();
  useEffect(() => {
    if (apiInfo.type === "local") {
      const api = createLocalApi(apiInfo);
      setApi(api);
      // how to add api to store?
    } else if (apiInfo.type === "remote") {
      const api = createRemoteApi(apiInfo);
      setApi(api);
      // how to add api to store?
    }

    return () => {
      // how to remove api from store?
    }
  }, [apiInfo]);
  return api;
}

const Component = () => {
  const api = useApi();
  const { data } = api.useGetTodoQuery(undefined);
  // render data
}

[markerikson]

The short answer is you can't - the store is created once, and you can't modify the middleware later. (You could swap the reducers, but that seems like a bad idea here.)

You could potentially do something like writing the endpoints with a queryFn and then calling either fetchBaseQuery or the local lookup inside of there, so the if/else logic is inside of each endpoint. You could also maybe do something like "combining base queries" per #3161 .