useQuery_ReactQuery

const requestData = useQuery(쿼리 키, 쿼리 함수, 옵션);

• 쿼리 키 : 문자열 or 배열, 캐싱 처리에 있어서 중요한 개념(고유한 값)

• 쿼리 함수: Promise를 리턴하는 함수, ex) axios(), fetch()

• 옵션 : useQuery 기능을 제어
  쿼리 키가 다르면 호출하는 API가 같더라도 캐싱을 별도로 관리함

• refetchOnWindowFocus: false, react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행하는데, 그 재실행 여부 옵션

• retry: 0, 실패시 재호출 몇번 할지

const { isLoading, isError, data, error } = useQuery("todos", api 주소, {
 refetchOnWindowFocus: false,
 retry: 0,                            
 onSuccess: data => {
      // 성공시 호출
      console.log(data);
 },
 onError: e => {
      // 실패시 호출 (401, 404 같은 error가 아니라 정말 api 호출이 실패한 경우만 호출됨)
      console.log(e.message);
 }
}

• isLoading, isSuccess 말고 status로 한번에 처리

const { status, data, error } = useQuery("todos", fetchTodoList);

  if (status === "loading") {
    return <span>Loading...</span>;
  }

  if (status === "error") {
    return <span>Error: {error.message}</span>;
  }

• 동기적으로 실행
  useQuery의 3번째 인자로 옵션값이 들어간다. 여기에 enabled에 값을 넣으면 그 값이 true일때 useQuery를 실행

const { data: nextTodo, error, isFetching } = useQuery(
  "nextTodos",
  fetchNextTodoList,
  {
    enabled: !!todoList // true가 되면 fetchNextTodoList를 실행한다
  }
);

• ex

  const { data: cancelCount } = useQuery(
    ['cancelCount'],
    async () => {
      const {
        data: { data },
      } = await AxiosApi.get('/claim/cancel-count')

      return data
    },
    { refetchOnWindowFocus: false },
  )