[Vue] Vue-Query 총정리

Vue프로젝트에서 사용하는 vue-query(useQuery)에 대해 공부하기 시작했다.

하나하나 뜯어보는것보단 내가 평소에 궁금했던 것들에 답을 하는게 맞는 것 같아서.. 그렇게 해볼려 한다.

 

Vue-Query는 React에서 사용하는 React-Query를 Vue에서 적용할 수 있도록 한 라이브러리이다.

서버상태를 관리하며, Vue에서 비동기로 데이터를 가져오고, 캐싱하고, 동기화 하는걸 만들어준다. back단과 데이터를 주고받고 통신할 수 있도록 도와주는 라이브러리라 생각하면 된다....

 

useQuery란? - SELECT에서 사용, 데이터 조회(GET)

데이터를 서버에서 불러오고, 그 결과가 컴포넌트에서 필요할 때 사용하는 Vue Query의 훅(hook).

데이터를 가져오는 비동기요청을 캡슐화, 로딩/성공/실패 상태를 관리한다. 

• 동일한 요청을 여러 컴포넌트에서 공유할 때
• 요청 결과를 캐싱하거나, 다시 가져올 수 있어야 할때 : 사용자가 페이지를 벗어나고 돌아올 때 데이터를 재요청하고싶지 않다면, useQuery가 자동으로 캐시된 데이터를 보여준다. 혹은 refetch로 수동으로 요청해도 되고..
• 자동 새로고침이 필요한 경우 : 실시간 데이터는 아니지만 주기적으로 갱신되야 할 때(ex. 조회 버튼, 알림 등), refetchInterval을 사용할 수 있다.

useQuery(['notifications'], fetchNotifications, {
  refetchInterval: 10000, // 10초마다 새로고침
})

• 요청 실패 시 자동 재시도할 때

...와 같은 상황일 때 사용한다.

반대로 useQuery를 사용하면 안되는 상황이 있다. 바로 POST, PUT, DELETE와 같이 데이터를 수정할 때, 데이터가 컴포넌트 내부 상태일 뿐 서버 통신과 관련 없을 때, 값 변경이 빈번할 때...

그럼 데이터 수정할땐 뭘 써야 하냐?

useMutation이란? - INSERT, UPDATE, DELETE에서 사용, 데이터 수정(POST etc.)

useMutation은 데이터 변경 작업을 처리하기 위한 Vue Query의 훅(hook)으로, 서버에 데이터를 전송하거나 상태를 변경하는 비동기 작업(POST, PUT, DELETE = insert, update, delete문)를 수행할 때 사용한다. useQuery와 다르게 캐싱이 되진 않는다.

성공, 실패, 진행 상태를 관리하며 작업 후 관련된 쿼리를 무효화(invalidateQueries)를 통해 특정 로직을 사용할 수 있다.

주요 메소드는 다음과 같다.

• mutationFn : 실제 비동기 작업(API요청)을 처리하는 함수
• onSuccess : 작업이 성공적으로 완료됬을 때 실행할 콜백 함수(ex. 데이터 갱신 invalidateQueries, UI업데이트) (제일 많이 쓰임!!!)
• onError : 작업 중 에러가 발생했을 때 실행할 콜백 함수
• onSettled : 작업 성공, 실패 여부와 상관업싱 실행할 콜백 함수

제일 중요한거 2개 알았으니 이 밑은 평소에 궁금했던거 하나씩 추가한다..

---

'캐싱(Cache)'이란

캐싱 : 한번 연산한 값을 반복적으로 출력할 때, 자주 쓰는 정보를 미리 저장하고 필요한 순간마다 빠르게 받아온다는 의미

라고 하면 솔직히 너무 어렵고....

자주 쓰는 데이터를 매번 새로 가져오지 않고 미리 저장했다가 다시 쓰는 것 

이라고 이해하면 되겠다.

useQuery는 서버에서 데이터를 가져오는 순간, 내부에 복사본을 저장(=캐시)해놓는다. 그래서 다음에 또 같은 데이터를 요청한다면 서버에 다시 물어보는게 아닌 저장했던 복사본을 보여주는것!

서버에 불필요한 요청을 줄여준다~💫💫

const {}의 의미

Vue3.js에서 데이터를 불러올 때 다음과 같이 작성한다

const {data : test, refetch} = useTest()

여기서 {} 구조분해 할당(destructiong assignment)라고 한다. 

위에서 useTest()는 객체를 반환하는데, {}는 이 반환된 객체의 속성을 골라낸다.

여기서 가져온 객체의 data라는 속성에 원하는 값이 있으므로, 이 값의 변수명을 test로 짓는다.

refetch는 데이터를 다시 부르는 속성으로, 객체의 속성을 그대로 변수로 만든 것이다. 

queryKey란

Vue Query에서 데이터를 캐싱하고 식별하기 위한 고유키이다. "식별자"

1. Vue Query는 동일한 queryKey를 가진 데이터를 자동으로 캐싱한다. 따라서 동일한 queryKey로 요청하면 네트워크 요청을 하지 않고 캐시된 데이터를 반환한다.
2. 특정 키를 기준으로 데이터를 무효화(invaludate)하거나 다시 가져올 수 있다.

const {data, isLoading} = useQuery({
    queryKey : ['user'], // 고유한 키(배열 형식)
    queryFn : fetchUser, // 데이터를 가져오는 함수
})

혹은 고유한 데이터를 구분하려면(=데이터에 key값이 필요하다면) 키에 추가된 정보를 포함해야 한다.

const {data} = useQuery({
    queryKey : ['user', userId],
    queryFn : () => fetchUser(userId),
})

저렇게 작성하면, userId의 값이 달라질 때 마다 user가 갱신되서 queryFn을 실행한다. 예를 들어,

// userId = 1인 경우
queryKey: ['user', 1]

// userId = 2인 경우
queryKey: ['user', 2]

키가 달라졌으므로 vue-query는 이것을 다른 데이터로 인식하여 queryFn을 새로 실행한다. 

• 처음에 userId = 1일 때, ['user', 1] 캐시가 생성되고 fetchUser(1) 실행
• userId가 2로 변경 → ['user', 2]라는 새로운 캐시 키 → fetchUser(2) 실행
• 만약 다시 userId = 1로 돌아가면? → 이미 ['user', 1] 캐시에 데이터가 있으므로 API를 재호출하지 않고 캐시 데이터를 바로 반

queryFn이란

데이터를 가져오는 비동기 함수로, 서버에서 데이터를 가져오는 로직을 정의한다.

반드시 비동기 함수여야 한다!

queryClient란

Vue query의 중심 객체로, 쿼리 및 캐싱을 등록하고 관리한다.

모든 쿼리와 캐시를 전역에서 관리하며, 쿼리 무효화, 데이터 강제 경신, 캐시 삭제 등의 작업 및 메소드를 수행할 수 있다.

뭐라는지 모르겠지?

언제 다시 가져올지, 무효화할지 결정하는 중앙관리자, 즉 사령탑 같은 존재이다.

우리가 fetch했던 데이터는 다 queryClient라는 창고에 가두고, 나중에 쓰거나 버리는 등을 이 친구가 담당한다.

 

주요 메소드는 다음과 같다.

• invalidateQueries✨✨: "이거 오래됬어. 다시 가져와" = 가장 많이 쓰고 제일 중요한 메소드. 데이터를 다시 가져오라고 vueQuery에게 알리는 것. 서버에 데이터를 insert/update/delete후 캐시에 남은 오래된 데이터를 버릴 때 사용한다.

queryClient.invalidateQueries({
  queryKey: ['ninja', ninja]
})

Vue Query의 핵심 메소드 중 하나이다(체감상 가장 많이 사용한다). 

어려운 말로 insert, update, delete를 통해 데이터가 변경되었을 때 invalidateQueries를 호출하여 Vue Query에게 캐시에 남아있는 오래된 데이터가 더이상 유효하지 않으니 다시 로딩하라고(= refetch하라고) 알려준다. 

➡️ ['ninja', ninja] 에 해당하는 데이터를 Vue Query가 “이거이거 아주 오래됬구만” 하고 자동으로 다시 서버에서 가져온다.

• refetchQueries : "지금 당장 다시 가져와라" = 쿼리를 강제로 다시 가져온다. 실시간 반응이 중요할 때, invalidateQueries로는 타이밍이 늦을까봐 즉시 실행하고 싶을 때 사용한다.

queryClient.refetchQueries({
  queryKey: ['ninja', ninja]
})

캐시는 유효하지만 그래도 다시 fetch하고 싶을 때. 캐시고 뭐고 필요 없다. 당장 서버에서 싱싱한 데이터를 데려오느니라 

같은 느낌이다. 서버의 fetch함수가 다시 실행된다.

 

invalidate가 "다음에 다시 가져와~"면 refetch는 "야 지금 당장 가져와. 안가져와?"의 느낌

• setQueryData : "데이터 내가 직접 고칠거니까 비켜" =  서버에서 값을 다시 받는게 아닌 원하는 값으로 직접 캐시를 수정한다.캐시된 데이터를 수동으로 업데이트 한다.