enable enhanceEndpoints.transformResponse to override ResultType

[dmitrigrabov]

Fix: #1441

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[netlify]

✅ Deploy Preview for redux-starter-kit-docs ready!

Name	Link
🔨 Latest commit	cb611a0
🔍 Latest deploy log	https://app.netlify.com/sites/redux-starter-kit-docs/deploys/63d81dc3a6c69d0008f6b766
😎 Deploy Preview	https://deploy-preview-2953--redux-starter-kit-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[codesandbox-ci]

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit cb611a0:

Sandbox	Source
Vanilla	Configuration
Vanilla Typescript	Configuration
rsk-github-issues-example	Configuration
@examples-query-react/basic	Configuration
@examples-query-react/advanced	Configuration
@examples-action-listener/counter	Configuration

[cmonteiro128]

Whats the progress on this?

[markerikson]

@cmonteiro128 No specific progress, as you can see by the lack of comments :)

@dmitrigrabov : Sorry for the delay in looking at this. Could you add a "type test" that verifies this compiles and changes the types as expected?

[dmitrigrabov]

@markerikson done

[IanRobertsonPhocas]

What does this need to get it across the line?

[EskiMojo14]

i don't love that these generics are being provided manually, rather than being inferred as they would be in actual usage - could the test be reworked to test the inferrence?

[dmitrigrabov]

The manual generics are the purpose of this pr. Code generation forces the output of transformResponse to match its input since at generation time the output type of a transformResponse function (which will be supplied later) is not known. The purpose of pr is to enable manual override for transformResponse return type so that it can be used inside of enhanceEndpoints. If inference was possible, this pr would not be needed

[cini9]

Is there an ETA for this PR to be merged and the new functionality to be deployed ? I would like to try to plan an rtkq + codegen implementation into my project pipeline.
Thanks :)

[markerikson]

I'll try to get this in over the weekend.

[cini9]

Awesome :) You guys are lifesavers !

[cini9]

Hey guys, thanks a lot for getting this out for us ! I've been trying to get this to work following the test that is run in the commit (createApi.test.ts) and I can't seem to get it working quite right. I'm using codegen to create my api files and then enhance them to return a modified version of the response.

My package.json

My yarn.lock

import {
  DefinitionsFromApi,
  OverrideResultType,
} from '@reduxjs/toolkit/dist/query/endpointDefinitions'
import {
  GetUserQuery,
  api as generatedUserApi,
} from '../generated/user.generated'


type Definitions = DefinitionsFromApi<typeof generatedUserApi>

type GetUserDefinition = OverrideResultType<
  Definitions['getUser'],
  GetUserQuery
>

type UpdatedDefinitions = Omit<Definitions, 'getUser'> & {
  getUser: GetUserDefinition
}

const userApi = generatedUserApi.enhanceEndpoints<string, UpdatedDefinitions>({
  addTagTypes: ['User'],
  endpoints: {
    getUser: {
      providesTags: ['User'],
      transformResponse: (response: GetUserQuery): GetUserQuery['getUser'] =>
        response.getUser,
    },
  },
})

This code is giving me following TS issue :

If I don't manually type the transformResponse callback, like so:

const userApi = generatedUserApi.enhanceEndpoints<string, UpdatedDefinitions>({
  addTagTypes: ['User'],
  endpoints: {
    getUser: {
      providesTags: ['User'],
      transformResponse: response => response.getUser,
    },
  },
})

TS is telling me that response is unknown

Any help on this would be much appreciated !

Thanks again for this functionality and thanks in advance for any help on this issue !

[mattoni]

I'm getting the same 'not assignable to undefined issue as @cini9. I'm trying to override the response to an API endpoint that is auto generated.

[dmitrigrabov]

@cini9 @mattoni

TS is telling me that response is unknown

That is correct. We don't know what the type of response is since it is some data that has arrived from an api.

It could be what you expect or it could be something else. For example, the api could have been updated and changed its response data shape.

As a result we cannot use compile time TS checks to determine the type of response and it has to be unknown. However, you can use something like https://github.com/colinhacks/zod or https://github.com/gcanti/io-ts to perform runtime type checks.

[mattoni]

@dmitrigrabov Sorry I had messed up my typing and that caused the issue. I now have it typed like this:

The only problem is, now every other call in this 'enhanceApi' call I'm making thinks that response (in my case result) is potentially a promise, whereas without this typing, it's not.

Do you know what could cause that?

[dmitrigrabov]

@mattoni I can reproduce the problem in my codebase too. I expect one of the TS helper types needs adjusting. I'll share the fix here once I've figured it out.

[mattoni]

Thanks!

[cini9]

Yeah I think I'm getting the same issue. I've manager to type my enhanced api correctly (I think) to get rid of the 'not assignable to undefined' error like so :

type TransformedGetUser = GetUserQuery['getUser']
type TransformedGetUsers = GetUsersQuery['getUsers']

type Definitions = DefinitionsFromApi<typeof generatedUserApi>
type TagTypes = TagTypesFromApi<typeof generatedUserApi>

type UpdatedDefinitions = Omit<Definitions, 'getUsers' | 'getUser'> & {
  getUsers: OverrideResultType<Definitions['getUsers'], TransformedGetUsers>
  getUser: OverrideResultType<Definitions['getUser'], TransformedGetUser>
}

const userApi = generatedUserApi.enhanceEndpoints<TagTypes, UpdatedDefinitions>(
  {
    endpoints: {
      getUsers: {
        providesTags: ['User'],
        transformResponse: (response: GetUsersQuery): TransformedGetUsers =>
          response.getUsers,
      },
      getUser: {
        providesTags: ['User'],
        transformResponse: (response: GetUserQuery): TransformedGetUser =>
          response.getUser,
      },
    },
  }
)

This gives me the typing in the components in the screen shot below, with my correct type (id: string, firstName: string, etc) followed by the Promise<...> type.

When I try to use the data returned from these queries, I'm getting a 'property id does not exist on type Promise< .... >'

@mattoni Is this similar to what you are experiencing ?

[mattoni]

@cini9 Yes. The problem is that some type is making it think result.data can be either the correct data, or Promise. @dmitrigrabov is working on a fix.

[quentingirard]

Hello guys ! I'm looking to move on with Codegen and I have the same issue as @cini9 and @mattoni.

Is there anyway that I can help ?

[cini9]

Hi guys ! Hope everyone is doing well. Do we have an update on this fix at all ? Whether it's doable or not ? When you think you will be able to look into it ?

Thanks and let us know if there's anything we can do to help out too !

[markerikson]

@cini9 : I'm not clear what the current question is. Can you open a new issue so we can keep track of it? Comments on closed issues aren't really useful for us.

[cini9]

@markerikson : Thanks for your follow up ! As you suggested, I have created a new issue #3443 to track this problem.