리액트쿼리와 캐싱

1. 리액트쿼리 컨셉

stale-while-revalidate (RFC 5861)

fresh

• 새롭게 추가된 쿼리 & 만료되지 않은 쿼리

• 컴포넌트가 업데이트 되더라도 데이터 재 요청 X

fetching

• 요청 중인 쿼리

stale

• 만료된 쿼리

• 컴포넌트가 마운트, 업데이트 시 데이터 재 요청 O

inactive

• 비 활성화된 쿼리

• 특정 시간이 지나면 가비지 컬렉터(GC)에 의해 제거

zero-config

staleTime : default 0

cacheTime : default 5분 (60*5*1000)

refetchOnMount, refetchOnWindowFocus, refetchOnReconnect : true

retry : default 3번

retryDelay : default exponential backoff function

• 데이터가 화면에 마운트된 후 10초 후에 사라지고 다시 10초 후에 보여질 때, 여전히 30초가 지나지 않았다면 Fresh 상태로 간주되어 refetch가 발생하지 않는다.

• 반대로, 30초가 지나면 Stale 상태로 간주되어 refetch가 이루어진다.

1. query의 cached data 는 언제나 stale 취급

2. 각 시점에서 data 가 stale 하면 항상 refetch 가 발생

3. inactive query 들은 캐시타임 만료 시 가비지컬렉터에 의해 처리

4. query 실패 시 세번까지는 retry 발생

세가지 컨셉

2. Stale time 과 Cache time

Stale time

숙영이는 배가고파 배달의민족 어플을 통해 떡볶이를 주문 하였다. 주문직후 숙영이의 핸드폰에는 주문접수 전으로 보이나, 사장님은 바로 주문접수를 하고 음식을 만들기 시작한다. ⇒ 이때 숙영이의 핸드폰에 보이는(client) 떡볶이 주문데이터 상태는 stale 한 것이다.

• 새로운 쿼리 인스턴스 ( refetchOnMount )

• 윈도우가 다시 포커스 되었을 때 (탭전환등) (refetchOnWindowFocus)

• 네트워크가 끊겼다가 다시 연결되었을 때 (refetchOnReconnect)

• refetch interval 설정에 따라 다시 데이터를 호출할 때 (refetchInterval)

Cache time

//example

const { data } = useQuery('users', getUsers, {
  staleTime: 5000,
  cacheTime: 1000 * 60 * 5,
})

3. 리액트쿼리 플로우

리액트쿼리의 흐름상태

• fetching이 먼저 일어난다.

• 만약 stale time을 0보다 크게 설정할 경우 stale time이 만료되기 전까지는 fresh 상태를 유지하고 만료되면 stale상태가 된다.

• 스크린에서는 사용되는동안 계속 stale 한 상태로 유지가 된다. (active)

• 스크린에서 날라가면 쿼리가 inactive 상태가 된다.

• 내부 메모리에는 캐시타임이 만료되기 전까지 갖고있고 캐시타임이 지나면 가비지 컬렉터가 소환해가면서 메모리에서 삭제가 된다.

QueryClient의 전역 상태관리

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	<React.StrictMode>
		<QueryClientProvider client={queryClient}>
			<UserContextProvider>
				<BrowserRouter>
					<App />
				</BrowserRouter>
			</UserContextProvider>
		</QueryClientProvider>
	</React.StrictMode>,
);

GitHub - TanStack/query: 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. - GitHub - TanStack/query: 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

https://github.com/TanStack/query

4. 리액트쿼리 옵션

• cacheTime : unused 또는 inactive 캐시 데이터가 메모리에서 유지될 시간. 기본값은 5분이며 설정한 시간을 초과하면 가비지콜렉터가 메모리에서 제거한다.

• staleTime : 쿼리 데이터가 fresh 에서 stale로 전환되는데 걸리는 시간. 기본값은 0이다.Infinity로 설정하면 쿼리 데이터는 직접 캐시를 무효화할 때까지 fresh 상태로 유지된다.캐시는 메모리에서 관리되므로 브라우저 새로고침 후에는 다시 가져온다. 보통 쉽게 변하지 않는 컴포넌트에 한해 staleTime을 지정한다.

• isLoading : 캐시가 없는 상태에서 데이터 요청 중인 상태

• isFetching : 캐시의 유무 상관없이 데이터 요청 중인 상태, 데이터가 fetch될 때 true, 캐싱 데이터가 있어서 백그라운드에서 fetch되더라도 true

• isError : 서버 요청 실패에 대한 상태

• Infinity : 쿼리 데이터는 캐시에서 제거되지 않는다.

• enabled :  false 값이 전달되면 쿼리가 비활성화된다.데이터 요청에 사용할 파라미터가 유효한 값일 때만 true를 할당하는 식으로 활용할 수 있다.

• onSuccess : 쿼리 함수가 성공적으로 데이터를 가져왔을 때 호출되는 함수.

• onError : 쿼리 함수에서 오류가 발생했을 때 호출되는 함수.

• onSettled : 쿼리 함수의 성공, 실패 두 경우 모두 실행된다.

• keepPreviousData : 쿼리 키(ex.페이지 번호)가 변경되어서 새로운 데이터를 요청하는 동안에도 마지막 data값을 유지한다. 페이지네이션을 구현할 때 유용하다. 캐시되지 않은 페이지를 가져올 때 화면에서 목록이 사라지는 깜빡임 현상을 방지할 수 있다.

• isPreviousData : 값으로 현재의 쿼리 키에 해당하는 값인지 확인할 수 있다.

• initialData : 캐시된 데이터가 없을 때 표시할 초기값. placeholder로 전달한 데이터와 달리 캐싱이 된다. 브라우저 로컬 스토리지에 저장해 둔 값으로 데이터를 초기화할 때 사용할 수 있을 것이다.

• refetchOnWindowFocus : 윈도우가 다시 포커스되었을 때 데이터를 호출할 것인지 여부. 기본값은 true이므로 필요없다고 판단되면 끄면 된다.

• refetchOnMount : 컴포넌트 마운트 시 새로운 데이터 패칭. default는 true로, false일 경우 마운트 시 새로운 데이터를 가지고 오지 않는다.

• refetchInterval : 지정한 시간 간격 만큼 데이터 패칭. 브라우저에 포커스가 없을 때 실행되지 않는다.

• refetchIntervalInBackground : default 는 false. 브라우저에 포커스가 없어도 refetchInterval에서 지정한 시간 간격만큼 데이터 패칭

5. 리액트쿼리 사용 전후 비교

1. 온보딩 예시

	
	const postID = useParams().id;
  const [commentList, setCommentList] = useState([]);
	const [comment, setComment] = useState("");
	const [isFocus, setIsFocus] = useState(false);
  const [isLoading , setIsLoading] = useState(false);
  const [isErr , setIsErr] = useState(false)

	//get 요청
  useEffect(()=>{
		const getCommentList = async () => {
      if(!postID) return;
			try{
				const resp = await GETCOMMENTLIST({ post_id: postID })
				setIsLoading(true)
				setTimeout(()=>{
					setIsLoading(false)
					setCommentList(resp)
				},1500)
			}catch(err){
				setIsErr(true)
				console.dir('err::',err!)
			}

		}
	getCommentList()

 },[])

  if(isLoading) return <Loading />
  if(isError) return <Error />
	
	//별도의 상태없이 useQuery 에서 가져온 값을 바로 뿌려주고 있다.
	{commentList?.data.map((comment, idx) => {
					return (
						<li key={idx}>
							<div className="comment-button-box">
								<SmallButton
									onClick={() => handleDeleteComment.mutate(comment.id)}
									text={"삭제"}
									disabled={comment.user_id !== userInfo.id}
								/>
							</div>
						</li>
				);
	})}

	
	const postID = useParams().id;
	const queryClient = useQueryClient();
	const [comment, setComment] = useState("");
	const [isFocus, setIsFocus] = useState(false);

	
	//get 요청
	const { data: commentList , isLoading, isError,isFetched } = useQuery(["getCommentList", postID], () =>
		GETCOMMENTLIST({ post_id: postID }),
		{
			enabled: !!postID,//postID 가 유효한 값일때만 받아온다. 
			retry: 1, //디폴트값은 3. 데이터를 제대로 fetch 못할경우 계속 재시도 하는것이아니라 한번만 재시도 한다.
		},
	);

  if(isLoading) return <Loading />
  if(isError) return <Error />

	
	//별도의 상태없이 useQuery 에서 가져온 값을 바로 뿌려주고 있다.
	{commentList.data.map((comment, idx) => {
					return (
						<li key={idx}>
							<div className="comment-button-box">
								<SmallButton
									onClick={() => handleDeleteComment.mutate(comment.id)}
									text={"삭제"}
									disabled={comment.user_id !== userInfo.id}
								/>
							</div>
						</li>
				);
	})}

// 같은컴포넌트가 아니라면 props drilling 혹은 클라이언트 상태관리툴을 이용해 가져온다.
const PostComment = ({commentList, setCommentList}) => 
{
	id,
	title,
	content,
	createdAt,
	updatedAt
} = commentList

	const handleDeleteComment = useCallback(async (commentID) => {
			try{
				await DELETECOMMENT({ comment_id: commentID })
				const filtering = commentList.filter((list)=>list.id !== commentID)
				setCommontList(filtering)
			}catch(err){
				console.dir(err)
			}
	},[])
}

const PostComment = () => 	{
const queryClient = useQueryClient();
	
	//delete 요청
	const handleDeleteComment = useMutation(
		(commentID) => DELETECOMMENT({ comment_id: commentID }),
		{
			onSuccess: () => queryClient.invalidateQueries("getCommentList"),
			onError: (error) => {
				console.dir(error);
			},
		},
	);
...
}

const PostComment = ({commentList, setCommentList}) => 
{
	id,
	title,
	content,
	createdAt,
	updatedAt
} = commentList

const [comment, setComment] = useState("");

const handleSubmitComment = useCallback(async() => {
		const sendingData = {
				post_id: postID,
				user_id: userInfo.id,
				name: userInfo.name,
				comment
		}
		try{
			const response = await ADDCOMMENT(sendingData),
			const today = new Date()
			//ui에 맞게 편집작업 해줘야 한다. 이게 상당히 노가다. 
			//상황에 따라 엄청난 prosp drilling 해줘야 할 수 있음.
				setCommentList([{response, content:{response.content}, updatedAt:today}] ,...commentList)
		
		}catch(err){
			console.dir(err)
		}

},[commentList,comment])

}

const PostComment = () => {

const queryClient = useQueryClient();
const [comment, setComment] = useState("");

const addCommentMutation = useMutation(
		(commentData) => ADDCOMMENT(commentData),
		{
			onSuccess: () => {
				setComment("");
				return queryClient.invalidateQueries("getCommentList");
			},
			onError: (error) => {
				console.dir(error);
			},
		},
	);

	const handleSubmitComment = (e) => {
		e.preventDefault();
		addCommentMutation.mutate({
			post_id: postID,
			user_id: userInfo.id,
			name: userInfo.name,
			comment,
		});
	};

}

• 로딩, 에러와 같은 분기처리를 상태로 관리하지 않고 옵션으로 처리하여 코드가 간결해졌다.

• 데이터 업데이트 시, 변경되어야 할 상태를 직접 수정하지 않고 쿼리 무효화(invalidateQueries) 처리 가능하다.

• 변하지 않은 데이터는 캐싱처리되어 불필요한 데이터 요청이 이루어지 지지 않아 서버부담이 적다.

• enabled 옵션을 통해 조건부 fetching 이 가능하다.

• 세가지 모두 다 getCommentList 키를 바라보고 있어 별도로 import 하거나 상태를 props 하지 않아도 바로 invalidate 하여 값을 변경할 수 있다.

2. 큐샵 라이브페이지 개선 예시

5. 결론

1. 더 좋은 UX 제공

• useInfiniteQuery 로 무한스크롤 작업을 효율적으로 구현할 수 있다.

• typescript , graphQl, Next.js,svelt 대응 가능

• queries 파일 분리 하여 보다 더 깔끔한 코드작성 가능!

참조

GitHub - TanStack/query: 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue. - GitHub - TanStack/query: 🤖 Powerful asynchronous state management, server-state utilities and data fetching for TS/JS, React, Solid, Svelte and Vue.

https://github.com/TanStack/query

www.youtube.com

https://www.youtube.com/watch?v=MArE6Hy371c&t=6911s