[React Query] 쿼리 키 관리하기

내 블로그의 유입 통계를 보면 항상 상위권은 React Query에 관한 글이다. 물론 내 블로그 유입 수가 많진 않아서 판단의 근거가 될 순 없지만 내 블로그에도 들어올 정도니 React Query에 대한 관심이 높아진 상황이라고 볼 수 있을 것 같다. 지금은 버전업이 좀 많이 되어서 큰 참고가 안될 것도 같다...

아무튼 그런 의미에서 새로운 React Query 글이다. React Query 의 핵심을 결국 데이터 캐싱이라고 보는데 이 캐싱된 데이터를 식별하기 위해 쿼리키가 사용이 되는데 이걸 관리하는게 여간 귀찮은 일이 아니다. 그래서 라이브러리를 통해 관리하는 방법을 소개해보려고 한다.

React Query (TanStack Query) 공식 문서에도 소개 되어있는 @lukemorales/query-key-factory 라이브러리이다.( 사실 이 라이브러리 좀 유명한 것 같다. 많은 블로그 글들이 이 라이브러리에 대해 다루고 있는것을 확인했다.)

const get = async () => {
    const response = await api.get("/api/v1/~");
    const result = response.data as Article[];
    return result;
};

const getById = async (id : number) => { // 생략 }

export const dataKeys = createQueryKeys("data", {
    all: () => ({
        queryFn: () => get(),
        queryKey: ["all"],
    }),
    one : (id : number) => ({
        queryFn : ()  => getById(id),
        queryKey : [id]
    }),
    filtered : (filtering : any) => ({
        queryKey : [
            filtering.businessIds,
            filtering.mainIds,
            filtering.subIds,
            filtering.locations,
            filtering.rating,
            filtering.searchKeyword,
            filtering.page,
        ],
        queryFn : () => {// 생략}
    })   
});

이런식으로 활용이 가능하다. 개인적으로 데이터를 fetch하는 함수를 같은 파일 안에 두면 더 보기 편한 것 같다. 에러 처리는 사용하는 컴포넌트 혹은 hooks에서 catch 해서 적절하게 처리해주면 문제 없다.

export const queryKeys = mergeQueryKeys(
    dataKeys,
);

도메인 별로 키를 만들고 통합해서 사용한다.

export default function useDatas() {
    return useQuery({
        queryKey: queryKeys.data.all().queryKey,
        queryFn: queryKeys.data.all().queryFn,
    });
}

이렇게 간단하게 사용할 수 있다.

데이터 조회에서 쿼리키를 쉽게 관리하는 방법에 대해 소개해보았다 ㅎㅎ