[⚛️] Tanstack Query(1) - useQuery, mutate, invalidateQueries

스탠다드반에서 진행했던 90분의 타임어택 과제.

1. 투두리스트를 tanstack query로 리팩토링

2. 좋아요 버튼을 낙관적 업데이트로 리팩토링

복습하며 tanstack의 개념에 대해 정리해보고자 한다.

---

✔️ 투두리스트를 tanstack query로 리팩토링

 

 

useQuery

 

📍기존 로직

• fetchData 함수에서 비동기적으로 (async - await) 처리 중
• try, catch, finally로 데이터, 에러, 로딩 상태를 관리함
• useEffect를 사용하여 axios 요청을 받아 옴

// todos.js

import axios from "axios";

export const todoApi = axios.create({
  baseURL: "http://localhost:4000",
});

// Home.jsx

import { useState, useEffect } from "react";
import { todoApi } from "../api/todos";
import TodoForm from "../components/TodoForm";
import TodoList from "../components/TodoList";

export default function Home() {
  // TODO: 필수: useQuery 로 리팩터링 하세요.
  // TODO: 선택: useQuery 로 리팩터링 후, 커스텀훅 useTodosQuery 로 정리해 보세요.
  const [isLoading, setIsLoading] = useState(true);
  const [error, setError] = useState(null);
  const [data, setData] = useState([]);

  const fetchData = async () => {
    try {
      const response = await todoApi.get("/todos");
      setData(response.data);
    } catch (err) {
      setError(err);
    } finally {
      setIsLoading(false);
    }
  };

  useEffect(() => {
    fetchData();
  }, []);

  if (isLoading) {
    return <div style={{ fontSize: 36 }}>로딩중...</div>;
  }

  if (error) {
    console.error(error);
    return (
      <div style={{ fontSize: 24 }}>에러가 발생했습니다: {error.message}</div>
    );
  }

  return (
    <>
      <h2>서버통신 투두리스트 by useState</h2>
      <TodoForm fetchData={fetchData} />
      <TodoList todos={data} />
    </>
  );
}

 

 

📍useQuery 적용 로직

• App.jsx에서 new QueryClient 생성 후 Provider로 감싸기 👉🏻 Router(여기서는 전역)에 tanstack query를 적용
• useQuery를 사용하여 데이터, 로딩, 에러 상태를 한 번에 관리 👉🏻 로직 간편, 여러 상태를 알아서 처리해 줌
• queryKey로 queryFn 을 캐싱한다. 👉🏻 "todos" 라는 key로 fetchData(todoApi에서 가져온 값)을 캐싱하여 관리

// App.jsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
import Router from "./shared/Router";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router />
    </QueryClientProvider>
  );
}

export default App;

// Home.jsx
...
const fetchData = async () => {
    const response = await todoApi.get("/todos");
    return response.data;
  };

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

  if (isLoading) {
    return <div style={{ fontSize: 36 }}>로딩중...</div>;
  }

  if (error) {
    console.error(error);
    return (
      <div style={{ fontSize: 24 }}>에러가 발생했습니다: {error.message}</div>
    );
  }
  ...

 

 

🚨queryKey 를 다르게 주어야 하는 이유

디테일 페이지에서는 클릭한 카드의 상세 내용을 불러와야 하기 때문에 해당 id를 params로 받아온다.

 

📍시도 1. Home.jsx의 queryKey를 똑같이 설정

// Detail.jsx

export default function Detail() {
  const { id } = useParams();

  const fetchDetail = async () => {
    const response = await todoApi(`/todos/${id}`);
    return response.data;
  };

  const { data, isLoading, error } = useQuery({
    queryKey: ["todos"],  ⭐️
    queryFn: fetchDetail,
  });

• params로 id를 받아와서 API에 적용은 하지만 쿼리키를 Home과 동일하게 두었기 때문에
  fetchDetail의 data는 캐싱된 데이터(todos 배열)에서 id에 해당하는 객체를 반환
• 리스트 페이지는 Home에서 캐싱한 "todos"의 데이터를 그려내지만 
  디테일 페이지에서 "todos" 데이터를 해당 id의 객체로 바꿨기 때문에 디테일 -> 홈으로 이동할 때 영향
• 객체.map 을 할 수 없기 때문에 TypeError

 

📍시도 2. queryKey를 다르게 적용

// Detail.jsx

export default function Detail() {
  const { id } = useParams();

  const fetchDetail = async () => {
    const response = await todoApi(`/todos/${id}`);
    return response.data;
  };

  const { data, isLoading, error } = useQuery({
    queryKey: ["detail"],  ⭐️
    queryFn: fetchDetail,
  });

 

 

• Home과는 다른 쿼리키를 주어 서로 다른 데이터를 캐싱하기 때문에 디테일 -> 홈으로 이동 시에 오류가 나지 않음
• 3G 환경에서 살펴보면 디테일 페이지끼리 이동 시, 이전에 클릭했던 디테일 데이터가 그려지다가 이후에 제대로 반영
  1. 처음에 "detail" 이라는 데이터는 1번 디테일 내용을 로딩하여 가져왔고, 그 값을 캐싱해 둠
  2. 2번 디테일 페이지로 들어갔을 때, 캐싱된 1번 디테일을 보여줌
  3. 그 사이에 보이지 않는 곳에서는 params의 id 값을 찾는 중 - isLoding 상태
  4. 이전과 다른 값을 찾았기 때문에 isLoding state에 변화가 생겼고, 리렌더링이 되어 2번 디테일 페이지를 보여줌

 

 

📌 시도 3. queryKey에 해당 id를 함께 부여함

// Detail.jsx

export default function Detail() {
  const { id } = useParams();

  const fetchDetail = async () => {
    const response = await todoApi(`/todos/${id}`);
    return response.data;
  };

  const { data, isLoading, error } = useQuery({
    queryKey: ["todos", id],  ⭐️
    queryFn: fetchDetail,
  });

 

• 쿼리키를 ["todos", id]로 주었기 때문에 디테일 페이지에 들어갈 때마다 todos 데이터에서 id에 해당하는 값을 가져옴
• 그 값은 캐싱되어 있기 때문에 페이지를 다시 들어가도 이전에 캐싱해 둔 값을 보여주어 '로딩 중...' 이 뜨지 않음
• isLoding 상태가 지난 후 이전 캐싱값과 변화된 게 없기 때문에 리렌더링이 일어나지 않음

 

✨결론

• 쿼리키를 다르게 주어 각자 캐싱되는 데이터에 영향을 주지 않도록 한다.
• id와 같이 특정한 데이터를 보여주어야 할 때는 쿼리키에 특정한 값을 추가하여 해당하는 데이터를 새롭게 찾도록 한다.

 

 

mutation & invalidate Queries

 

📍기존 로직

• Home.jsx에서 fetchData를 props 로 전달받아서 비동기적으로 처리
• post(값을 추가)한 후, 다시 fetchData를 불러 수동으로 관리

// TodoForm.jsx
import { useState } from "react";
import { todoApi } from "../api/todos";

export default function TodoForm({ fetchData }) {
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");

  // TODO: 필수: useMutation 으로 리팩터링 하세요.
  // TODO: 선택: useMutation 으로 리팩터링 후, useTodoMutation 커스텀훅으로 정리해 보세요.
  const handleAddTodo = async (e) => {
    e.preventDefault();
    setTitle("");
    setContents("");
    await todoApi.post("/todos", {
      id: Date.now().toString(),
      title,
      contents,
      isCompleted: false,
      createdAt: Date.now(),
    });
    await fetchData();
  };

  return (
    <form onSubmit={handleAddTodo}>
      <label htmlFor="title">제목:</label>
      <input
        type="text"
        id="title"
        name="title"
        value={title}
        onChange={(e) => setTitle(e.target.value)}
        required
      />
      <label htmlFor="contents">내용:</label>
      <input
        id="contents"
        name="contents"
        value={contents}
        onChange={(e) => setContents(e.target.value)}
        required
      />
      <button type="submit">추가하기</button>
    </form>
  );
}

 

 

📍mutation 적용 로직

• useMutation 훅을 사용하여 { mutate } 정의 및 적용 👉🏻 mutationFn를 실행하여 새로운 값을 추가 (외에도 CUD 가능)
• onSuccess (요청 성공) 시 invalidateQueries 를 적용하여 해당 key의 쿼리를 무효화 시킴 👉🏻 캐싱해두었던 쿼리가 사라지면서 데이터를 다시 불러옴 (화면에 새로운 데이터 값 반영)

// TodoForm.jsx
...
export default function TodoForm() {
  const [title, setTitle] = useState("");
  const [contents, setContents] = useState("");
  const queryClient = useQueryClient();

  // TODO: 필수: useMutation 으로 리팩터링 하세요.
  // TODO: 선택: useMutation 으로 리팩터링 후, useTodoMutation 커스텀훅으로 정리해 보세요.

  const handleAddTodo = async (e) => {
    e.preventDefault();

    const newTodo = {
      id: Date.now().toString(),
      title,
      contents,
      isCompleted: false,
      createdAt: Date.now(),
    };

    mutate(newTodo);⭐️
    setTitle("");
    setContents("");
  };

  const addTodo = async (newTodo) => {
    await todoApi.post("/todos", newTodo);
  };

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

 

useMutation 훅으로 mutationFn을 관리하고 CUD를 하는 건 알겠어,

그럼 ⭐️mutate() 의 역할이 뭘까??

 

mutate는 useMutation 훅에서 데이터를 변경하는 함수이다.

주로 POST(C), PUT(U), DELETE(D) 같은 요청을 보낼 때 사용하며,

데이터를 변경한 후 캐시를 갱신하는 역할을 한다.

 

즉, 위의 로직에서 addTodo 함수(비동기 요청)을 실행하여 데이터를 추가하는 역할을 한다.