[React-query] 기존 Query Data 갱신, 삭제하는 법

서비스를 만들다 보면 어떤 동작을 했을 때, 기존의 데이터를 새롭게 받아오거나, 삭제해야 하는 경우가 있다.

예를 들면, 다음이 상황이 있을 수 있다.

1. 새로운 포스트를 작성했을 때, 포스트 데이터를 새롭게 받아오는 상황
2. 로그아웃을 했을 때, 사용자 프로필 데이터를 삭제하는 상황

이번 시간에는 React-query를 사용할 때, 기존의 데이터를 갱신하는 법과 삭제하는 법에 대해서 알아보겠다.

 

React-query를 이용해 데이터 받아오기

React-query는 서버 상태 관리 라이브러리 중 하나이다.

해당 글에서 React-query의 자세한 사용 방법은 다루지 않겠다.

구체적인 사용 방법이 궁금한 사람은 아래의 공식문서를 확인하는 것을 추천한다.

TanStack Query | React Query, Solid Query, Svelte Query, Vue Query

 

공식문서에서 소개된 기본 사용법은 다음과 같다. useQuery를 이용해 데이터를 받아온다.

import { useQuery } from '@tanstack/react-query'

function App() {
  const todos = useQuery({ queryKey: ['todos'], queryFn: fetchTodoList })
}

 

기존의 데이터를 어떻게 갱신, 삭제할까?

위의 코드, todos를 예를 들면서 데이터 갱신과 삭제하는 법에 대해 알아보겠다.

 

invalidateQueries - 데이터 갱신해서 새롭게 받아오기

상황은 이렇다. 아래 과정에서 우리는 3을 하는 방법을 알아볼 것이다.

1. 기존에 작성한 todos를 불러온다.
2. 새롭게 todo를 작성한다
3. 새로운 todo를 포함한, 업데이트된 todos를 불러와야 한다.

 

구체적인 코드를 보기 전에, React-query의 상태에 대해 알아봐야 한다.

React-query의 상태 중 fresh와 stale 상태가 있다.

fresh : 만료되지 않은 쿼리 => 컴포넌트가 마운트, 업데이트되어도 재요청 X
stale : 만료된 쿼리 => 컴포넌트가 마운트, 업데이트되면 재요청 O

 

이제 우리의 상황을 다시 보자. 우리는 업데이트된 todos를 불러오기 위해 재요청을 해야 한다.

재요청을 하기 위해서는 다음의 조건이 충족돼야 한다.

1. todos의 상태가 stale 이여야 한다.
2. todos query를 포함한 컴포넌트가 마운트 혹은 업데이트되어야 한다.

상황에 따라서 두 조건 모두를 충족하기에 까다로울 수 있다.

React-query의 invalidateQueries를 활용하면 매우 쉽게 재요청할 수 있다.

import { useQuery, useQueryClient } from '@tanstack/react-query'

...

const queryClient = useQueryClient()

queryClient.invalidateQueries({ queryKey: ['todos'] }) // 해당 query를 명시적으로 refetch 한다.

...

 

 

removeQueries - 데이터 삭제하기

데이터를 삭제하려면 어떻게 해야 할까?

다음의 상황을 예로 들어보자.

1. 로그인한 상태에서, 나의 todos를 불러왔다.
2. 로그아웃을 한다.
3. 로그인을 하지 않았기에, 기존의 불러온 todos를 삭제해야 한다.

로그아웃만 하면, todos가 당연히 삭제될 것처럼 보이지만 실제로는 그렇지 않다.

이를 이해하기 위해서는 React-query의 캐싱을 이해해야 한다.

 

React-query는 자체적으로 캐싱을 하기 때문에, 해당 컴포넌트가 언마운트 돼도 일정시간 (default 5분) 동안 데이터가 저장된다.

캐싱으로 인해서, 로그아웃을 해도 로그인 상태였을 때 불러왔던 todos가 5분 동안 유지되는 것이다.

그래서, 기존의 불러왔던 todos를 명시적으로 삭제하는 과정이 필요하다.

React-query의 removeQueries를 이용해 데이터를 삭제할 수 있다.

 

import { useQuery, useQueryClient } from '@tanstack/react-query'

...

const queryClient = useQueryClient()

queryClient.removeQueries({ queryKey: ['todos'] }) // 해당 query의 데이터를 삭제한다.

...

 

---

 

React-query는 서버 상태 관리를 하기에 아주 좋은 라이브러리라고 생각하기에 활용법을 잘 알아 놓는 것을 추천한다.

 

 

피드백이나 의견은 댓글로 남겨주세요!