redux-toolkit: Error with tsc when attempting to import types from RTK Query using @reduxjs/toolkit 2.0.1

Hello,

I’m facing the same kind of issue with the UseQuery type.

import { UseQuery } from '@reduxjs/toolkit/dist/query/react/buildHooks';

The use case is globally the same, having a utility method doing generic things on hooks results.

It will be nice to see these types being exported if possible.

The type helpers from https://github.com/reduxjs/redux-toolkit/pull/4147 have been released in version 2.2.0.

For what it’s worth @kThayer2 we generally recommend using the real hooks and real network requests, and intercepting using MSW, rather than mocking hooks.

I’m in the same boat as @lcharlois-neotys. I have a function that expects a query hook as a parameter and acts as a utility to handle various status changes and extract some common data. It looks something like this:

const usefulUtility = <ResultType>((queryHook: UseQuery<QueryDefinition<unknown, BaseQueryFn, string, ResultType>>, queryArg?: unknown) => {
    ...
    const {data, isSuccess, isError} = queryHook(queryArg);
    ...
    // Do useful stuff that would otherwise be repeated in multiple places 
    ...
}

It would be nice to have a type to easily encapsulate what a useWhateverQuery hook looks like. I’ve worked around it with my own type of (arg?: QueryArg) => TypedUseQueryHookResult<ResultType, QueryArg, BaseQueryFn>, but it would be nice to have a user accessible type for what a useSomethingQuery() looks like.

I created a PR exposing one more type: https://github.com/reduxjs/redux-toolkit/pull/4289, merging would allow me to upgrade to RTK 2!

@tylerlaprade TypedUseMutation is exported, it just takes different (friendlier) generics.

@tylerlaprade I’m working on a PR to expose more types.

For EndpointBuilder and EndpointDefinitions you can already import them like this as they are exported.

import { EndpointBuilder } from '@reduxjs/toolkit/query';

for what it’s worth, with passing triggers I tend to just type them based on how I intend to use them. For example, with the above example:

export const handleSubmitFormMutation = async <
  MutationArg,
  RequestBody
>(
  serviceMethod: (arg: MutationArg) => { unwrap(): Promise<unknown> },
  serviceMethodArg: MutationArg,
  successHandler: () => void,
  setFormError: UseFormSetError<RequestBody>
) => {
  try {
    await serviceMethod(serviceMethodArg).unwrap();
    // Some other stuff
  } catch (error) {
    // setting errors on the form
  }
}

that way, you’re putting forward a minimum contract you expect from the trigger, and Typescript can compare your trigger against the contract to make sure it’s compatible.