Typing for RTK Query per sliced in workspaces projects

[lamhungypl]

Context:
I'm working on an NX Pnpm workspace and following the RTK query code-splitting guidelines; injectEndpoints are good fit.

On libs/features-a, I have featureAQuery. My utility functions need to pass the store object or dispatch to the params, and it'd be better if the response can be inferred from the query definition

Question:
What is the type of SlicedQueryRootState, SlicedQueryRootDispatch?

Note that I'm not importing the root store due to circular dependency problems

// me.queries.ts
import { queryApi } from '@org/store-data-access';

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

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

// component.tsx
export const someFunction = async (
  /**
   * TODO: typing for dispatch, SlicedQueryRootDispatch
   */
  dispatch: (arg: any) => Promise<{ data: Data | 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;
};

[sunnypatell]

@lamhungypl for typing dispatch and state from an injected api without importing the root store, use the generic types from redux-toolkit directly:

import type { ThunkDispatch, UnknownAction } from '@reduxjs/toolkit';
import { meQueryApi } from './me.queries';

// wide enough to accept any RTK Query thunk without the actual store type
type AppDispatch = ThunkDispatch<any, any, UnknownAction>;

// state shape that includes your api's cache slice
type ApiState = { [meQueryApi.reducerPath]: ReturnType<typeof meQueryApi.reducer> };

ThunkDispatch<any, any, UnknownAction> is the key -- it's the dispatch signature that RTK Query thunks expect, without needing to know the full root state. since you're in a separate workspace package, you don't need (and shouldn't have) the exact root store type.

for dispatching queries from your utility functions:

export const prefetchMe = (dispatch: AppDispatch) => {
  dispatch(meQueryApi.endpoints.getMe.initiate());
};

ref: RTK Query code splitting -- this pattern is exactly what injectEndpoints was designed for.