[ React ] - react-query 사용하기

1. 라이브러리 추가

# npm
> npm i react-query
# yarn
> yarn add react-query

2.  App.tsx 설정

react-query를 전역에서 사용할 수 있도록 하기 위해 App컴포넌트를 provider로 감싸준다.

App.tsx

import React from "react";
import "./App.css";
import Home from "./pages/Home";
import { QueryClientProvider, queryClient } from "react-query";

function App() {
  //
  const queryClient = new QueryClient({
  	defaultOptions: {},
  });
  
  return (
    <div className="App">
        <QueryClientProvider client={queryClient}>
           <Home />
        </QueryClientProvider>
    </div>
  );
}

export default App;

3.  기본 사용법

 react-query

• get과 같은 단순 조회의 경우 useQuery()를 사용하고, 생성 / 업데이트 / 삭제 등의 작업이 발생할 때는 useMutation()을 사용한다.
• useQuery는 2개의 필수 인자와 1개의 옵션 인자를 갖는다. 첫번째 인자에는 uniqueKey가 들어가고, 두번째 인자에는 비동기 함수(api 호출 함수)가 들어간다.

useQuery는 서버에서 데이터를 요청해올 때 사용한다.
useQuery를 사용하기 위해서는 인자로 queryKey와 비동기함수를 넣어주어야 한다. ( 비동기함수 = api호출함수 = promise처리가 이루어지는 함수)
useQuery는 아래와 같이 사용한다.

//useQuery([queryKey], [비동기함수], {/*옵션*/});

const getApi = async () =>
  await fetch("http://get-api").then((res) => res.json());

useQuery("getApi", getApi);

 queryKey는 각 useQuery를 구별하기 위한 key로 볼 수 있다. queryKey는 단순 문자열 형태로 사용되기도 하고, 배열형태로도 사용가능하다. 문자열로 지정한 경우 해당 문자열 하나를 인자로 갖는 배열로 인식된다. 때문에 queryKey가 문자열 "test"인 경우와, 배열 ["test"] 로 된 경우에 react-query는 두 경우를 같은 useQuery를 가졌다고 받아들인다. 
queryKey는 데이터를 가져올 때 이미 캐싱된 데이터가 존재하는 경우 해당 데이터를 가져오기 위해 사용된다. 때문에 두번째 인자로 비동기함수(api 호출 함수)를 주지 않고, queryKey만 준 경우에도 해당 queryKey에 캐싱된 데이터를 가져와 준다. 

useQuery는 두 가지 인자 이외에도, 아래와 같이 세번째에 {}를 주어 옵션을 설정하여 줄 수 도 있다.

//useQuery([queryKey], [비동기함수], {/*옵션*/});

  const getApi = async () =>
  await fetch("http://get-api").then((res) => res.json());

  useQuery("getApi", getApi, {
    retry: 10,
    // api 요청 실패시 10초마다 재요청한다.
    onError: (e:Error) => console.log(e.message), // error 관련한 처리
    onSuccess:(data) => console.log(data) //data 관련한 처리

  });

또한 useQurey는 data, isError, isLoading등을 반환하여 준다. data는 해당 api 를 통해 반환받은 데이터, isError는 에러가 발생한 경우 등에 대한 값을 담고 있다.

• useMutation 의 경우 인자로 api 호출 함수를 받으며, useQuery의 경우와 마찬가지로 두 번째 인자에 {}에 별도의 옵션을 설정하여 줄 수 있다.

//useMutation([비동기함수], {/*옵션*/});

const createBoard = useMutation(postApi);
createBoard.mutate({
	title:"board", 
	content:"contents",{
    	onError:(e) 
       	 => console.log(e)
    }
);

 

또한 useMutaion의 경우 인자로 postApi를 넣어준 후 반환받은 mutate를 통해 해당 api 호출 시에 body값 즉 서버에 전송할 데이터를 담아 준다. mutate의 첫 번째 인자로 해당 api 에 요청을 보낼 때 같이 전달할 data를 담아준다.

참고 블로그 https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5

https://jforj.tistory.com/243

공식문서 https://react-query-v3.tanstack.com/quick-start