Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
kaung-htet-hein-dev opened this issue Mar 4, 2025 · 0 comments

Comments

@kaung-htet-hein-dev
Copy link

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! 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant