인프런 커뮤니티 질문&답변

fefefefe님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

react-query onMutate vs onSuccess / mutate vs mutateasync 가장 적절한 쓰임이 궁금합니다.

해결된 질문

24.06.05 02:12 작성

·

200

·

수정됨

0

안녕하세요.

 

첫번째 질문은 onMutate vs onSuccess 인데 사실 낙관적 업데이트를 해주냐 안해주냐에 따라서 기호에 따라 다른 경우는 알겠습니다. 

제가 궁금한거는 onSuccess invalidatequeries를 무지성으로 사용해도 query-key외 따로 전달 되는 params값이 중요하진 않은 것 같아서 쉽게 적용 했었던 기억이 있는 것 같습니다/

 

예를 들면 onSuccess를 해주는 mutation에 invalidatequeries로 invalidatequeries(['key', {...}])를 굳이 안하고 invalidatequeries(['key']) 요거만 해줘도 새로 캐싱된 API를 새로 조회 하는 것 같더라구요.

 

근데 onMutate를 쓰려는 경우에 getQueryData에 query-key 정보와 그에 매칭하는 파라메터를 정확하게 넘겨주지 않으면 undefined 같은데 애초 설계 할때 getQueryData뒤에 보내는 파라메터를 잘 가져 올 수 있게 해야 할지 혹시 다른 방법이 있는지 궁금합니다.

 

query에서 find해서 찾기는 보장이 안되는 것 같구요? 이건 사용자가 셀렉트 박스로 막 선택해서 조회 다시 이전것 조회 요런식으로 하다보니 마지막으로 선택된 파람 정보가 명확하진 않더라구요. 현재는 혹시 모르니 전부 searchParams로 개편은했지만....

 

실제 프로젝트에서는 어드민성(?) 서비스를 제공 해서 ux는 딱히...?????? 엄청 중요한 않기도 했고 지식도 부족해서 onMutate 대신에 onSuccess를 썼지만 보통은 좀 어떻게 잘 써야하는지 궁금합니다.

 

2번째 질문은 이건 진짜 뭘 더 써야하는지 모르겠습니다.

쓰임에 따라 다르게 써야한다면 어떤 경우인지 취향에 차이라면 취향것 쓰면 되는건지 궁금합니다

 

답변 1

1

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

2024. 06. 05. 09:30

invalidatequeries(['key']) 이건 정확히는 ['key'], ['key', 'a'], ['key', 'b'], ['key', {}, {}] 등 첫 번째 요소가 key인 모든 배열 키를 초기화하는 것입니다. 즉, 잘못 쓰면 엄청난 문제가 될 수 있습니다.

그래서 강의에서 말씀드린대로, 큰 분류부터 점점 작은 분류 순으로 나열하는 게 좋습니다. [게시글, 게시글아이디, 댓글, 댓글아이디] 순으로요.

https://tkdodo.eu/blog/effective-react-query-keys

이 글도 읽어보시면 좋습니다.

onMutate, onSuccess는 그냥 옵티미스틱 업데이트 정도 차이로 구분하시면 되겠습니다.

fefefefe님의 프로필 이미지
fefefefe
질문자

2024. 06. 05. 11:42

아 너무나도 필요한 인사이트 글인데 감사합니다.
이런걸 찾아보는 것도 능력인데... 잘 읽어보겠습니다 😀

fefefefe님의 프로필 이미지

작성한 질문수

질문하기