개발자

react-query에서 invalidateQueries 사용 방법?

2023년 03월 08일조회 761

아래와 같은 코드가 있을 때 로그아웃을 하면 내 정보를 다 삭제해 주려고 합니다. 그 때 invalidateQueries를 사용해서 초기화 시켜주려고 하는데요. 정보가 너무 많아요 혹시 효율적인 방법이 있을까요? 모든 원하는 key의 정보를 한번에 삭제한다던가 하는 함수가 있나요?

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

답변 1

인기 답변

강동희님의 프로필 사진

어떤것을 의도하고 질문을 하신건지 정확히 파악이 안됩니다😿 질문을 해석하면 로그아웃 > 클라이언트에 담긴 정보 삭제를 원함 > 근데 이 때 queryClient 의 invalidateQueries 를 사용해서 초기화 시켜줄 것인데 이때 한번에 key 정보를 삭제해줄 함수를 원한다 라고 정리를 해서 생각해봤을때, 먼저 invalidateQueries 메서드는 전달하는 키의 쿼리들을 stale한 상태로 변경해 리패칭 해주는 함수인데, 초기화를 원하시는데 왜 invalidateQueries 메서드를 사용하시는건지 생각이 듭니다. 만약 해당 키에 패칭을 해서 초기화 해줄수 있는 방식으로 로그아웃이 구현이 된 상태라면, 첨부해주신 코드를 살펴보면 키값이 계층 구조로 되어있는데, 가장 상단에 있는 ”myprofile" 키만 넣어준다면 해당 키를 루트로 가지고 있는 모든 쿼리가 stale한 상태가 되어 리패칭 됩니다. invalidateQueries(['myprofile']) 특정 키값의 쿼리 데이터를 삭제하고 싶으시면 아래 메서드를 사용해보세요. queryClient.removeQueries({ queryKey, exact: true }) 특정 키값의 쿼리 데이터를 리셋하는 메서드도 있으니 참고하시면 좋을것 같습니다. queryClient.resetQueries({ queryKey, exact: true }) 자세한 내용은 @tanstack/react-query 공식 문서를 살펴보시면 좋을것 같습니다. https://tanstack.com/query/latest/docs/react/reference/QueryClient#queryclientinvalidatequeries

profile picture

익명

작성자

2023년 03월 10일

먼저 답변 감사해요 동희님! invalidateQueries를 사용해서 key 정보를 삭제한다기보다는 myProfile의 데이터가 없어서 데이터를 빈것으로 넣고 싶다는 의미였는데 제가 햇갈리게 적은것 같아요. 그런데 답변주신 것처럼 removeQueries를 사용하는 것도 좋아보여요. 한번 적용해 볼게요! 감사합니다!! 그리고 가장 중요한건 가장 상단에 있는 ['myProfile'] 키만 넣어주면 된다는게 좋네요! 각각 키마다 전부 invalidate해야하는줄알고 ㅜㅜ 다 지우려면 언제지우지 하면서 키를 추적하기가 어려웠거든요. 마지막으로 다시한번 정성스러운 답변 감사합니다 :)

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

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

또는

이미 회원이신가요?

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

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

새로운 질문 올리기

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