1. useQuery

1-1) 특징

• 데이터를 get하기 위한 api
  • post, update는 useMutation을 사용
• 첫 번째 파라미터로 unique key가 들어가고 두 번째 파라미터로 비동기 함수(api호출 함수)가 들어간다. (두 번째 파라미터는 promise가 들어가야한다.)
• 첫번째 파라미터로 설정한 unique Key는 다른 컴포넌트에서도 해당 키를 사용하면 호출 가능하다. unique Key는 string과 배열을 받는다. 배열로 넘기면 0번 값은 string값으로 다른 컴포넌트에서 부를 값이 들어가고 두번째 값을 넣으면 query 함수 내부에 파라미터로 해당 값이 전달된다.
  • 이후 동일 키로 useQuery를 호출하면, 네트워크 요청 없이 캐시된 데이터를 즉시 반환
  • 중복 요청 방지 및 병합(deduplication)
• return 값은 api의 성공, 실패여부, api return 값을 포함한 객체이다.
• useQuery는 비동기로 작동한다. 즉, 한 컴포넌트에 여러개의 useQuery가 있다면 하나가 끝나고 다음 useQuery가 실행되는 것이 아닌 두 개의 useQuery가 동시에 실행된다. 여러개의 비동기 query가 있다면 useQuery보다는 밑에 설명할 useQueries를 사용하는 걸 추천한다.
• enabled를 사용하면 useQuery를 동기적으로 사용 가능하다.

e.g.

const Todos = () => {
  const { isLoading, isError, data, error } = useQuery("todos", fetchTodoList, {
    refetchOnWindowFocus: false, // react-query는 사용자가 사용하는 윈도우가 다른 곳을 갔다가 다시 화면으로 돌아오면 이 함수를 재실행합니다. 그 재실행 여부 옵션 입니다.
    retry: 0, // 실패시 재호출 몇번 할지
    onSuccess: data => {
      // 성공시 호출
      console.log(data);
    },
    onError: e => {
      // 실패시 호출 (401, 404 같은 error가 아니라 정말 api 호출이 실패한 경우만 호출됩니다.)
      // 강제로 에러 발생시키려면 api단에서 throw Error 날립니다. (참조: <https://react-query.tanstack.com/guides/query-functions#usage-with-fetch-and-other-clients-that-do-not-throw-by-default>)
      console.log(e.message);
    }
  });

  if (isLoading) {
    return <span>Loading...</span>;
  }

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

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
};

isLoading, isSuccess 말고 status로 한번에 처리 가능하다

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>;
  }

  return (
    <ul>
      {data.map(todo => (
        <li key={todo.id}>{todo.title}</li>
      ))}
    </ul>
  );
}

1-2) useQuery의 key

useQuery의 queryKey는 리액트 쿼리 내부에서 쿼리를 구분하고 캐시를 관리하는 고유 식별자다. 다음 항목들을 종합해 정리한다.

• queryKey는 쿼리 캐시의 키 역할을 한다.