[React Query] select

리액트 쿼리의 select 옵션을 사용해봅시다! 아래는 공식문서의 설명이다.

This option can be used to transform or select a part of the data returned by the query function.

"이 옵션은 쿼리  함수에서 반환된 데이터의 일부를 변환하거나 선택하는 데 사용할 수 있습니다."

 

즉 useQuery 훅이 반환하는 데이터에서 특정 부분만 선택할 수 있도록 해주는 옵션이다. 필요한 데이터만을 선택한다는 점이 graphql과 비슷하다.

 

실제 적용한 코드를 봐보자.

const { data, isLoading } = useQuery("user", fetchUser, { select: data => ({ id: data.id, name: data.name })});

data에는 id와 name만 들어 있을 것이다.

 

select 옵션은 불필요한 데이터 전송을 감소하고 데이터의 형태 제어할 수 있게 해준다.

 

타입스크립에서 사용할 때는 useQuery의 제네릭의 3번째에 타입을 정의해줘야 한다. 아래는 개인 프로젝트에서 사용한 코드이다. 순서대로 통신을 통해서 받는 데이터 타입, 에러 타입, select 옵션을 거치고 난 뒤의 타입이다.

const { data : commentsData } = useQuery<CommentData, AxiosError, CommentSelectData>(['getComments', page ], () => fetcher({
        method : 'get',
        path : `/api/v1/articles/${router.query.id}/comments?limit=10&page=${page}`,
        headers : {
            Authorization : token
        },
    }), {
        onSuccess : (data) => {
            console.log('success getCommets', data);
        },
        staleTime: 5000,
        keepPreviousData: true,
        select : (data) => {
            return {
                list: data.list,
                page : data.page,
                totalPage : data.totalPage,
                hasMore: data.totalPage > page
            };
        },
    })