How to get RTK Query data outside of component?

Question

I've been creating React Typescript app with RTK Query, and I want to implement custom selectors. But to implement it, I need to get some data from another endpoint:

store.dispatch(userApiSlice.endpoints.check.initiate(undefined))
const data = userApiSlice.endpoints.check.getSomeData

export const selectCartItemsResult = cartApiSlice.endpoints.getCartItems
  .select(data?.user?.id ?? skipToken)

I found solution here. Their solution looks like this:

class TodoService {
   getSelectorForTodo(todoId: string) {
     if (this._lastId !== todoId) 
       this._lastSelector = api.endpoints.getTodo.select( {id: todoId } )
     return this._lastSelector
   }

   getTodoTitle( todoId: string ) {
     const todo = this.getSelectorForTodo(todoId)(state)
     return todo.data.title
   }
}

I do not where to get the state variable. So I come with putting inside store.getState(), but this gives the following error:

const data = userApiSlice.endpoints.check
  .select(undefined)(store.getState())

-->

The types of 'api.queries' are incompatible between these types. Type 'QueryState<{ getCartItems: QueryDefinition<number, BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, "cart", EntityState<...>, "api">; clearCart: MutationDefinition<...>; addItem: MutationDefinition<...>; changeItemQuantity: MutationDefinition<...>; changeItemSize: MutationDefini...' is not assignable to type 'QueryState<{ registration: MutationDefinition<IRegisterBody, BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError, {}, FetchBaseQueryMeta>, "cart", IUserApiState, "api">; login: MutationDefinition<...>; check: QueryDefinition<...>; }>'.

I don't have another idea of how to get a state variable. Please, can you give some example that compiles with typescript but also declares the state variable?

I do not know what you need of all RTK Query implementation. So I will add it when needed

EDIT: cartApiSlice and userApiSlice were created with injectEndpoints.

Answer 1

Because your userApiSlice was injected into your api after your state was created, TypeScript can't know that something was added here - so it complains because the api "in the types" just doesn't have those extra endpoints.

That doesn't mean that it won't work though - it's just that TypeScript is complaining here.

You won't get around telling TypeScript "I know better than you" in this case - do an assertion as any.

const data = userApiSlice.endpoints.check
  .select(undefined)(store.getState() as any)