개발자

react-query mutation onSuccess에서 여러 개의 invalidateQueries를 기다리는 방법

2023년 02월 20일조회 761

안녕하세요~ React Query invalidateQueries를 효과적으로 사용하는 방법이 궁금합니다. 현재 onSuccess에서 갱신 시켜줄 쿼리 키를 가지고 invalidateQueries를 호출하고 있는데요. (예시 1 참고) 문제는 여러 쿼리 키를 갱신 시켜야되고 해당 작업이 끝날때까지 기다려야하는 경우 어떻게 해야하는지 잘 모르겠습니다. 우선 이런식 (예시 2 참고)으로 할 수 있다는 것은 알고 있는데, return을 사용하지 않으면 invalidateQueries를 기다리지 않고 mutation이 완료되어서 어떻게 하면 invalidateQueries를 기다릴수 있는지 궁금합니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.
profile picture
익명님의 질문

답변 1

인기 답변

손정현님의 프로필 사진

안녕하세요! react-query에서 쿼리키는 계층적 구조를 가져가는걸 추천합니다. ex) 1. ["fetchMovie", movieId] 3. ["fetchMovie", movieId, date, "times"] 이런 구조로 짜여져있다면 invalidateQueries(["fetchMovie", movieId]) 까지만 해주셔도 나머지 2번 쿼리도 invalidate 되는 것으로 알고 있습니다. 만약 이렇게 하기 힘든 구조라면, return 할때 Promise.all로 묶어보시는건 어떤가요? ex) return Promise.all([ queryClient.invalidateQueries(["fetchMovie", movieId]); queryClient.invalidateQueries(["fetchMovieTimes", movieId]); ]) 참고하시면 좋을 것 같은 링크 첨부할게요 :) - https://tkdodo.eu/blog/effective-react-query-keys

profile picture

익명

작성자

2023년 02월 22일

그렇군요..!! 정현님 친절한 답변 감사합니다!

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

목록으로
키워드로 질문 모아보기

실무, 커리어 고민이 있다면

새로운 질문 올리기

지금 가입하면 모든 질문의 답변을 볼 수 있어요!