TanStack-query? 라고 하면 많이 낯설 것이다.
과연 이 TanStack-Query란 무엇인가?

TanStack Query (이전 명칭: React-Query) 는 데이터 가져오기 라이브러리로,
웹 애플리케이션에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 아주 쉽게 해준다.

즉, React-query이다.

※왜 React-Query에서 바꼈나요?

v4부터 Vue나 Svelte등의 다른 프레임워크에서도 활용할 수 있도록 기능이 확장되어
TanStack Query 라는 이름으로 변경되었다.

---

📍알아보기

대표적인 기능

• 데이터 가져오기 및 캐싱
• 동일 요청의 중복 제거
• 신선한 데이터 유지
• 무한 스크롤, 페이지네이션 등의 성능 체적화
• 네트워크 재연결, 요청 실패 등의 자동 갱신

---

설치 방법

1. npm

npm i @tanstack/react-query 

2. yarn

yarn add @tanstack/react-query

=> React18과 TypeScript 4.7이상 사용하는 것이 TanStack Query의 최신 기능과 최적의 호환성을 누를 수 있다.

※추천 사항

npm i -D @tanstack/eslint-plugin-query
yarn add -D @tanstack/eslint-plugin-query

=> 코딩 중에 버그와 불일치를 발견하는 데 도움이 되는 ESLint 플로그인 쿼리 사용하게 끔 설치

Main.tsx 세팅

//main.tsx

import App from "./App.tsx"
import { createRoot } from "react-dom/client"
import { QueryClient, QueryClientProvider } from "@tanstack/react-query"
import "./styles/index.css"

const queryClient = new QueryClient()

createRoot(document.getElementById("root")!).render(
  <Provider store={store}>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </Provider>
)

프로젝트 범위를 로 랩핑하고, 사용할 queryClient 인스턴스를 연결하면 사용할 준비 끝!

QueryClientProvider는 리액트 애플리케이션에서 비동기 요청을 처리하기 위한 Context Provider로 동작하며 하위 컴포넌트에서 QueryClient를 사용할 수 있다.

---

사용하기

1. useQuery

• get API 요청을 수행하기 위한 hook
• 파라미터
  • queryKey: unknown[]
    : 해당 쿼리의 고유 식별자
  • queryFn
    : 쿼리에 사용할 promise 기반의 비동기 API 함수(API 요청 보내는 함수)
  • enabled
    : useQuery를 동기적으로 사용 가능

2. useMutation

• 데이터를 create, update, delete하거나 서버의 side-effects를 수행할 때 사용
• 파라미터
  • mutationKey: mutation에 사용 할 unique key값
  • mutationFn: mutation에 사용 할 promise 기반의 비동기 API 함수

import { useMutation } from '@tanstack/react-query'
import axios from 'axios'

//API 요청을 위해 전송할 데이터 타입
interface User {
	name: string;
	email: string;
}

//임의로 만든 타입 => API 호출 결과로 반환 받을 데이터 타입
interface CreateUser {
	id: number;
	name: string;
	email: string;
}

export default function 함수명() {
	return useMutation<CreateUser>({
		mutationFn: async(User: User) => {
			const response = await axios.post(`api/v1/ ~~`)
			return response.data;
		},
		onSuccess:() => {
			queryClient.invalidateQueries(['groups'])
		}
	})
}

위의 커스텀 훅을 컴포넌트에서 사용할 땐

import React, { useState } from 'react';
import useCreateUser from './useCreateUser';

const CreateUserComponent: React.FC = () => {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const { mutate, isLoading, isError, error, data } = useCreateUser();

  const handleSubmit = (event: React.FormEvent) => {
    event.preventDefault();
    // mutate 함수를 호출하여 POST 요청 실행 (여기서 새로운 사용자 데이터를 전달)
    mutate({ name, email });
  };

  return (
    <div>
      <h1>Create New User</h1>
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          placeholder="Name"
          value={name}
          onChange={(e) => setName(e.target.value)}
        />
        <input
          type="email"
          placeholder="Email"
          value={email}
          onChange={(e) => setEmail(e.target.value)}
        />
        <button type="submit" disabled={isLoading}>
          {isLoading ? 'Loading...' : 'Create'}
        </button>
      </form>

      {isError && <div>Error: {(error as Error).message}</div>}
      {data && (
        <div>
          Created User - ID: {data.id}, Name: {data.name}, Email: {data.email}
        </div>
      )}
    </div>
  );
};

export default CreateUserComponent;

mutations 후 다시 get 하는 방법

• invalidateQueries: 지정된 쿼리 키(여기서는 'groups')를 가진 쿼리를 무효화하여, 구독중인 컴포넌트가 해당 쿼리를 자동으로 다시 가져오도록 한다.
• 다른 방법으로는 queryClient.refetechQueries(['groups'])를 사용할 수도 있으나, 보통은 invalidate로 캐시 무효화 후 재요청하는 방식이 '권장'된다.

📂참고 문서

공식 문서
useMuation
useQuery