Combine RTK Query Base Queries

[EskiMojo14]

Something that came up today - being able to combine separate base queries, for example FetchBaseQuery and a custom GraphQLBaseQuery, and providing a predicate to determine which base query should be called (based on the arguments provided).

My original approach was the below:

const polymorphBaseQuery: BaseQueryFn<
  BaseQueryArg<typeof graphQLBaseQuery> | BaseQueryArg<typeof fetchBQ>,
  BaseQueryResult<typeof graphQLBaseQuery> | BaseQueryResult<typeof fetchBQ>,
  BaseQueryError<typeof graphQLBaseQuery> | BaseQueryError<typeof fetchBQ>,
  BaseQueryExtraOptions<typeof graphQLBaseQuery> | BaseQueryExtraOptions<typeof fetchBQ>
> = (args, api, extraOptions) => {
  if (typeof args === 'object' && 'query' in args) {
    return graphQLBaseQuery(args, api, extraOptions);
  } else {
    return fetchBQ(args, api, extraOptions);
  }
};

However, I later came up with the below recipe to make it reusable.

const combineBaseQueries =
  <
    DefaultBQ extends BaseQueryFn<any, any, any, any, any>,
    CaseBQs extends {
      predicate: (arg: unknown, api: BaseQueryApi, extraOptions: unknown) => boolean;
      baseQuery: BaseQueryFn<any, any, any, any, any>;
    }[],
    AllBQs extends DefaultBQ | CaseBQs[number]['baseQuery'] = DefaultBQ | CaseBQs[number]['baseQuery']
  >(
    defaultBQ: DefaultBQ,
    ...caseBQs: CaseBQs
  ): BaseQueryFn<
    BaseQueryArg<AllBQs>,
    BaseQueryResult<AllBQs>,
    BaseQueryError<AllBQs>,
    BaseQueryExtraOptions<AllBQs>
  > =>
  (arg, api, extraOptions) => {
    for (const { predicate, baseQuery } of caseBQs) {
      if (predicate(arg, api, extraOptions)) {
        return baseQuery(arg, api, extraOptions);
      }
    }
    return defaultBQ(arg, api, extraOptions);
  };


// for example
const polymorphBaseQuery = combineBaseQueries(fetchBQ, {
  baseQuery: graphQLBaseQuery,
  predicate: (args) => isPlainObject(args) && 'query' in args,
});

There are a few things to note for the above:

• Case base queries (those with predicates) are checked from left to right, and the first one whose predicate returns true will be used (if none match, default is used).
• There's no way to ensure that extraOptions and args both align for the same base query in the final resulting BQ.
  • The final BQ will use a union for each, meaning it's technically possible to use FetchArgs with graphQLBaseQuery's extraOptions (though this example wouldn't be an issue, seeing as FBQ doesn't actually use extraOptions)
  • It's assumed that if the predicate returns true, the args and extraOptions are both correct.
• This recipe depends on internal types (BaseQueryApi, BaseQueryArg, BaseQueryError, BaseQueryExtraOptions, BaseQueryResult) which would need to be imported from '@reduxjs/toolkit/dist/query/baseQueryTypes'

[EskiMojo14]

wondering if it might be more intuitive to run the cases from right to left, since the default needs to be the first parameter - currently with combineBaseQueries(default, case1, case2, case3) it seems a little awkward 🤔

vs

the only code change would be

-    for (const { predicate, baseQuery } of caseBQs) {
+    for (const { predicate, baseQuery } of caseBQs.reverse()) {