리액트쿼리와 캐싱

 리액트쿼리 컨셉

stale-while-revalidate (RFC 5861)

zero-config

staleTime : default 0

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

refetchOnMount, refetchOnWindowFocus, refetchOnReconnect : true

retry : default 3번

retryDelay : default exponential backoff function

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

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

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

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

세가지 컨셉

Stale time 과 Cache time

Stale time

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

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

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

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

Cache time

//example

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

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

리액트쿼리 플로우

리액트쿼리의 흐름상태

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

리액트쿼리 옵션

• 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에서 지정한 시간 간격만큼 데이터 패칭

리액트쿼리 사용 전후 비교

온보딩 기간에 만든 게시판제작 코드를 가져와봤습니다🙌🏻 리액트쿼리를 사용하지않았을때와 비교하였으니 어떤점이 간결해지고 편해졌는지 확인해주세요!

	
	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()

 },[])

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

isLoading && <Loading />
isErr && <Error />

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

	
	//get 요청
	const { data: commentList , isLoading, isError } = 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}>
							<p>{comment.name}</p>
							<p>{comment.comment}</p>
							<p>{comment.created_at}</p>
							<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,
		});
	};

}

세가지 모두 다 getCommentList 키를 바라보고 있어 별도로 import 하거나 상태를 props 하지 않아도 바로 invalidate 하여 값을 변경할 수 있다. 이때, getCommentList 라는 엔티티에 담긴 값이 그대로라면 그 값은 다시 refetching 하지 않기 때문에 서버부담이 적어지는 장점도 있다.

결론

그래서 좋은게 뭔데?

• useInfiniteQuery

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

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

참조링크 👇🏻

www.youtube.com

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

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