TanStack Query 사용법을 알아보자!

🍬 TanStack Query란

React, Vue, Svelte에서 사용 가능한 강력한 비동기 상태관리 라이브러리입니다.

TanStack Query는 data fetching, caching, server state의 동기화와 업데이트를 쉽게 할 수 있도록 다양한 기능을 제공합니다.

 

🍬  TanStack Query 설치 방법

npm i @tanstack/react-query
yarn add @tanstack/react-query

 

🍬  TanStack Query 셋팅하기

TanStack Query기능을 사용하기 위해 queryClient를 생성해 줍니다.

QueryClientProvider로 사용하길 원하는 컴포넌트를 감싸줘야 하고, queryClient를 client props로 내려줍니다.

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

const queryClient = new QueryClient();

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

 

 

🍬  TanStack Query 사용하기

- useQuery

useQuery는 데이터를 가져오기 위해 사용되는 TanStack Query의 대표적인 훅입니다. 

 

예시로 todo list를 만들어보겠습니다!

먼저 컴포넌트의 최상단에 useQuery를 import 하고

import { useQuery } from '@tanstack/react-query';

 

 

데이터를 fetch 해오는 함수를 만들어주고 return 해줍니다.

  const fetchTodos = async () => {
    const response = await axios.get("http://localhost:4000/todos");
    return response.data;
  };

📍 이때 response부분은 구조분해할당으로 받아오는 데이터를 변수로 분해하여 { data }라고도 사용할 수 있습니다!

 

이제 본격적으로 useQuery를 사용하여 데이터를 가져와 보겠습니다.

const {
    data: todos,
    isLoading,
    isError,
  } = useQuery({
    queryKey: ["todos"],
    queryFn: fetchTodos,
  });

useQuery는 인자로 객체를 전달해주어야 합니다. queryKey와 queryFn은 필수적으로 전달해 주어야 하며 queryKey는 배열의 형태로 지정하는 것을 권장합니다.

가져온 데이터 { data: todos, isLoading, isError}는 

// 로딩중
  if (isLoading) {
    return <div>Loading...</div>;
  }

  // 에러
  if (isError) {
    return <div>Error fetching data</div>;
  }

  // 데이터 가져오기
  if (data) {
    return <div>{todos.title}</div>;
  }

이런 식으로 사용 가능합니다!

 

- useMutation

useMutation은 데이터를 생성, 수정, 삭제하는 등의 작업에 사용되는 훅입니다. CUD에 대한 비동기 작업을 쉽게 수행하고, 성공 또는 실패 시에 추가적인 작업을 실행할 수 있기 때문에 useQuery와 함께 가장 대표적인 TanStack Query 훅이라고 할 수 있습니다.

 

todo를 추가하는 함수를 만들어 줍니다.

const addTodo = async (newTodo) => {
    await axios.post("http://localhost:4000/todos", newTodo);
  };

 

함수를 만들었으면 useQuery밑에 useMutation에 mutationFn으로 넣어줍니다.

const { mutate } = useMutation({
    mutationFn: addTodo,
  });

 

mutate는 useMutation을 이용해 작성한 내용들이 실제로 실행될 수 있도록 돕는 역할을 해줍니다.

 

이벤트 발생 시에 사용하면 됩니다!

// form태그안 버튼을 누르면 실행됩니다.
<form
    onSubmit={(e) => {
      e.preventDefault();
      mutate({ title: todoItem, isDone: false });
    }}
  >

 

- invalidateQueries

invalidateQueries는 특정 쿼리를 무효화하여 데이터를 다시 패칭 하게 하는 함수입니다. useMutation과 함께 사용하여 데이터가 변경된 후 관련 쿼리를 다시 가져오도록 해줍니다.

 

const { mutate } = useMutation({
    mutationFn: addTodo,
    onSuccess: () => {
      queryClient.invalidateQueries(["todos"]);
    },
  });

이렇게 넣어주면 데이터를 추가하고 새로고침을 하지 않아도 바로 생성되는 것을 확인할 수 있습니다!