[RTK Query] Geting the inferred type from injectedQueryAPI

[lamhungypl]

I'm curious about the type (dispatch, store) of the injected query api.

I can't import the root store because of the no-circular-import rule

import { queryApi } from '@org/store-data-access';

import { getSomeData } from './feature-a.services';
import { SomeDataResponse } from './feature-a.types';

export const injectedQueryAPI = queryApi.injectEndpoints({
  endpoints: (builder) => ({
    someEndpoints: builder.query<SomeDataResponse, void>({
      queryFn: async () => {
        try {
          const result = await getSomeData();
          return { data: result };
        } catch (error) {
          return { error };
        }
      },
    }),
  }),
});


export const someFunction = async (
  /**
   * TODO: get typing for dispatch or store here - SlicedQueryRootDispatch
   */
  dispatch: (arg: any) => Promise<{ data: SomeDataResponse | undefined }>
) => {
  const { data: myData } = await dispatch(
    myQueryApi.endpoints.someEndpoints.initiate()
  );

  if (!myData) {
    throw redirect(getPath('home'));
  }

  return myData;
};

export const clientLoader: ClientLoaderFunction = async () => {
  await someFunction(store.dispatch);
  return null;
};

[EskiMojo14]

you can import types from the store file, as the import should be removed during compilation

[tamish-max]

A clean solution here is to import the type only from the store file:

import type { AppDispatch } from '@/store'

export async function runLoader(dispatch: AppDispatch) {
  const result = await dispatch(
    injectedQueryAPI.endpoints.someEndpoint.initiate(arg)
  )

  if ('data' in result) {
    return result.data
  }
}

Because it is import type, TypeScript erases it at build time, so there is no runtime circular dependency.

And in your store file:

export type AppDispatch = typeof store.dispatch

If you want a looser fallback that doesn't reference the store module at all, you can also use RTK's thunk dispatch type:

import type { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit'

type AnyAppDispatch = ThunkDispatch<any, any, UnknownAction>

But if this code is always called with your real store.dispatch, AppDispatch is the nicest option because you keep the exact inferred return types for initiate(...).

So yes: import type { AppDispatch } is the practical fix here.

[paramjeetn]

To avoid circular dependencies between your API slice and the root store while maintaining type safety, you can extract the dispatch and state types using RTK's built-in utility types:

import type { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit'
import type { RootState } from './store' // or define a minimal State interface

// 1. Typed dispatch without importing the concrete store instance:
export type AppDispatch = ThunkDispatch<RootState, unknown, UnknownAction>

// 2. Alternatively, extract the specific initiate trigger return type:
export type InjectedEndpointTrigger = ReturnType<
  typeof injectedQueryAPI.endpoints.someEndpoints.initiate
>

export const someFunction = async (
  dispatch: AppDispatch
) => {
  const result = await dispatch(
    injectedQueryAPI.endpoints.someEndpoints.initiate()
  ).unwrap()

  return result
}

Using .unwrap() on dispatch(endpoint.initiate()) directly unwraps the Promise and infers SomeDataResponse without needing manual return-type casting.