React-Query

React query를 사용해보면서 좀 더 작성해 나갈 예정.

리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 쉽게 해주는 라이브러리이며,
zero-config로도 가능하지만, 커스텀 config도 가능하다.

시작하기

import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

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

root.render(
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
);

react query를 사용하려면 위와 같이 queryClient를 생성한 후 QueryClientProvider로 감싸줘야한다.

세가지 core 컨셉

Queries

• unique key(고유키)에 연결된 비동기 데이터에 대한 선언적 종속성이다.
• 서버에서 데이터를 가져오기 위해 모든 Promise 기반 메서드(GET 및 POST 포함)와 함께 사용할 수 있다.
• 서버의 데이터를 수정하는 경우 대신 Mutations을 사용하는 것이 좋다.

useQuery라는 hook을 사용하여 구성 요소를 구독할 수 있다.

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

function App() {
  const info = useQuery(['todos'], fetchTodoList)
}

Query key

key, value 형태의 맵핑구조와 비슷하다.

• 단순한 쿼리 키
  단순하게는 상수 값이 있는 배열 형태이다. 해당 key에 따라 query caching을 관리한다.

// A list of todos
useQuery(['todos'], ...)

// Something else, whatever!
useQuery(['something', 'special'], ...)

• 변수가 있는 배열 키
  쿼리에 데이터를 고유하게 설명하기 위해 추가 정보가 필요한 경우 문자열이 있는 배열과 직렬화 가능한 개체를 사용하여 설명할 수 있다.

// An individual todo
useQuery(["todos", 5], ...);
         
// An individual todo in a "preview" format
useQuery(['todo', 5, { preview: true }], ...)

// A list of todos that are "done"
useQuery(['todos', { type: 'done' }], ...)

Query Function

Promise를 리턴하는 함수로 resolve 또는 Error를 전달한다.

function fetchTodoList(){
	return fetch(url).then((response) => response.json());
}

예제

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

function fetcher(){
  return fetch("https://jsonplaceholder.typicode.com/todos").then(response => response.json())
}

export default function App() {
  // 구조분해할당으로 사용할 수 있다.
   const {data, isLoading, isError} = useQuery(["todos"], fetcher);
  console.log(data); // useQuery를 사용하여 api로 부터 전달 받은 내용을 확인할 수 있다.
  return (
    <div>
    </div>
  );
}

Mutations

Querys와 다르게 Mutatuins은 데이터를 생성/업데이트/삭제하거나 side-effect를 수행하는데 사용한다. 이 때 useMutation hook을 사용하면 된다.

 const mutation = useMutation(newTodo => {
    return fetch('/api', newTodo)
  })

Query Invalidation

기존의 쿼리의 데이터를 무효화 시키고, refectch를 이르켜 업데이트를 하게 된다.

참고

-React-Query
-우아한tech youtube