본문 바로가기

기록/TIL

2023.08.30

리액트 쿼리의 select.
아래는 공식문서의 설명이다.

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

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

 

useQuery가 반환하는 데이터에서 특정 부분만 선택할 수 있도록 해주는 옵션이다. 

 

import { useQuery } from 'react-query'

function User() {
  const { data } = useQuery(['user'], fetchUser, {
    select: user => user.username,
  })
  return <div>Username: {data}</div>
}

위의 코드는 fetchUser를 통해 받아온 user 데이터에서 username만 선택하여 data에 담는 코드이다.
이런식으로, 원하는 데이터만을 선택하여 받아올 수 있게 하는 아주! 유용한 친구이다. 
지금 하는 프로젝트에서 error를 커스텀하여 반환하고 있는데 이에 맞게 데이터를 담기 위해 사용하고 있다.

'기록 > TIL' 카테고리의 다른 글

2023.09.01  (0) 2023.09.01
2023.08.31  (0) 2023.08.31
2023.08.29  (0) 2023.08.29
2023.08.28  (0) 2023.08.28
2023.08.25  (0) 2023.08.25