React-Query의 queryKey 설정

이슈 ::

페이지에서 검색 필터를 통해서 graphql 쿼리문의 where절에 조건을 추가해줬음에도 변경된 쿼리를 React Query가 불러오지 않음.

 

const SomePage: NextPage = () => {
    const [filterValue, setFilterValue] = useState<IFilter.IInput>();
    
    // filterValue 변경 시 자동으로 변경된 값을 가져오지 않음.
    const { data } = useQuery("some page contents",
        () => Someservice.getSomeContents(filterValue)
    };
    
    return (
        <Component {...data} />
    );
 };
 
 export default SomePage;

(예시를 위한 코드로 실제 실행을 보장하지 않음)

 

해결 방법 ::

React Query의 queryKey에 검색 필터를 통해 지정한 값 저장

 

const SomePage: NextPage = () => {
    const [filterValue, setFilterValue] = useState<IFilter.IInput>();
    
    // queryKey에 filterValue 추가
    // filterValue 변경 시 새로운 값을 불러옴
    const { data } = useQuery(["some page contents", filterValue],
        () => Someservice.getSomeContents(filterValue)
    };
    
    return (
        <Component {...data} />
    );
 };
 
 export default SomePage;

 

원인 ::

queryKey[1]

 

queryKey는 쿼리를 위한 키 값으로, 쿼리를 구분하기 위해서 사용한다.

이슈 경우의 경우, 이 queryKey가 변경되지 않았기 때문에 변경된 내용을 즉각 가져오지 못했다.

하지만 queryKey에 변경되는 값 filterValue를 넣어줌으로써 filterValue가 변경될 때마다 key가 변경되고, 이에 따라 변경된 값을 불러올 수 있다.

 

만약 특정 값에 따라 동일한 쿼리의 조건만 다르게 데이터를 불러와야 하는 경우 queryKey에 변경되는 값을 넣어줌으로써 변경값을 바로 불러올 수 있다.

 

Reference

[1] : React-Query useQuery Docs

useQuery