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

Question

안녕하세요~ React Query invalidateQueries를 효과적으로 사용하는 방법이 궁금합니다. 현재 onSuccess에서 갱신 시켜줄 쿼리 키를 가지고 invalidateQueries를 호출하고 있는데요. (예시 1 참고)

문제는 여러 쿼리 키를 갱신 시켜야되고 해당 작업이 끝날때까지 기다려야하는 경우 어떻게 해야하는지 잘 모르겠습니다. 우선 이런식  (예시 2 참고)으로 할 수 있다는 것은 알고 있는데, return을 사용하지 않으면 invalidateQueries를 기다리지 않고 mutation이 완료되어서 어떻게 하면 invalidateQueries를 기다릴수 있는지 궁금합니다.

손정현 · Accepted Answer

안녕하세요!

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