[React] React Query

찐새·2022년 8월 11일

React

목록 보기

5/21

React Query

React Query는 우리가 실행하고 있었던 로직을 축약해준다.

install

npm i @tanstack/react-query

usage

Create Client

client 생성 후 provider에 보낸다.

// index.js

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

const queryClient = new QueryClient();

const root = ReactDOM.createRoot(document.getElementById("root")!);
root.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
    </QueryClientProvider>
  </React.StrictMode>
);

useQuery

useQuery는 key와 fetcher를 인자로 받는다.
- fetcher는 data를 가져오는 함수를 가리킨다.
- fetcher 리턴값은 Promise여야 한다.

// tempDB.json
{
  "temp": {
    "id": 1,
    "recruits": 3,
    "nickName": "haha"
  }
}

// api.ts
export async function getTemp() {
  return await fetch(`${BASE_URL}/temp?id=1`, {
    method: "GET",
    headers: {
  "Content-Type": "application/json",
	},
  }).then((response) => response.json());
}

// TempComponent.tsx
function TempComponent() {
  const { data } = useQuery(["tempData"], getTemp);
  console.log(data);
  // {id: 1, recruits: 3, nickName: 'haha'}
  return <h1>Hi, Json Dummy!</h1>;
}

해당 값은 캐시로 저장되어 다음에 같은 페이지를 방문해도 재호출하지 않는 장점이 있다.

useMutation

react query로 로드한 비동기 데이터를 변경할 때는 useMutation을 이용해 변경한다.

// api.ts
export async function patchTemp(newName:string) {
  return await fetch(`${BASE_URL}/temp?id=1`, {
    method: "PATCH",
    headers: {
  	  "Content-Type": "application/json",
	},
    body: JSON.stringify({ nickName: newName }),
  }).then((response) => response.json());
}

// TempComponent.tsx
function TempComponent() {
  const queryClient = useQueryClient();
  const mutation = useMutation(
    ({ newName }: { newName: string }) => patchTemp(newName),
    { onSuccess: () => queryClient.invalidateQueries() }
  );
  const [temp, setTemp] = useState("");
  const onChange = (e: React.ChangeEvent<HTMLInputElement>) =>
    setTemp(e.currentTarget.value);
  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    mutation.mutate({ newName: temp });
    setTemp("");
  };
  return (
     <div
      style={{
        width: "100vw",
        height: "100vh",
        display: "flex",
        flexDirection: "column",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <form onSubmit={onSubmit}>
        <input type="text" value={temp} onChange={onChange} />
        <button type="submit">제출</button>
      </form>
      <div>
        <span>NickName :</span>
        <span> {data?.nickName}</span>
      </div>
    </div>
    )
}

useMutation에서 호출하는 비동기 함수가 인자를 가지고 있다면 위 예제처럼 화살표 함수를 통해 들어갈 인자를 정의한다.
변하는 데이터를 전달하는 곳에서 mutate를 호출해 인자를 담는다.
변경 후 React Query 캐시를 재구성하고 싶다면 useQueryClient를 호출한 후 useMutation의 onSuccess에 queryClient.invalidateQueries를 실행하도록 한다.
React Query 키를 제거하고 싶다면 queryClient.removeQueries에 제거할 키를 입력한다.

ReactQueryDevTools

npm i -D @tanstack/react-query-devtools를 설치하면 크롬의 React Dev Tools 확장앱처럼 브라우저에서 React Query의 캐시 등을 확인할 수 있다.
최상위 컴포넌트에 렌더링한다.

// App.tsx
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

function App() {
  return (
    <React.Fragment>
      <Home />
      <ReactQueryDevtools />
    </React.Fragment>
  );
}

refetchInterval

useQuery 옵션에 refetchInterval을 설정해 주기적으로 refetch할 수 있다.

function JsonPlaceHolder() {
  const { isLoading, data } = useQuery<JPH>(["jpData"], fetchJsonPlaceHolder, {
    refetchInterval: 5000,
  });
  return <h1>Hi, Json Dummy!</h1>;
}