TIL(2/28) / React Query

왜 리액트 쿼리인가?

• 기존의 리덕스는 코드량이 많고, 비동기 데이터 관리를 위한 전문 라이브러리가 아님

중요한 3가지 포인트

Query : 데이터에 대한 요청 (R)

Mutation : 데이터 변경 (CUD)

Query Invalidation : 무효화(최신화)

 

사용방법

기본 세팅

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

const queryClient = new QueryClient();

const App = () => {

  return (
  // QueryClientProvider : 데이터를 읽어오는 기능(QueryClient)을 애플리케이션 전체에 주입하도록 하는 API
    <QueryClientProvider client={queryClient}>
      <Router />;
    </QueryClientProvider>
  );
};

export default App;

 

useQuery

// src/api/todos.js
const getTodos = async () => {
  const response = await axios.get(`${SERVER_URI}/todos`);
  // 조회 기능에서는 return을 꼭 해줘야 한다!
  return response.data;
};

export { getTodos };

// 조회가 필요한 곳에서
const { isLoading, isError, data } = useQuery("todos", getTodos);

 

useMutation

// src/api/todos.js
const addTodo = async (newTodo) => {
  await axios.post(`${SERVER_URI}/todos`, newTodo);
};

export { addTodo };

// 변경이 필요한 곳에서
const queryClient = new QueryClient();

const getMutation = useMutation(addTodo, {
  onSuccess: () => {
    // todos 쿼리키를 가진 값을 무효화 and refetch
  	queryClient.invalidateQueries('todos')
  }
})

 

---

 

useQuery

• 첫 번째 인자 : 쿼리 키(Query Keys)
  • refetching
  • caching
  • 애플리케이션 내에 쿼리를 공유할 때 
• 두 번째 인자 : 쿼리 함수(Query Functions)
  • promise 객체를 return
  • promise 객체는 반드시 data를 resolve하거나 에러를 내야 한다
• useQuery의 결과물
  • 객체(object)
  • 조회 결과에 대한 모든 정보가 들어있고, 그 과정에 대한 정보도 들어있다

 

useMutation

• mutation.mutate(인자)
  • 인자는 반드시 한 개의 변수 또는 객체여야 한다
  • 결과를 객체(object)로 갖고 있다
  • 결과물 객체의 상태
    1. isIdle (가동되지 않고 있다)
    2. isLoading
    3. isError (error 객체를 가지고 있다)
    4. isSuccess (data 객체를 가지고 있다)