reactQuery 사용기록

진행중인 프로젝트에서 reactQuery를 활용해 보기로 하였다.
post요청을 useMutation이 아닌 useQuery로만 구현해보려 했고,
여러방법으로 해당 코드를 작성해보았다

방법 1

 //회원목록 가져오기 reactQuery

//옵션설정
const rqOptions = { refetchOnWindowFocus: true, variables: LOGIN_INFO.auth }

//쿼리사용
const getUserList = useQuery('getUserList', api_userList, rqOptions);

//리턴값 가져오기
const { isLoading:isQueryLoading, data, error, refetch } = getUserList;

//refetch 호출용 변수선언
const callUserList = getUserList.refetch;

  getUserList.isQueryLoading ? loadingScreen("show") : loadingScreen("hide");
  
  if(getUserList.error){      
    toastAlert({
    show: true,
    type: "alert",
    msg: `회원목록 조회에 실패하였습니다. 관리자에게 문의해주세요 (코드 ${error})`,
    delay: 2000,
  });}

  //READY : 무한루프 방지
  useEffect(() => {
    if (!userListQuery.isLoading && userListQuery.data) {
      setUserList(userListQuery.data.data.data);
    }
  }, [userListQuery.data]);

방법2

// 회원관리 : 목록 가져오기 useQuery
const useUserList = (param) => {

  const result = useQuery("userList", async () => {
    return await axios.post("/user/list", param);
  });

  return result ;
};

 //회원목록 가져오기 reactQuery
  const userListQuery = useUserList(LOGIN_INFO.auth);
  const fetchUserList = userListQuery.refetch;

  //READY : 무한루프 방지
  useEffect(() => {
    if (!userListQuery.isLoading && userListQuery.data) {
      setUserList(userListQuery.data.data.data);
    }
  }, [userListQuery.data]);

2023.05.16 수정

  const userListQuery = useQuery('userList', async () => {loadingScreen('show'); return await api_userList(LOGIN_INFO.auth)});
  
  const handleUserList = () => {

    const { status, data, error  } = userListQuery;

    if (status === 'error'){ 
      toastAlert({ show: true, type: "alert", msg: `회원목록 조회에 실패하였습니다. 관리자에게 문의해주세요 (코드 ${error})`, delay: 5000 });
    }

    if (data) { setUserList(data?.data.data) }

    if(status !== "loading"){ loadingScreen('hide');  }

  }

  //READY
  useEffect(() => { handleUserList(); }, [userListQuery.dataUpdatedAt])