Tanstack Query

Tanstack Query?

한마디로 서버 상태관리 도구의 끝판왕이다.

https://tanstack.com/query/latest

TanStack Query

 

원래이름은 React Query 였다.

그런데 여러가지 프론트엔드 프레임워크에서 사용하려고 업그레이드 되면서 이름을 Tanstack Query로 바꾸었다.

(TANSTACK재단까지 만듬,,)

뜬금 TANSTACK 뜻은 태닝한다는뜻 맞다! 

 

클라이언트 측에서 데이터를 관리할때 , 특히 서버에서 데이터를 가져오고, 캐싱하고, 동기화하는 작업을 간단하게 처리할수 있게 해준다.

• 로딩상태, 에러메세지, 자동리페치으 퀴리캐싱, 자동재시도 백그라운드 동작 등등...

덕분에 API요청과 같은 서버와의 통신 작업을 쉽게 관리할수있다.

 

빠르게 한눈에보기

import {
  useQuery,
  useMutation,
  useQueryClient,
  QueryClient,
  QueryClientProvider,
} from '@tanstack/react-query'
import { getTodos, postTodo } from '../my-api'

// Create a client
const queryClient = new QueryClient()

function App() {
  return (
    // Provide the client to your App
    <QueryClientProvider client={queryClient}>
      <Todos />
    </QueryClientProvider>
  )
}

function Todos() {
  // Access the client
  const queryClient = useQueryClient()

  // Queries
  const query = useQuery({ queryKey: ['todos'], queryFn: getTodos })

  // Mutations
  const mutation = useMutation({
    mutationFn: postTodo,
    onSuccess: () => {
      // Invalidate and refetch
      queryClient.invalidateQueries({ queryKey: ['todos'] })
    },
  })

  return (
    <div>
      <ul>{query.data?.map((todo) => <li key={todo.id}>{todo.title}</li>)}</ul>

      <button
        onClick={() => {
          mutation.mutate({
            id: Date.now(),
            title: 'Do Laundry',
          })
        }}
      >
        Add Todo
      </button>
    </div>
  )
}

render(<App />, document.getElementById('root'))

 

클라이언트 상태와 서버 상태의 차이

• 클라이언트 상태 : 사용자 UI(인터페이스)와 관련된 상태 
  • ex : 모달창 닫힘, 토글 아코디언, 스크롤 위치 이벤트 등등.. (서비에서 알 필요 X)
• 서버상태 : 보통은 데이터
  • 외부의 서버에서 데이터를 가져와 사용해야하는 상태

 

**리액트 훅이름 앞에는 use 가 붙는다.

useQuery : 조회하다

Query : 있어요 ? 하고 질문하는거라 생각하면 된다! 

즉 서버에서 데이터를 가져오는 비동기 요청을 관리하는단위이다.

const { data, isLoading, error } = useQuery({
    queryKey: ['todos'],
    queryFn: async () => {
      const response = await fetch('https://jsonplaceholder.typicode.com/todos')
      return await response.json()
    },
})

• useQuery() 를 호출한다
• 그안에 객체를 넣어준다
• 객체는 queryKey, queryFn 을 가진다.
• queryKey : useQuery 를 나타내는키가 배열로 들어간다.
• queryFn : 데이터를 가져오는 비동기 함수
• 리턴값 : data, isLoading, error

queryKey

데이터를 가져오는 쿼리를 고유하게 식별하는 식별자.

캐싱과 리페칭을 관리한다.

배열로 전달되며, 첫 번째 요소는 주요 키이고, 추가 요소는 데이터를 식별하거나 필터링하는 데 사용한다.

 

useMutation : 바꾸다

서버 데이터를 수정하거나, 추가,  삭제 하는 비동기 작업을 처리하는 훅

데이터 조작 후 관련 쿼리를 무효화 하여 데이터를 최신 버전으로 새로 가져오는등, 성공 실패 시 동작을 추가할수 있다.

const { mutate, isPending } = useMutation({
  mutationFn: postTodo,
  onSuccess: () => {
    queryClient.invalidateQueries({ queryKey: ['todos'] }) // 쿼리 키 무효화
  },
})

• useMutation 사용()
• 그 안에 객체안에 mutationFn 넣어준다.
• onSuccess : 요청이 성공했을때 함수 실행(onSuccess같은 설정이 많다.)
• invalidateQueries : 쿼리 키 무효화
• mutate : 함수 동작 실행
• isPending : 실행 중 상태

 

쿼리키 무효화?

기존에 캐싱 되어있는것을 삭제 시켜준다.

클라이언트에서는 데이터가 없으니 서버에 새로운 데이터를 가져오도록 요청한다.

한번 불러오고 모든 페이지에 적용된다 (일일히 다 바꿀 필요 없음)

• 자동으로 최신 데이터를 반영 할수 있다.
• 데이터의 일관성을 유지하여준다.
• 불필요한 데이터 캐시를 줄이고, 필요할때만 서버에서 데이터를 가져와 성능을 최적화 할수있다.

 

1.  설치

yarn add @tanstack/react-query

 

2. 설정하기

Tanstack Query는 서버로부터 가져온 상태를 전역적으로 관리하기 위해 Provider로 감싸주어여한다!

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

// QueryClient 생성
const queryClient = new QueryClient();

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