useMutation passes undefined "dependency" to class that returns a promise

[benacq]

Describe the bug

• I have a repository class and a use-case class(DataRepository and PostUseCase)
• Data repository implements a base repository interface(IRepository).
• The use-case has a 'addNewPost' method which depends on the repository.
• addNewPost calls and returns a "post method" on the injected repository and returns the promise.
• The problem here is, when I log the injected repository inside the addNewPost method, I get undefined.
• Meaning the repository I injected is not reaching the use-case for some reason, but when I call the post method on the repository directly as my mutationFn, it works fine but it doesn't work when I inject the repository and have the use-case call the post method instead.
• I replicated the issue here, added a few comments, please let me know

Your minimal, reproducible example

https://codesandbox.io/s/react-typescript-forked-ijem7?file=/src/some-component.tsx

Steps to reproduce

• On the index page, click on the "Add post" button(payload is hardcoded)
• Check useMutation hook in src/some-component and uncomment the commented mutationFn to see how they behave.
• A successful request will display success on the screen, an error will display error on the screen otherwise you will see idle
• Please check the console when you get an error status.
• Please read the comments to get more context.
• repository can be found in src/repository
• use-case can be found in src/use-cases

Expected behavior

I expect react-query to inject the repository dependency to the use-case so that calling the post function will be deligated to the use-case and react-query will rather depend on the use-case for the Promise

How often does this bug happen?

Every time

Screenshots or Videos

Platform

• OS: Linux
• Browser: Chrome
• Version: Version 97.0.4692.71 (Official Build) (64-bit)

react-query version

v3.34.11

TypeScript version

v4.5.4

Additional context

No response

[rkulinski]

@benacq you are dealing with closure issue. This is how JavaScript treats this word used outside of context. See console.log of value this inside addNewPost

That would fix your issue IMO:

useCase.addNewPost.bind(useCase)

[benacq]

@benacq you are dealing with closure issue. This is how JavaScript treats this word used outside of context. See console.log of value this inside addNewPost

That would fix your issue IMO:

useCase.addNewPost.bind(useCase)

Thank you very much @rkulinski, that worked, I've been stuck on this for days.
Really appreciate.
I will close the issue now.

[pakholeung37]

I would consider this a bug 😕, in react-query src code, it seems it changes This binding.
https://github.com/tannerlinsley/react-query/blob/ba09e16b362c7ebbb64116390a869b59c8bb2b2b/src/core/mutation.ts#L231-L238

In Class Mutation, it calls this.options.mutationFn, which will definitely change the binding to Mutation.

[kavyantic]

This should be market as bug. I am using swagger-codegen to generate client library for a nestjs server and it provider a Api class which takes api configurtion while initilization. Calling the endpoints using the provided Api class methods works correctly according to configuration but when passign the Api method to useMutation() "mutationFn" option the configuration is overidden and assign {_defaulted: true, mutationFn: ƒ, onSuccess: ƒ} to the this variable of the class instance and results in errors.

This is my generated API class from swagger-codegen

const api = new DefaultApi(
  {
    basePath: "http://localhost:8080",
  },
);

// This works fine as expected
api.authControllerSignin({username:"name",password:"pass"})


// This overrides the instance configuration from api.authControllerSignin and the this keyword in 
// api.authConrollerSignin method no longer has this.configuration.basePath and gives error that 
// _cannot read properties of undefined reading this.configuration.basePath_

const signinMutation = useMutation({
    mutationFn: api.authControllerSignin,
    onSuccess(data, variables, context) {
      router.push("/");
    },
  });


// Even this works absolutely fine
const signinMutation = useMutation({
    mutationFn: (param) => api.authControllerSignin(param),
    onSuccess(data, variables, context) {
      router.push("/");
    },
  });