[React] React-Query 조건부로 fetch하기

 

작업 도중 아이템 생성/수정 컴포넌트를 하나의 컴포넌트로 재사용하게 되었는데, id 값에 따라 조건부 처리를 하게 되었다.

react-query를 사용하여 아이템 정보를 가져올 때 id 값이 없다면(생성) 위와 같이 계속 에러가 나면서 fetch를 재시도하는 현상이 발생했는데, useQuery의 query-option 중 enabled를 사용하여 조건부로 간단하게 처리할 수 있다. 

 

const DEFAULT_DATA = {...};

const Project = () => {
    const location = useLocation();
    const id = location.state?.id;
    const { data } = useQuery([`project/${id}`, id], fetcher, { enabled: !!id })
    
    return(
    	<ChildComponent data={data || DEFAULT_DATA} id={id} />
    )
}

 

부모 컴포넌트에서 DEFAULT_DATA를 생성하고
id가 없다면 DEFAULT_DATA를,
id가 있다면 react-query를 사용하여 불러온 data와 id를 내려주었다.

자식컴포넌트에서는 id가 있을 경우는 put api를, 없을 경우는  post api를 사용해서 작업하였다.