Vue에서만 확인할 수 있는 Tanstack Query의 독특한 패턴
작성자
작성시각
수정시각
레퍼런스
Vide
글을 시작하며
일반적인 Composable 예제
기본 코드
아래는 컴포저블과 컴포넌트 단의 간략한 예제를 담은 코드이다.
// useGetAnyInformation.js
const useGetAnyInformation = ({ boardId } ) => {
const get = () => {
const response = api.get(`...?id=${boardId}`);
return response?.data;
}
return useQuery({
queryKey: ['anyInformation', boardId];
queryFn: get
})l
}
// component.vue
<template>
<span> this is information component </span>
<button @click="() => boardId = boardId += 1;">
</template>
<script setup>
import { ref, watch } from 'vue';
const boardId = ref(0);
const { data } = useGetAnyInformation({ boardId: boardId.value });
</script>위의 코드를 보면 문제점이 하나 발생하는데 사용자는 동적인 데이터를 계속해서 호출하고 싶지만, boardId 는 정적인 상태로 존재하기 때문에 컴포넌트가 리렌더링 되지 않는 이상 단일 데이터를 계속해서 호출하게 되는 문제점이 발생한다. 이 문제를 해결하게 위해서는 boardId 가 변경될 때를 감지하여 리패칭을 해줘야한다. 하지만 내부적으로 캐싱 처리를 진행해야하는 경우에는 리패칭을 하는 것은 캐싱 처리에 아무 의미 없기 때문에 (refetch 메서드는 staleTime 과 상관없이 데이터를 다시 리패치하기 때문이다) 다른 방법을 모색해야한다.
refetch를 이용한 변경안
위에서 이야기한 것처럼 boardId 가 변경될 때를 watch 로 감지하여 매번 리패칭을 해줄 수는 있지만, 캐싱 처리 등 부가적인 요소들을 많이 고려해야한다.
// useGetAnyInformation.js
const useGetAnyInformation = (getParams) => {
const get = () => {
const { boardId } = getParams();
const response = api.get(`...?id=${boardId}`);
return response?.data;
}
return useQuery({
queryKey: ['anyInformation', boardId];
queryFn: get
})l
}
// component.vue
<template>
<span> this is information component </span>
<button @click="() => boardId = boardId += 1;">
</template>
<script setup>
import { ref, watch } from 'vue';
const boardId = ref(0);
// 매번 함수로 넘겨주면서 리패칭을 하게 되면 boardId를 최신화
const { data, refetch } = useGetAnyInformation(() => { boardId: boardId.value });
// boardId를 감지하기 위해 추가된 부분
watch(boardId, () => {
refetch();
});
</script>Proxy 객체를 이용한 변경안
// useGetAnyInformation.js
const useGetAnyInformation = (boardIdRef) => {
const get = () => {
const response = api.get(`...?id=${boardIdRef.value}`);
return response?.data;
}
return useQuery({
queryKey: ['anyInformation', boardIdRef];
queryFn: get
})l
}
// component.vue
<template>
<span> this is information component </span>
<button @click="() => boardId = boardId += 1;">
</template>
<script setup>
import { ref, watch } from 'vue';
const boardIdRef = ref(0);
// 매번 함수로 넘겨주면서 리패칭을 하게 되면 boardId를 최신화
const { data, refetch } = useGetAnyInformation(boardIdRef);
</script>위의 코드를 보면 watch 로 boardId 를 감싸주지 않아도 되고, 또 매번 리패칭을 명시적으로 넣어주는 로직 자체가 사라진 것을 확인할 수 있다. 이러한 차이가 발생하는 이유는 초기 값의 스냅샷이나, 아니면 반응형 참조에 따라 다르다는 것을 의미한다. 정적인 문자열로 선언할 경우에는 초기 시점에서의 문자열을 계속해서 가지고 서버에 호출하게 되지만, ref 그 자체를 넘기게 되면 proxy 객체 자체를 넘기는 과정이기 때문에 .value 를 계속 읽으며 Reactive 하게 동작시킬 수 있다는 것이다.
이벤트 자체에서 호출하는 방법을 이용한 변경안
queryClient 의 fetchQuery 를 사용해 직접적으로 필요할 때마다 호출하는 방법이 있다. 다만 fetchQuery 는 useQuery 처럼 ref 와 같이 proxy 객체로 감싸지 않고, 순수 데이터가 들어온다는 것을 주의해야한다.
...
const queryClient = new QueryClient();
const data = await queryClient,fetchQuery({
queryKey: ['anyInformation', boardId];
queryFn: async () => {
const response = api.get(`...?id=${boardIdRef.value}`);
return response?.data;
}
});
console.log(data) // data.value로 접근을 하는 것이 아니라, 직접 data에 접근하면 된다.
아래는 React.js와 Vue.js의 예제이다. useState 와 ref 를 비교해보면 재밌는 상황이 발생한다. React.js에서는 useState 를 사용하는데 getter 와 setter 형태를 제공해주어 queryKey 에 들어가는 타입은 string 이 된다. Vue.js는 proxy 기반 자동 반응형 전역 시스템을 사용하기 때문에 객체 · 값을 감싸고 객체 프로퍼티 접근을 자동으로 추적해 값이 바뀌면 알아서 재실행 및 렌더링을 시켜준다. Reactive 라는 개념이 Vue.js에서 특화된 개념이기 때문에, Vue.js 에서만 가능한 패턴이기도 하다.
// react
const [boardId, setBoardId] = useState('');
useQuery({
queryKey: ['board', boardId], // 일반 문자열로 인식
queryFn: ...
});
// vue
const boardId = ref('');
useQuery({
queryKey: ['board', boardId], // `ref` 반응형 감지
queryFn: ...
});