mutation callback called twice

[hyusetiawan]

the callback inside useMutation seems to be called twice, once before the request has finished (or before sent, i am not sure because the state.isLoading is false for both calls) then the second time once the request is finished:

useMutation(() => {
state.isLoading // is always false
// I am called twice
} )

is this an intended behavior? If so, how do I prevent the double invocation?

[hyusetiawan]

it seems useMutation has 3 callbacks, the callback that is passed as the first parameter, the onComplete then onError the docs don't really say the difference between the first passed in callback vs onComplete, is there any difference? can I just use onComplete somehow?

useMutation(() => {
 // when do I get called?
}, {
onComplete: () => {
  // can I just use this?
},
onError: () => {
 // and this, instead of the first callback above
}
})

[vicary]

The first callback is designed for GQty to collect the mutation contents, please only do query inputs and field selections there. GQty may call it multiple times for each fetch, because of how React rendering works. (isLoading is one of the factors to consider)

1. If you want to run some code only after a successful response, you may use the onComplete callback.
2. Likewise, if you want to run codes on a server error response, you may use the onError callback.

Everything thrown from your query fetcher is considered a server error, so you may further customize how it behaves there.

[hyusetiawan]

I think this expectation needs to be documented, the examples in the docs imply that you can do operations here but in reality this is the return selection

[vicary]

Definitely worth considering, I'll add that to my plans.

[hyusetiawan]

@vicary how does the query selector handle if statements? for ex: (returned) => someBoolean ? returned.id : returned.email ?

[vicary]

It depends on where someBoolean comes from.

Technically you can write this statement inside the query selector, but if the fetch result may change the boolean in the chain of effects, you may get infinite fetches. The best solution is to always fetch both fields, but only return one of them from the query selector.