redirect to a page after form submssion

[cubecleveland]

HI All,

Use case. React-Query and react-router-dom...

I use useMuattion to submit a form,
Then on OnSuccess Handler i use history.push to redirect to a page.

I noticed that randomlly this fails and freezes the entire app.
I see the new location in the url bar bu the page doesn't get rendered and the app freezes.

I tried moving it to onSettled but that didnt work also.

I tried playing with it but got no where. Finally when i moved to location.replace generic function i get no bugs...

Im guessing this has to do with the promises from react-query...

Any guidness would be so much appreciated (am i doing anything wring)
Roy

[TkDodo]

I use useMuattion to submit a form,
Then on OnSuccess Handler i use history.push to redirect to a page.

I'm also doing that and it works fine - can you maybe reproduce it in a codesandbox? I don't know any specifics why this shouldn't work

[cubecleveland]

here is the calling code :
const FormProvider= ({children, ...props}) => {
//fetching the history object;
let history = useHistory()

// props.mutateFunc contains the mutation i get back from useMutation()
//props.navigate contans the string to navigate to....

async submissionFunction()
lf(typeof props.mutateFunc == 'function')
props.mutateFunc(finalData, {
onSuccess: (data) => {
if(data.status == 'error')
return;
if(props.navigate)
//bug why cant i use history.push9props.navigate) ? maybe because itas a promise ?
location.replace(props.navigate)
}});

}

[TkDodo]

I meant an example in http://codesandbox.io/ that actually runs and shows the erroneous behaviour :)