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

[ryerrappa]

Sample repo reproducing the issue can be found here: https://github.com/ryerrappa/rtk-query-type-import-issue

• @reduxjs/tookit 2.0.1
• Vite 5.0.0
• Typescript 5.2.2
• tsconfig moduleResolution "bundler"

Receive the following error when attempting to import the MutationTrigger type.

Cannot find module @reduxjs/toolkit/dist/query/react/buildHooks

Using vite with the following tsconfig.

{
  "compilerOptions": {
    "composite": true,
    "skipLibCheck": true,
    "module": "ESNext",
    "moduleResolution": "bundler",
    "allowSyntheticDefaultImports": true
  },
  "include": ["vite.config.ts"]
}

[markerikson]

Yeah, the problem is you're specifically referencing that path, and it doesn't exist :)

import {MutationTrigger} from "@reduxjs/toolkit/dist/query/react/buildHooks";

That type is actually internal - I don't think we export it.

Why are you trying to use it?

[ryerrappa]

Ahh, thanks for letting me know. I was previously importing it on a pre 2.0 version of RTK.

My use case was to send the mutation trigger along with some other args to a util function that performs some common functionality to all mutations belonging to a specific API. Something like

export const handleSubmitFormMutation = async <
  ServiceMethod extends MutationTrigger<never>,
  RequestBody
>(
  serviceMethod: ServiceMethod,
  serviceMethodArg: Parameters<ServiceMethod>[0],
  successHandler: () => void,
  setFormError: UseFormSetError<RequestBody>
) => {
  try {
    await serviceMethod(serviceMethodArg).unwrap();
    // Some other stuff
  } catch (error) {
    // setting errors on the form
}

[lcharlois-neotys]

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.

[lcharlois-neotys]

@markerikson Would you accept a PR for this issue?

[markerikson]

Probably, yeah, if it's just exporting some additional types. Most of our types have been internal, because we didn't anticipate end users trying to make use of them.

[EskiMojo14]

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.

[TNMCook]

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.

[ryerrappa]

@EskiMojo14 That seems to work well. Thanks for your suggestion!

[tylerlaprade]

I have the same problem. I'm importing both UseMutation and MutationTrigger from @reduxjs/toolkit/dist/query/react/buildHooks, as well as EndpointBuilder and EndpointDefinitions from @reduxjs/toolkit/dist/query/endpointDefinitions, but that's causing me problems with TypeScript now attempting to typecheck Redux files in my node_modules/. I would greatly appreciate these types being exposed, since they're useful when writing generic functions to interact with or generically generate RTKQ functions.

[lcharlois-neotys]

@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';