React-query 기본 개념

🍇 리액트쿼리란?

🍇 기본 설정

import { QueryClient, QueryClientProvider, Hydrate } from "react-query";
const [queryClient] = React.useState(() => new QueryClient());

//app.tsx
<QueryClientProvider client={queryClient}>
	<Hydrate state={pageProps.dehydratedState}>
		<Component {...pageProps} />
	</Hydrate>
</QueryClientProvider>

//사용 예시
const { isLoading, error, data } = useQuery("getUserProfile", getProfile, {
    refetchOnMount: "always",
    retry: true,
    onError: (error) => {
      ConsoleDIR(error);
    },
  });

🍇 세가지 컨셉

🫐 Queries

• error - isErrror 상태에서 error 프로퍼티를 사용하여 에러메세지 확인가능

• data - 데이터를 성공적으로 가져온 상태에서 data 프로퍼티를 이용하여 확인가능. 여기서 데이터가 isSuccess 인 상태를 가정하여 데이터를 가져온다.

• isFetching - 어떠한 상태에서도 쿼리를 가져오는 경우

const Sample = () => {
   const { status , isLoading, isError, data, error } = useQuery('getUserData', getUserProfile)
 
// if(status === 'loading') 과 같다.
   if (isLoading) {
     return <span>Loading...</span>
   }
// if(status === 'error')
   if (isError) {
     return <span>Error: {error.message}</span>
   }
 
   return (
     <ul>
       {data.map(todo => (
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }

//쿼리 키를 string 으로 정의한 사용 예시
const posts = useQuery('getAllBlogPosts', getAllPost)

//쿼리 키를 배열로 정의한 사용 예시
const [pagination, setPagination] = useState<{
		page: number;
		pageSize: number;
		total: number;
	}>({
		page: 1,
		pageSize: 10,
		total: 20,
	});

const { data: posts, isLoading } = useQuery(
		["getAllBlogPosts", pagination?.page, pagination?.pageSize],
		() =>
			getAllPost({
				...(pagination.page && { page: pagination.page }),
				...(pagination.pageSize && { pageSize: pagination.pageSize }),
			}),
	);

//배열 내부의 객체순서는 변경되어도 상관없다.
useQuery(['getAllBlogPosts', { status, page }], ...)
useQuery(['getAllBlogPosts', { page, status }], ...)
useQuery(['getAllBlogPosts', { page, status, other: undefined }], ...)

//배열 순서를 지켜야 제대로 된 데이터를 받아올 수 있다.
useQuery(['getAllBlogPosts', status, page], ...)
useQuery(['getAllBlogPosts', page, status], ...)
useQuery(['getAllBlogPosts', undefined, page, status], ...)

const User({ userInfo }) {
   const result = useQuery(['getUserData', getUserProfile], () => fetchTodoById(todoId))
 }

function App({ users }) {
   const userQueries = useQueries(
     users.map(user => {
       return {
         queryKey: ['user', user.id],
         queryFn: () => fetchUserById(user.id),
       }
     })
   )
 }

//특정한 값이 있을때만 불러오는 옵션
enabled

const { data: post } = useQuery(["post", user?.postId], getPost, {
    enabled: !!user?.postId,
  });

🫐 Mutations

• useMutation이 반환하는 객체 프로퍼티로 제공되는 상태값은 useQuery와 동일하다.

• mutation.reset : 현재의 error와 data를 모두 지울 수 있음

// This will work
 const CreateTodo = () => {
   const mutation = useMutation(formData => {
     return fetch('/api', formData)
   })
   const onSubmit = event => {
     event.preventDefault()
     mutation.mutate(new FormData(event.target))
   }
 
   return <form onSubmit={onSubmit}>...</form>
 }

// 리액트 16버전 이하에서는 사용불가.
 const CreateTodo = () => {
   const mutation = useMutation(event => {
     event.preventDefault()
     return fetch('/api', new FormData(event.target))
   })
 
   return <form onSubmit={mutation.mutate}>...</form>
 }

• 두번째 인자로 콜백 객체를 넘겨줘서 라이프사이클 인터셉트 로직을 짤 수도 있다.

useMutation(addTodo, {
   onMutate: variables => {
     // 뮤테이션 시작
     // onMutate가 리턴하는 객체는 이하 생명주기에서 context 파라미터로 참조가 가능하다.
     return { id: 1 }
   },
   onError: (error, variables, context) => {
     // 에러가 났음
     console.log(`rolling back optimistic update with id ${context.id}`)
   },
   onSuccess: (data, variables, context) => {
     // 성공
   },
   onSettled: (data, error, variables, context) => {
     // 성공이든 에러든 어쨌든 끝났을 때
   },
 })

/*
북마크 추가 api
export const updateBookmark = async (roomID: string): Promise<void> => {
	return await axios.put(`/user/profile/bookmark/${roomID}`);
}

북마크 삭제 api
export const deleteBookmark = async (roomID: string): Promise<void> => {
	return await axios.delete(`/user/profile/bookmark/${roomID}`);
};
*/

const queryClient = useQueryClient();

//북마크 추가
const addBookMarkMutation = useMutation(
		(roomID: string) => updateBookmark(roomID),
		{

//뮤테이션이 성공한다면, 
//쿼리의 데이터를 invalidate해 관련된 쿼리가 리패치되도록 만든다.
			onSuccess: () => queryClient.invalidateQueries("getUserBookMarkStays"),
			onError: (error: any) => {
				ToastError("Failed to update bookmark");
			},
		},
	);

//북마크 삭제
const deleteBookMarkMutation = useMutation(
		(roomID: string) => deleteBookmark(roomID),
		{
//뮤테이션이 성공한다면, 
//쿼리의 데이터를 invalidate해 관련된 쿼리가 리패치되도록 만든다.
			onSuccess: () => queryClient.invalidateQueries("getUserBookMarkStays"),
			onError: (error: any) => {
				ToastError("Failed to update bookmark");
			},
		},
	);

const handleClick = async (roomID: string) => {
		if (!isAuthenticated) {
			openLoginModal();
			return;
		}

		if (bookmarks.includes(roomID)) {
			deleteBookMarkMutation.mutate(roomID);
		} else {
			addBookMarkMutation.mutate(roomID);
		}
	};

<button
	type="button"
	className={`absolute right-[18px] top-[180px]`}
	onClick={() => handleClick(roomInfo?.uuid)}
>
  <HeartIcon className={`w-[25px] h-[23px] text-text-tint 
    ${isBookMarked && "text-item-favorite"
		}`}
	/>
</button>

🫐 Query invalidation

• 새로운 query 인스턴스가 마운트될 때 ( 브라우저 화면을 이탈했다가 다시 포커스할 때 )

• 네트워크가 다시 연결될 때

• 특별히 설정한 refetch interval에 의해서 (refetchInterval) 조작될때

// useMutation 을 사용하지 않고 delete 메소드 사용된 경우 
// useQuery 로 불러오기
	const { data, isLoading, error } = useQuery(
		[
			"getActivationCode",
			pagination?.current,
			pagination?.pageSize,
			searchCouponInput,
		],
		() =>
			getActivationCode({
				pageNum: pagination?.current,
				limit: pagination?.pageSize,
				code: searchCouponInput,
			}),
		{
			onSuccess: (data) => {
				setPagination((state) => ({
					...state,
					total: data.count,
				}));
				setSearchClicked(false);
			},
		},
	);

const handleDelete = useCallback(async () => {
		try {
			await deleteActivationCode(selectCouponData[0].uuid);
			queryClient.invalidateQueries("getActivationCode");
			notification.success({
				message: "쿠폰이 삭제되었습니다",
			});
			setSelectCouponData([]);
			setSelectionType();
		} catch (error) {
			ConsoleDIR(error);
			notification.error({
				message: "쿠폰 삭제에 실패했습니다",
			});
		}
	}, [queryClient, selectCouponData, setSelectCouponData, setSelectionType]);

import {
   useQuery,
   useMutation,
   useQueryClient,
   QueryClient,
   QueryClientProvider,
 } from 'react-query'
 import { getTodos, postTodo } from '../my-api'
 
 // Create a client
 const queryClient = new QueryClient()
 
 function App() {
   return (
     // Provide the client to your App
     <QueryClientProvider client={queryClient}>
       <Todos />
     </QueryClientProvider>
   )
 }
 
 function Todos() {
   // Access the client
   const queryClient = useQueryClient()
 
   // Queries
   const query = useQuery('todos', getTodos)
 
   // Mutations
   const mutation = useMutation(postTodo, {
     onSuccess: () => {
       // Invalidate and refetch
       queryClient.invalidateQueries('todos')
     },
   })
 
   return (
     <div>
       <ul>
         {query.data.map(todo => (
           <li key={todo.id}>{todo.title}</li>
         ))}
       </ul>
 
       <button
         onClick={() => {
           mutation.mutate({
             id: Date.now(),
             title: 'Do Laundry',
           })
         }}
       >
         Add Todo
       </button>
     </div>
   )
 }
 
 render(<App />, document.getElementById('root'))

🍇 Next.js ( SSR ) 에서의 react-query 사용

• 데이터를 미리 가져와서 initialData 로 전달하기

• 서버에서 쿼리를 가져와서

🫐 initialData

interface Props {
	postData: IPostData;
}

const Blog: FC<Props> = ({ postData }) => {
	const [pagination, setPagination] = useState<{
		page: number;
		pageSize: number;
		total: number;
	}>({
		page: 1,
		pageSize: 12,
		total: 12,
	});

	const [mainPost, setMainPost] = useState<any>("");
	const { data: posts, isLoading } = useQuery(
		["getAllBlogPosts", pagination?.page],
		() =>
			getAllPost({
				...(pagination.page && { page: pagination.page }),
				...(pagination.pageSize && { pageSize: pagination.pageSize }),
			}),
		{
			onSuccess: (data) => {
				const mainPostData = data && data?.data[0];
				pagination.page === 1 && setMainPost(mainPostData);
			},
			initialData: postData,
		},
	);
	const handleContentPagination = (index: number) => {
		setPagination((prevState) => ({
			...prevState,
			page: index,
		}));
	};

export const getServerSideProps: GetServerSideProps = async () => {
	try {
		const postData = await getAllPost({
			page: 1,
			pageSize: 12,
		});

		return {
			props: {
				postData,
			},
		};
	} catch (error) {
		return {
			props: {},
		};
	}
};

🫐 Hydration → 더 공부하기

• 앱 내부와 인스턴스 ref(또는 React 상태)에서 새 QueryClient 인스턴스 생성

• 앱 구성 요소를 래핑 하고 클라이언트 인스턴스로 전달

• 앱 구성 요소를 래핑 하고 다음에서 dehydratedState 를 props로 전달한다.

const HouseListPage: FC<{
	dehydratedStateData;
}> = ({ dehydratedStateData }): JSX.Element => {

const { data: allAvailableRoomData } = useQuery(
		["getAvailableRooms", options?.livingType, options?.housingType],
		async () => {
			return await getAvailableRooms(options);
		},
		{
			initialData: dehydratedStateData?.queries[0]?.state.data,
			onError: function handleError(err) {
				return <div>{err}</div>;
			},
		},
	);
...~


export const getServerSideProps: GetServerSideProps = async (context) => {
	const { query } = context;
	const options = parseQuery(query);
	const queryClient = new QueryClient();

	await queryClient.prefetchQuery("getAvailableRooms", () =>
		getAvailableRooms(options),
	);

	try {
		return {
			props: {
				dehydratedStateData: dehydrate(queryClient),
			},
		};
	} catch (err) {
		throw err;
	}
};

🍇 장,단점

😁 장점

• 비동기 관련한 타이핑이 정말 많이 줄어든다

• Redux같은 전역 상태 저장소의 store에 동기적으로 업데이트되는 데이터와 액션만 남길 수 있어 크기를 줄이고, Saga는 아예 대체해버린다.

• 캐싱과 리패칭을 개발자가 구현하지 않아도 알아서 지원한다.

• 풍부한 옵션을 제공해 굉장히 많은 부분에서 custom이 가능하다.

• DEV-TOOLS 를 제공해 쿼리의 호출 상태를 바로 브라우저에서 확인할 수 있어 디버깅에 용이하다.

😞 단점

• 컨벤션을 정하지 않을 시 , 비동기 요청이 개별 컴포넌트에 더 강하게 의존해버릴 수 있을 것 같다.  컴포넌트에 Query관련 로직을 직접 사용한다면 앱이 커질 경우 개별 컴포넌트에 숨겨져 있을 수 있는 비동기 요청을 잘 못찾는 경우도 생길 수 있을 것 같다.

• 커스텀 훅으로 여러 query 호출을 분류해 묶어서 관리한다던지 등의 방법으로 비즈니스 로직을 UI로직과 분리하기 위해 React Query를 훅으로 관리하면 해결 가능할듯