📆 22.11.02 - react query

react query 의 장점

• Caching
• get으로 받아온 데이터를 update을 하면 자동으로 get을 다시 수행
• 데이터가 오래되었다 판단되면 invalidateQueries라는 get요청을 함
• 무한스크롤 (Infinite Queries)
• reack hook과 많이 흡사함

설치는 npm install react-query

그리고 root단에 index.js 에서 기본작업을 진행해준다.

// index.js 중략
import { QueryClient, QueryClientProvider } from "react-query"
import {ReactQueryDevtools} from "react-query/devtools"


const queryClient = new QueryClient();

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      {/* devtools */}
      <ReactQueryDevtools initialIsOpen={true} />
      <App />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

useQuery

get을 위한 react query api이다. 오직 get만이며 post, update는 useMutation을 사용

첫번째 parameter로 unique key가 들어가고 두번째는 비동기 함수, 즉 api 호출이 들어간다.

• useQuery 는 비동기로 작동하기에 (async await 여부와 관계없이) 한 개의 useQuery에서는 하나의 api 호출만 이루어져야된다. 두 개 이상은 useQueries에서

예시는 아래와 같다. 출처는 https://kyounghwan01.github.io/blog/React/react-query/basic/#usequery

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