How to Maintain Dynamic RTK Query Tag Validation and Invalidation for Multiple API Slices in Redux Toolkit? - Stack Overflow

admin管理员组

文章数量:1287628

I'm working on a project using Redux Toolkit (RTK) Query to manage multiple API endpoints, where each API slice is constructed dynamically through a function. My goal is to maintain a dynamic approach to validate and invalidate tags for each API slice individually.

Here's the structure I'm working with:

General RTK Query Slice Constructors: I have two functions, createGeneralApiQueryCaller and createGeneralCommandApiCaller, which define the query and mutation endpoints respectively. Each API slice gets dynamically created using these functions.

import { fetchBaseQuery } from '@reduxjs/toolkit/query';
import { createApi } from '@reduxjs/toolkit/query/react';

export const createGeneralApiQueryCaller = ({ reducerPath, baseUrl, prepareHeaders }) => {
  return createApi({
    reducerPath,
    baseQuery: fetchBaseQuery({
      baseUrl,
      prepareHeaders,
    }),
    endpoints: builder => ({
      getData: builder.query({
        query: infoApi => ({
          url: `${infoApi.url}`,
          params: infoApi.filter,
        }),
        transformResponse: (response) => {
          if (response.code === 200) {
            toast.success('Operation successful');
          }
          return response;
        },
      }),
    }),
  });
};

export const createGeneralCommandApiCaller = ({ reducerPath, baseUrl, prepareHeaders }) => {
  return createApi({
    reducerPath,
    baseQuery: fetchBaseQuery({
      baseUrl,
      prepareHeaders,
    }),
    endpoints: builder => ({
      postData: builder.mutation({
        query: infoApi => ({
          url: `${infoApi.url}`,
          method: 'POST',
          params: infoApi.filter || undefined,
          body: infoApi.body || undefined,
        }),
      }),
      putData: builder.mutation({
        query: infoApi => ({
          url: `${infoApi.url}`,
          method: 'PUT',
          params: infoApi.filter || undefined,
          body: infoApi.body || undefined,
        }),
      }),
      deleteData: builder.mutation({
        query: infoApi => ({
          url: `${infoApi.url}`,
          method: 'DELETE',
          params: infoApi.filter || undefined,
          body: infoApi.body || undefined,
        }),
      }),
    }),
  });
};

API Gateway: I have a central API gateway where I instantiate multiple APIs using the constructors defined above. Each API has a unique slice and can be queried or mutated using hooks generated by RTK Query.

export const MDMApi = createGeneralApiQueryCaller({
  reducerPath: 'MDMApi',
  baseUrl: baseURLs.MDMApi,
});
export const meetingRoomQueryAPI = createGeneralApiQueryCaller({
  reducerPath: 'meetingRoomQueryAPI',
  baseUrl: baseURLs.meetingRoomAPI.queryBaseURL,
});

The Problem: Now I want to ensure that I can dynamically handle tag validation and invalidation. Since each API slice is independent, how can I manage tags to track which data needs to be invalidated when a mutation occurs (like post, put, or delete)?

For instance, if I call a putData mutation on meetingRoomCommandAPI, how can I invalidate the tags for the related meetingRoomQueryAPI automatically?

I’ve looked into the providesTags and invalidatesTags options for each endpoint in RTK Query, but I'm unsure how to implement this dynamically across multiple API slices that use different base URLs.

What I’ve Tried: I’ve tried manually setting providesTags and invalidatesTags for each slice, but the approach becomes cumbersome as the number of slices grows. I am using the reducerPath to dynamically set the name for each slice, but I need a more scalable way to manage tag invalidation across multiple endpoints without manually specifying tags for each mutation. Can anyone provide insight into how I can effectively maintain dynamic validation and invalidation tags for these API slices using RTK Query?

本文标签：