react-query useQuery / useMutation

react-qeury란

React에서 데이터를 관리하기 위한 라이브러리이다.

주로 백엔드와 데이터 통신을 담당한다. 

서버에서 가져온 데이터의 상태를 자동으로 관리하여 로딩 중, 성공, 실패 등의 상태를 쉽게 파악할 수 있다.

설치

yarn add react-query

 

적용

최상위 컴포넌트에서 new QueryClient 만든 후 감싸준다.

import React from "react";
import Router from "./shared/Router";
import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient();

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

export default App;

 

조회

useQuery(queryKey, queryFn)

• queryKey: 이 쿼리에 사용할 키 값, 이 키 값은 캐싱 처리 또는 invalidateQueries로 재요청 등에 쓰이므로 유니크한 값으로 만들어야 한다.
• queryFn : 데이터를 요청하는 데 사용할 함수

const { isLoading, isError, data } = useQuery("todos", getTodos);

 

thunk를 사용하면 isLoading, isError를 직접 관리해야 했는데, react-query는 기본으로 지원을 한다. 

 

 

데이터 변경

useMutation(mutationFn, {options})

• mutationFn : 데이터 변경을 수행할 함수
• {options} : 이 부분은 아래 코드에 사용된 onSuccess 외에도 onError, onSettled 등 여러 가지가 있다. (선택 옵션)
  onSuccess는 성공 시 로직이 실행된다. 

 

useQueryClient()

React Query에서 제공하는 훅 중 하나로, 현재 쿼리 클라이언트 객체에 액세스 하기 위해 사용된다.

 

 

.invalidateQueries(queryKey)

• queryKey: 재요청할 쿼리 키 값

지정된 쿼리나 쿼리들을 무효화하여 데이터를 재요청하도록 하는 역할을 하는 함수이다.

예를 들어 1개의 데이터를 추가하여 db에는 데이터가 5개, 화면에는 4개가 나올 때, 이 함수를 사용하여 데이터 요청을 다시 하여 화면과 db를 일치시킬 수 있다.

const queryClient = useQueryClient();
  const mutation = useMutation(addTodo, {
    onSuccess: () => {
      queryClient.invalidateQueries("todos"); //useQuery에 넣은 키 값을 넣는다
      console.log("성공");
    }
  });
  
  //... 생략
  
  const handleSubmitButtonClick = (event) => {
    //... 생략
    const newTodo = {
      title,
      contents,
      isDone: false,
      id: uuidv4()
    };
    mutation.mutate(newTodo);
  };