useMutate 사용법

mutate의 뜻이 일단 뭐냐??

변형시키는 것이다. react-query에서 mutate는 query cache를 인위적으로 바꾸는 것이다. 크게 3단계로 mutation이 일어난다.
onMutate -> fetch -> onSucess/onError -> onSettle

1. onMutate
   : api 호출하기 전 실행된다. 그래서 setQueryData를 이용해서 일단 query cache를 mutate한다.

2. onSuccess/onError
   : api 호출 이후에 실행된다. 여기서 api 호출로 return 된 데이터를 다시 setQueryData로 실제 fresh 데이터를 교체해도된다. 아니면 다음 onSettle에서 invalidateQuery를 해도 된다.

3. onSettle
   : 2번이후 무조건 실행된다.
   이때 invalidateQuery를 실행해서 query key 실행시 사용되었던 fetch function을 사용해서 다시 fresh한 데이터로 query key를 갱신하는것이다.

예를 들면, invalidateQueries([todos]) 라면 [todos,1] / [todos,2]... 의 모든 query cache가 다 refetching된다.

아니면 특정 query cache만 invalidate하고 싶으면 아래 문서를 보면 된다.

https://tanstack.com/query/v4/docs/react/guides/query-invalidation#query-matching-with-invalidatequeries

이런식으로 api 요청에 따라 query cache를 자유자재로 변형하고 자동 교체할 수 있다.