[react-query] what happens to query if component unmounted?

react-query and unmount

react-query의 query문을 붙여둔 component가 unmount되면 무슨 일이 일어날까?? 그동안 당연히 unmount되면 disable 되면서 cancel이 될 것이라고 생각했는데... 놀랍게도 아니었다! (이는 mutation도 해당이다.)

By default, queries that unmount or become unused before their promises are resolved are not cancelled. ... 중략 ... If you mount the component again and the query has not been garbage collected yet, data will be available. However, if you consume the AbortSignal or attach a cancel function to your Promise, the Promise will be cancelled (e.g. aborting the fetch) and therefore, also the Query must be cancelled.

https://react-query.tanstack.com/guides/query-cancellation#default-behavior

이러한 이유로 모달 창에서 저장 버튼 등에 ajax 요청(mutation)을 달아 놓았을 때, onSuccess, onMutate 등에 말고 그 전에 미리 모달 창 닫기 등의 작업을 먼저 할 수 있다.

const handle = async  () => {
	// 여기에서 미리 작업을 하고 넘어가도 된다.
  	closeModal() // 이 컴포넌트가 unmount되어도 mutation은 잘 일어난다!
    try {
      await  mutation.mutateAsync()
    } catch (err) {
      console.log(error)
    }

}