React Query 기본 정리

1️⃣ 설치 방법 :

$ npm install @tanstack/react-query

react query devtools도 설치해주기.
(Devtools는 리액트쿼리를 이용한 데이터의 상태를 보기 위한 도구로 설치는 선택사항이다.)

$ npm install @tanstack/react-query-devtools

2️⃣ React Query, devtools 적용하기

import ReactDOM from "react-dom/client";
import App from "./App.jsx";
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById("root")).render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools />
    </QueryClientProvider>
  </React.StrictMode>
);

1. QueryClientProvider를 import해서 App컴포넌트를 감싸준다.
2. QueryClient도 import해서 변수를 만들어 할당한 다음 QueryClientProvider 컴포넌트에 위의 방식으로 안에 쓴다.
   • QueryClient의 용도 : 쿼리와 뮤테이션 상태를 관리하고, 데이터를 캐시하며, 다양한 설정을 제어하는 데 사용됨.
     ⇒ QueryClientProvider를 사용하여 React Query를 애플리케이션에 통합하고, client prop을 통해 어떤 QueryClient 인스턴스를 사용할지 지정한다. 이를 통해 애플리케이션의 여러 부분에서 동일한 쿼리 클라이언트를 공유하고 쿼리와 뮤테이션을 관리할 수 있다.
3. ReactQueryDevtools 는 import하고 독립적인 컴포넌트로 그냥 QueryClientProvider 안에 넣기만 하면 된다.

3️⃣ useQuery, useMutation, useQueryClient

const queryClient = useQueryClient(); // main.jsx의 QueryClient로 연결시켜줌

const postsQuery = useQuery({
  queryKey: ["posts"],
  queryFn: () => wait(1000).then(() => [...POSTS]),
});

const newPostMutation = useMutation({
  mutationFn: (title) => {
    return wait(1000).then(() => POSTS.push({ id: uuidv4(), title }));
  },
  onSuccess: () => {
		// "posts"라는 특정 쿼리를 다시 불러오도록 지정
    queryClient.invalidateQueries(["posts"]);
  },
});

if (postsQuery.isLoading) return <pre>Loading...</pre>;
if (postsQuery.isError) return <pre>{JSON.stringify(postsQuery.error)}</pre>;

1. useQueryClient를 import해서 변수에 할당해서 쓴다. ⇒ reactquery 라이브러리의 훅 중 하나.

• 현재 어플리케이션의 QueryClient 인스턴스로 접근하게 해줌.

2. useQuery : 위의 방식으로 queryKey를 꼭 지정해주고, queryFn으로 동작을 수행시킨다.
3. useMutation : 비슷하게 mutationKey를 지정하고, mutationFn으로 동작을 수행시킨다.
   1. newPostMutation은 버튼에 할당해서 사용 가능한데 mutationFn만 실행하면 실제 POSTS란 객체에 영향은 가지만 화면 상에서는 업데이트가 되지 않는다.
      ⇒ 그래서 onSuccess를 사용해 mutationFn이 성공 시 다음 할 동작을 수행시킬 수 있도록 한다. ⇒ queryClient.invalidateQueries(); = ()라는 특정 쿼리를 다시 불러오도록 지정