TIL36-02 React Query

1. 리액트 쿼리란?

• 기존 미들웨어의 한계
  1. 보일러 플레이트 : 코드량이 너무 많다.
  2. 규격환 문제: Redux가 비동기 데이터 관리를 위한 전문 라이브러리가 아님
• 리액트 쿼리의 강점
  1. 보일러 플레이틀 만들다가 오류가 날 일이 없다.
  2. 기존 미들웨어보다 사용이 쉽다. 직관적이다.

2. 주요 키워드

• Qurey : 데이터에 대한 요청, axios의 get 요청과 비슷하다.
• Mutation : 데이터를 변경. CUD에 해당.
• Query Invalidation : 최신 상태가 아닐 수 있는 데이터를 무효화 시킨 후 최신화를 시킨다.

3. useQuery

import { useQuery } from 'react-query';
import { fetchTodoList } from '../api/fetchTodoList';

function App() {
	const info = useQuery('todos', fetchTodoList);
}

- useQuery 인자에 대해

a. 첫 번째 인자 'todos'. -> 쿼리의 키.
1. refetching 하는 데에 쓰인다.
2. 캐싱(caching) 처리를 하는 데에도 쓰인다.
3. 애플리케이션 전체 맥락에서 이 쿼리를 공유하는 방법으로 쓰인다. key가 같으면 같은 쿼리 및 데이터 보장.
4. QK는 위 예제처럼 한 단어일 수도 있으며, 배열의 형태일 수도 있고, 심지어는 nested 객체일 수도 있다. Key라는 말이 의미하듯, 모든 Query keys는 Unique해야한다.
b. 두번째 인자 'fetchTodolist'. -> 쿼리 함수.
1. 쿼리 함수는 promise 객체를 return 합니다.
2. promise 객체는 반드시 data를 resolve하거나 에러를 내야한다.
- resolve는 정상적으로 통신이 되었음을 의미한다.
- 원했던 상황이 아닌 경우. 즉, 오류가 발생한 경우에는 그에 맞는 적절한 오류 처리 관련 로직을 삽입해서 처리를 해줘야만 한다. axios, fetch, graphql 중 어떤 방법을 이용하던지 적절한 오류 처리를 통해 사용자가 혼란에 빠지지 않도록 해줘야만 한다.

- useQuery의 결과물에 대해

1. useQuery를 통해 얻은 결과물은 객체(object)다.
2. 그 안에는 여러분이 ‘조회’를 요청한 결과에 대한 거의 모든 정보가 들어있다.
   1. 시작 하면, isLoading이 true가 된다.
   2. 조회 결과 오류가 나면 isError가 true가 돼요. isLoading은 false가 된다. error 객체를 통해 좀 더 상세한 오류 내용을 확인할 수 있다.
   3. 조회 결과 정상이 되면 isSuccess가 true가 된다. isLoading은 false가 된다. data 객체를 통해 좀 더 상세한 조회 결과를 확인할 수 있다.

4. mutations

• CUD에서 사용된다.
• useMutation은 hook이죠. 함수구요. API다.
  1. mutation.mutate( 인자 )
     a. 인자는 반드시 한 개의 변수 또는 객체여야 한다.
     b. mutation.mutate(인자1, 인자2) → 오류
  2. 결과를 객체(object 형태로) 갖고 있다.
  3. 그 결과물 객체는 항상 어느 상태 중 하나에 속한다.
     1. isIdle
     2. isLoading
     3. isError
        a. error 객체를 항상 품고 있음을 명심.
     4. isSuccess(query에만 있는게 아니다.)
        b. data 객체를 항상 품고 있음을 명심.