Need a way to reset state for specific injected API service or endpoints

[kaung-htet-hein-dev]

Need a way to reset state for specific injected API service or endpoints

Description

I am using createApi to define a base API and then injecting additional endpoints using injectEndpoints.

I have:

1. userApiService (injected into baseApi)
   • getUserInformation
   • getUserOrders
2. productApiService (injected into baseApi)

Now, I want to reset the state for:

• All endpoints in productApiService
• Only getUserOrders from userApiService

while keeping getUserInformation state untouched.

Current Behavior

• baseApi.util.resetApiState() resets the entire API state, including all services and endpoints.
• There is no built-in way to selectively reset a specific injected API service or individual endpoints.

Expected Behavior

• Provide a way to reset only a specific injected service (e.g., productApiService).
• Provide an option to reset only a specific endpoint (e.g., getUserOrders) while leaving others (getUserInformation) untouched.

Code Example

baseApi.ts

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

export const baseApi = createApi({
  reducerPath: "baseApi",
  baseQuery: fetchBaseQuery({ baseUrl: "/api" }),
  endpoints: () => ({}),
});

userApiService.ts

import { baseApi } from "./baseApi";

export const userApiService = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getUserInformation: builder.query({
      query: () => "/user/info",
    }),
    getUserOrders: builder.query({
      query: () => "/user/orders",
    }),
  }),
});

export const { useGetUserInformationQuery, useGetUserOrdersQuery } = userApiService;

productApiService.ts

import { baseApi } from "./baseApi";

export const productApiService = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => "/products",
    }),
  }),
});

export const { useGetProductsQuery } = productApiService;

Problem: How to Reset Product API and getUserOrders Only?

Currently, if I use:

dispatch(baseApi.util.resetApiState());

It resets everything, including getUserInformation, which I want to keep intact.

Proposed Feature Request

• Provide an option to reset a specific injected service:

  dispatch(baseApi.util.resetApiState(productApiService.reducerPath)); // Example API
  

• Provide an option to reset only a specific endpoint:

  dispatch(baseApi.util.resetApiState(userApiService.endpoints.getUserOrders.name));
  

Is there any recommended workaround for this scenario?

Thanks! 🚀

[kaung-htet-hein-dev]

can you help me give workaround for this? @phryneas @markerikson

[lord2kim]

@kaung-htet-hein-dev try to do this

getUserOrders: builder.query({
      query: () => "/user/orders",
      providesTags: ["getUserOrdersTag"],
}),

export const productApiService = baseApi.injectEndpoints({
  endpoints: (builder) => ({
    getProducts: builder.query({
      query: () => "/products",
      providesTags: ["getProductsTag"],
    }),
  }),
});

dispatch(productApiService.util.invalidateTags(["getProductsTag"]));
dispatch(userApiService.util.invalidateTags(["getUserOrdersTag"]));

or try updateQueryData

dispatch(productApiService.util.updateQueryData("getProducts", undefined, () => []));
dispatch(userApiService.util.updateQueryData("getUserOrders", undefined, () => []));

[markerikson]

Note that these "additional API services" are actually part of the baseApi by the time everything runs. There isn't a way to distinguish which endpoints came from those extensions at runtime.

I understand the intent of the request, but at this time we don't have any plans to add this capability. If someone wants to file a PR that implements it, we'd be happy to discuss and try to work that through.