[JS/React-Query] 1. useQuery

공통 발표회까지 드디어 끝 ㅜ

SSAFY 2학기 공통 프로젝트의 주제는 스마트 결혼준비 플래너

같은 데이터(일정, 완료상태)를 한 페이지의 여러 컴포넌트(캘린더, 남은 일정, 다음 일정)에서 공유했음

axios만을 사용해서 데이터를 요청했다면, 매 컴포넌트마다 불필요하게 동일한 요청을 보냈을 것

(store에 저장하기에는 데이터 양이 많아질 수도 있고, 내 기준 변경이 많은 데이터라고 생각하여 store에 저장하지 않았음)

React-Query의 useQuery를 사용시 불필요한 여러 번의 네트워크 전송을 막을 수 있을 것이라고 생각, 일정 호출에서 useQuery를 사용

(신부 혹은 신랑이 배우자의 아이디를 등록하면 일정이 공유되어 같은 데이터를 수정하기에, staleTime은 따로 설정하지 않았음)

 

1.0 useQuery

import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

// axios 통신 함수
const fetchData = async () => {
	const response = await axios.get("URL");
	return response.data;
}

// Query 활용
const QueryPractice = ({ parameter }) => {
	const { data, isLoading } = useQuery({
	
		// 데이터의 고유한 식별 키 ('배열'로 지정해줘야 함)
		// parameter 자리에는 동적 파라미터가 들어갈 수 있음(번호, 객체 등)
		// queryKey가 변경되면 데이터를 리패칭 (ex. 파라미터의 변경)
		queryKey: ["keyName", parameter], 
		
		// Promise를 반환하는 함수
		queryFn: fetchData,
	});
	
	if (isLoading) return <p>Loading...</p>;
	
	return <div>{data.값}</div>
}

 

1.1 useQuery의 속성

 

1. data : ****쿼리 함수(queryFn)가 반환한 데이터

const { data } = useQuery(['practice'], fetchData); console.log(data); // fetchData의 반환 값

 

2. error : 쿼리 실패 시 발생한 에러 객체를 반환

const { error } = useQuery(['practice'], fetchData);
if (error) console.error(error.message);

 

3. isLoading : 데이터가 처음 로드 중인지 여부

4. isFetching : 데이터를 다시 가져오는 중인지 여부

const { isFetching } = useQuery(['practice'], fetchData);
return <p>{isFetching ? 'Refreshing...' : 'Up to date'}</p>;

 

5. isError : 쿼리가 실패했는지 여부

6. isSuccess : 쿼리가 성공했는지 여부

7. status : 쿼리의 상태를 문자열로 반환 (loading, error, success)

if (status === 'loading') return <p>Loading...</p>;
if (status === 'error') return <p>Error!</p>;
if (status === 'success') return <p>Success!</p>;

 

8. refetch : 데이터를 수동으로 다시 가져오는 함수

const { refetch } = useQuery(['practice'], fetchData);
return <button onClick={() => refetch()}>Reload</button>;

 

9. isStale : 오래된 데이터인지 확인
staleTime 설정에 따라 달라짐. 캐시된 데이터를 사용할지 새 데이터를 가져올지 결정

 

외에도 5~6개 더있는데, 사용할 일이 없어 보여서 정리 x