react-query

설치하기

 $ npm i react-query
 # or
 $ yarn add react-query

UseQuery

기본적으로 쿼리는 고유한 key값을 가져오고 subscribing해서 불러올 때 키값이 이용된다. unique Key는 string과 배열을 받습니다. 배열로 넘기면 0번 값은 string값으로 다른 컴포넌트에서 부를 값이 들어가고 두번째 값을 넣으면 query 함수 내부에 파라미터로 해당 값이 전달됩니다.

두 번째 파라미터로는 promise를 반환하는 함수를 넣어준다.
리턴 값은 api의 성공, 실패여부, api return 값을 포함한 객체이다.

useQuery는 기본적으로 비동기로 작동하고 이를 바꾸기 위해서는 enabled을 사용해주어야 한다.

 import { useQuery } from 'react-query'
 
 function App() {
   const info = useQuery('todos', fetchTodoList)
 }

추가적으로 리턴값에 몇 가지 중요한 state가 담기는데

isLoading or status === 'loading'

쿼리에 데이터가 없고 fetching 일때

isError or status === 'error'

에러 발생 시

isSuccess or status === 'success'

data를 성공적으로 받아왔을 때

isIdle or status === 'idle'

사용 불가일 때

그 외에 조건에 따라 생성되는 state들도 존재한다

error - isError state시 접근 가능

data - success state일 때 접근 가능

isFetching - 어떤 state에서도 fetching일 때 값이 true이다.

기본 flow

 function Todos() {
   const { status, data, error } = useQuery('todos', fetchTodoList)
 
   if (status === 'loading') {
     return <span>Loading...</span>
   }
 
   if (status === 'error') {
     return <span>Error: {error.message}</span>
   }
 
   // also status === 'success', but "else" logic works, too
   return (
     <ul>
       {data.map(todo => (
         <li key={todo.id}>{todo.title}</li>
       ))}
     </ul>
   )
 }