TanstackQuery-기본사용법

💡주요기능

- 데이터 캐싱

: 캐싱 ? 서버에게 데이터를 요청했을때, 서버입장에서는 요청받은 데이터를 매번 찾는게 아니라, 자주 찾는 데이터를 메모리에 저장해두고 빠르게 결과물을 클라이언트에게 전달한다. 

 

- 자동 리페칭

: 리페칭 : 다시 데이터를 가져온다

데이터가 변경 되었을때 자동으로 리페칭하여 최신상태를 유지한다.

 

- 쿼리 무효화

: 특정 이벤트 발생시 쿼리를 무효화 하고 다시 데이터를 가져올수 있다.

 

서버상태를 가져오고 관리하는 세가지 과정

1. get: useQurey

데이터를 가져온다 (READ)

2. modify: useMutation

데이터를 생성, 업데이트, 삭제 한다 (CREATE, UPDATE, DELETE)

3. refresh : invalidateQueries

무효화 시킨다. 왜?

가져왔던 결과물이 useMutation 으로 변경되었을 경우, 새로 갱신시켜주어야 하기 때문에

 

세팅하기

당연히 설치 해주어야 한다..ㅎ

yarn add @tanstack/react-query

 

1. QueryClientProvider 로 App을 감싼다

• QueryClientProvider하위 컴포넌트는 모두 영향을 받는다(App전체)
• client : 텐스텍 쿼리의 주요 기능을 사용할수 있는 인스턴스 > new QueryClient 로 클라이언트를 생성해준다

// main.jsx

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

const queryClient = new QueryClient();

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

 

useQuery (데이터 가져오기)

1. {data,isPending,isError} = useQuery()

• useQuery()가 반환하는 결과물은 data,isPending,isError 가 있다.
• 이 훅을 통해 서버에서 데이터를 가져오고, 가져온 데이터를 컴포넌트에서 쉽게 사용할 수 있다.

2. 그런데 유즈쿼리를 사용할때 2개의 인자를 객체안에 넣어주어야 한다.  

• queryKey : ["키이름"] , // 쿼리키 : 배열형태
• queryFn : () => {} // 쿼리펑션 : 함수

useQuery({
  queryKey : [] , // 쿼리키 : 배열형태
  queryFn : () => {} // 쿼리펑션 : 함수
})

전체코드

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

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

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

  if (isPending) {
    return <div>로딩중입니다...</div>;
  }

  if (isError) {
    return <div>데이터 조회 중 오류가 발생했습니다.</div>;
  }

  return (
    <div>
      <h3>TanStack Query</h3>
      <ul>
        {todos.map((todo) => {
          return (
            <li key={todo.id}>
              <h4>{todo.title}</h4>
              <p>{todo.isDone ? "Done" : "Not Done"}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

 

 

useMutation(데이터 생성,수정,삭제)

1.  mutation 객체 생성

2. mutationFn 엮어주기

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

 

3. mutation 사용하기

<form onSubmit={(e) => {
  e.preventDefault();
  const newTodoObj = { title: todoItem, isDone: false };

  // useMutation 로직
  mutation.mutate({title:todoItem, isDone : false})

}}
>

 

구조분해 할당을 적용해서 사용해도 된다.

전체코드

import { useMutation, useQuery } from "@tanstack/react-query";
import axios from "axios";
import { useState } from "react";

const App = () => {
  const [todoItem, setTodoItem] = useState("");

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

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

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

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

  if (isPending) {
    return <div>로딩중입니다...</div>;
  }

  if (isError) {
    return <div>데이터 조회 중 오류가 발생했습니다.</div>;
  }

  return (
    <div>
      <h3>TanStack Query</h3>
      <form
        onSubmit={(e) => {
          e.preventDefault();

          const newTodoObj = { title: todoItem, isDone: false };

          // useMutation 로직
          mutation.mutate()
          
        }}
      >
        <input
          type="text"
          value={todoItem}
          onChange={(e) => setTodoItem(e.target.value)}
        />
        <button>추가</button>
      </form>
      <ul>
        {todos.map((todo) => {
          return (
            <li
              key={todo.id}
              style={{
                display: "flex",
                alignItems: "center",
                gap: "10px",
                backgroundColor: "aliceblue",
              }}
            >
              <h4>{todo.title}</h4>
              <p>{todo.isDone ? "Done" : "Not Done"}</p>
            </li>
          );
        })}
      </ul>
    </div>
  );
};

export default App;

 

invalidateQueries

쿼리를 무효화하여 데이터를 다시 패칭해주어야 하기 때문에 , useMutation과 함께 사용하여 데이터가 변경된후 해당 쿼리를 다시 가져온다.

const queryClient = useQueryClient();

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