import { useQuery } from 'react-query';
import { fetchTodoList } from '../api/fetchTodoList';
function App() {
const info = useQuery('todos', fetchTodoList);
}
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 중 어떤 방법을 이용하던지 적절한 오류 처리를 통해 사용자가 혼란에 빠지지 않도록 해줘야만 한다.
true
가 된다.true
가 돼요. isLoading은 false
가 된다. error 객체를 통해 좀 더 상세한 오류 내용을 확인할 수 있다.true
가 된다. isLoading은 false
가 된다. data 객체를 통해 좀 더 상세한 조회 결과를 확인할 수 있다.어느 상태 중 하나
에 속한다.