API Composition

[gormonn]

In my case, the following happens:

I have a lot of dissimilar tables from the same API, let's say these are endopoints:
/apples (color, weight, variety, count)
/roads (year of construction, year of reconstruction, name of contractor, etc.)

I can do different things on tables by substituting arguments to endpoints, let's call it Tooling:
filtering /apples?color=red&count_gte=2
sorting /roads?sorting=-year_of_construction
pagination /apples?limit=1000&offset=0
grouping - here you need to make a chain of requests to /apples or /roads

There is also an OPTIONS query for each table to get the parameters of the columns.
and /{apples or roads}/group-keys - to get keys of table (color, count, year_of_** etc.) - no make filtering/sorting/grouping happen

In general, looking at Tooling, you can see that these are repetitive actions. So I did the following:

1. created a HOC for table components: withTableTooling - where queries are assembled based on data from sorting and filtering panels.

2. Further, the common component of the table, in which queries are made to obtain options and keys:

  useEffect(() => {
    dispatch(resetTableFunctions());

    const optionsGetter = dispatch(
      apis[apiKey].endpoints.getListOptions.initiate(null),
    );
    optionsGetter.then(({ data, status, error }: any) => {
      if (status == 'fulfilled') {
        dispatch(setSerializer(data.serializer));
      }
      if (error) {
        console.error(
          new Error(`(${apiKey}) getListOptions query failed! error: ${error}`),
        );
      }
    });

    const columnOperatorsGetter = dispatch(
      apis[apiKey].endpoints.getColumnOperators.initiate(null),
    );
    columnOperatorsGetter.then(({ data, status, error }: any) => {
      if (status == 'fulfilled') {
        const results = data as [ColumnOperatorsDataType, GroupKeysDataType];
        dispatch(setColumnOperators(results));
      }
      if (error) {
        console.error(
          new Error(
            `(${apiKey}) getColumnOperators query failed! (${apiKey}) error: ${error}`,
          ),
        );
      }
    });

    return () => {
      optionsGetter.unsubscribe();
      columnOperatorsGetter.unsubscribe();
    };
  }, [dispatch, apiKey]);

Where apiKey: 'appleApi' | 'roadsApi'
Where apis:

export { appleApi } from './appleApi';
export { roadsApi } from './roadsApi';

Where appleApi:

const appleApiBase = createApi({
  reducerPath: 'appleApi',
  baseQuery: fetchBaseQuery({
    baseUrl: getBaseUrl('api/v1/apple'),
    prepareHeaders: prepareHeaders,
  }),
  endpoints: (builder) => ({
    getAppleList: builder.query<
      PaginatedAppleListList,
      operations['apple_list']['parameters']['query'] & { filtering?: string }
    >({
      query: ({ limit = 0, offset = 0, ordering, filtering }) => {
        return `/?limit=${limit}&offset=${offset}&ordering=${ordering}&${filtering}`;
      },
      transformResponse: PaginatedCarPassportListListFromJSON,
    }),
  }),
});

export const appleApi = appleApiBase.injectEndpoints(tableTools);

export const {
  useGetAppleListQuery,
  useLazyGetAppleListQuery,
} = appleApi;

Where tableTools:

export const tableTools = {
  endpoints: (builder: EndpointBuilder<BaseQueryFn, string, string>) => ({
    getListOptions: builder.query({
      query: () => ({
        url: '/',
        method: 'OPTIONS',
      }),
      transformResponse: OptionsTransformer,
    }),
    getColumnOperators: builder.query({
      query: () => `/group-key/`,
      transformResponse: ColumnOperatorsTransformer,
    }),
    getGroupValues: builder.query<
      GroupContainerRaw[],
      ListsQueryProps & {
        key: string;
        filtering?: string;
        sort?: string;
      }
    >({
      query: ({ key, filtering }) =>
        `/group-value/?key=${transformKey(key)}&${filtering}`,
      transformResponse: GroupValueKeysTransformer,
    }),
  }),
};

And it works, however it doesn't seem to be very good.
For example, I cannot use extraReducers: builder => builder.addMatcher(aplleApi.endpoints.getGroupValues.matchFulfilled, (state, action)=>{...}) inside slice. So this logic is done "by hand in the component" above.

Thus, I thought I could create a table API based on tableTools

It seems to me that I could get by with one API - only if it was possible to pass an additional parameter to the request url.

since requests differ in paths:
/apples/group-key
/apples - GET - have different transformResponse and arguments we get from /apples/group-key
/apples - OPTIONS
/apples/group-value

/roads/group-key
/roads - GET - have different transformResponse and arguments we get from /roads/group-key
/roads - OPTIONS
/roads/group-value

Thus, I thought I could create a table API based on tableTools. However, in this case, I cannot change the baseUrl of the getListOptions, getColumnOperators, getGroupValues requests.

[gormonn]

Try to use:
extraReducers: builder => builder.addMatcher(action => aplleApi.endpoints.getGroupValues.matchFulfilled(action), (state, action)=>{...})