React Query

김래영·2022년 10월 11일

react-query

Frontend

목록 보기

14/15

React-Query란?

React 애플리케이션에서 데이터를 가져오기 위한 라이브러리입니다.

데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 비동기 과정에서 데이터를 관리하기 편하게 할 수 있습니다.

사용하는 이유

아래와 같이 React는 데이터를 가져올 때 useEffect를 사용하고 useState를 사용하여 상태를 유지합니다.

import React, { useEffect, useState } from "react";
import axios from "axios";

const App = function () {
  const [sate, setState] = useState([]);

  const load = async () => {
    const { data } = await axios.get("http://localhost:4000/api");

    setState(data);
  };

  useEffect(() => {
    load();
  }, []);

  return <div></div>;
};

만약 앱 전체에 데이터가 필요한 경우 상태 관리 라이브러리(Redux, Recoil 등)를 사용하게 됩니다.

기존에 다양한 상태 관리 라이브러리 들은 비동기적 작업보다는 동기적인 클라이언트 데이터를 관리하기에 더 적합하기 때문에

react-query를 사용함으로 서버와 클라이언트 데이터를 분리합니다.

client state: 앱 메모리에 유지되고 액세스 하거나 업데이트하는 것 (동기적)
server state: 업데이트에 필요한 API(비동기)

장점

캐싱 처리가 더 간단해집니다.
프로젝트 구조가 기존보다 단순해집니다. 때문에 유지 보수하고 새로운 기능을 추가하기 쉽습니다.
직접 만들어서 사용했던 기타 기능들을 옵션으로 지원합니다.
같은 데이터를 여러 번 요청할 경우 한 번만 요청하고 옵션에 따라 중복 호출 허용 시간 조절 가능합니다.
백그라운드에서 stale 한 상태 데이터를 refetch 합니다.
서버 쪽 데이터를 가비지 컬렉션을 이용하여 자동으로 메모리 관리를 해줍니다.
get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행합니다.
예를 들어, 게시판의 글의 목록을 가져오고 게시판의 글을 생성하면 게시판 글을 get 하는 api를 자동으로 실행합니다.

React-Query 사용하기

Install

npm i react-query

react-query를 사용할 수 있도록 세팅합니다.

import { BrowserRouter as Router, Route, Routes } from "react-router-dom";
import { HomePage } from "./components/Home.page";
import { QueryClient, QueryClientProvider } from "react-query";
import { ReactQueryDevtools } from "react-query/devtools";

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <Router>
          <Routes>
            <Route path="/" element={<HomePage />} />
          </Routes>
        </div>
      </Router>
      <ReactQueryDevtools initialIsOpen={false} position={'bottom-right'}/>
    </QueryClientProvider>
  );
}

export default App;

import { useQuery } from "react-query";
import axios from "axios";

const Page = () => {
  const fetch = () => {
    return axios.get("http://localhost:4000/api");
  };
  const { isLoading, data, isError, error } = useQuery(
    "key",
    fetch,
  );

  if (isLoading) {
    return <h2>Loading...</h2>;
  }

  if (isError) {
    return <h2>{error.message}</h2>;
  }

  return (
    <>
      <h2>Hello world</h2>
      {data?.data.map((el) => {
        return <div key={el.id}>{el.name}</div>;
      })}
    </>
  );
};

첫 번째 파라미터로 쿼리에 사용할 유니크한 키값을 넣어줍니다.
두 번째 파라미터로 쿼리가 데이터를 요청하는 데 사용할 비동기 함수(api)를 인자로 넣습니다.
데이터 또는 오류를 반환해야하고 데이터는 undefined가 될 수 없습니다.

변화가 있을 때 refetch

import React, { useState } from "react";
import { useQuery } from "react-query";
import axios from "axios";

const App = function () {
  const [id, setId] = useState(1);

  const load = async () => {
    const resp = await axios.get(`http://localhost:4000/${id}`);
    return resp;
  };

  const { data, status } = useQuery(["key", id], load);
  ...
};

첫 번째 파라미터를 배열을 넣습니다.
0번째 인덱스에 유니크한 키값을 넣고, 1번째 인덱스부터 변화가 생길 때마다 refetch 되어야 하는 구성 요소들을 나열합니다.

옵션 설정

세 번째 인자로 옵션을 설정할 수 있습니다.

const { data, status, isLoading, isFetching } = useQuery(
  ["key", currentPage],
  load,
  {
    refetchOnWindowFocus: false,
    statleTime: 10000,
    cashTime: 20000,
  }
);

refetchOnwindowFocus (default: true)
- boolean | 'always' | ((query: Query) => boolean | "always")
- 브라우저가 포커스에 되었을 때 refetch 여부를 boolean으로 설정할 수 있습니다.
- true로 설정하면 데이터가 오래된 경우 쿼리가 창 포커스에서 다시 가져옵니다.
- false로 설정하면 쿼리가 창 포커스에서 다시 가져오지 않습니다.
- "always"로 설정하면 쿼리는 항상 창 포커스에서 다시 가져옵니다.
- 함수를 설정하면 값을 계산하는 쿼리와 함께 함수가 실행됩니다.
refetchOnMount (default: true)
- boolean | "always" | ((query: Query) => boolean | "always")
- 새로 마운트가 되었을 때 refetch 여부를 설정할 수 있습니다.
- true로 설정하면 데이터가 오래된 경우 쿼리가 마운트 시 다시 가져옵니다.
- false로 설정하면 쿼리가 마운트 시 다시 가져오지 않습니다.
- "always"로 설정하면 하면 쿼리가 마운트 시 항상 다시 가져옵니다.
- 함수를 설정하면 값을 계산하는 쿼리와 함께 함수가 실행됩니다.
refetchOnReconnect (default: true)
- boolean | "always" | ((query: Query) => boolean | "always")
- 네트워크가 끊어졌다가 다시 연결될 때 refetch 여부 설정할 수 있습니다.
- true로 설정하면 데이터가 오래된 경우 쿼리가 다시 연결할 때 다시 가져옵니다.
- false로 설정하면 네트워크를 다시 연결할 때 쿼리를 다시 가져오지 않습니다.
- "always"로 설정하면 쿼리는 네트워크를 다시 연결할 때 항상 다시 가져옵니다.
- 함수를 설정하면 값을 계산하는 쿼리와 함께 함수가 실행됩니다.
refetchInterval
- number | false | ((data: TData | undefined, query: Query) => number | false)
- 데이터를 지정한 시간에 따라 refetch를 시켜주는 옵션입니다.
refetchIntervalInBackground
- boolean
- true로 설정하면 background에 있어도 refetchInterval에 의해 refetch 됩니다.
staleTime (default: 0)
- number | Infinity
- 데이터가 fresh 한 상태에서 오래된 상태로 변경되는 시간을 설정합니다.
- fresh 상태일 때는 쿼리 인스턴스가 새롭게 mount 되어도 네트워크 fetch가 일어나지 않습니다.
- 데이터가 한번 fetch 되고 나서 staleTime이 지나지 않았다면 mount 되어도 fetch가 일어나지 않습니다.
- Infinity로 설정하면 데이터가 오래된 것으로 간주되지 않습니다.
cashTime (default: 5분)
- 데이터가 비활성화 상태일 때 캐싱된 상태로 남아있는 시간입니다.
- 쿼리 인스턴스가 unmount 되면 데이터는 비활성화 상태로 변경되며, 캐시는 cacheTime만큼 유지됩니다.
- cacheTime이 지나면 가비지 콜렉터로 수집됩니다.
- cacheTime이 지나기 전에 쿼리 인스턴스가 다시 마운트 되면, 데이터를 fetch 하는 동안 캐시 데이터를 보여줍니다.
- cacheTime은 staleTime과 관계없이, casheTime이 지나면 inactive 된 시점을 기준으로 캐시 데이터 삭제를 결정합니다.
isFetching
- 데이터가 fetch 될 때 true or 캐싱 데이터가 있어서 백그라운드에서 fetch 될 때 true 반환합니다.
isLoading
- 캐싱된 데이터가 없고 fetch 중일 때 true, 아닐 때 false 반환합니다.

useQuery("names", fetch, {
  onSuccess: (data) => {
    console.log(data);
  },
  onError,
  select: (data) => {
    const names = data.data.map((el) => el.name);
    return names;
  },
});

onSuccess
- 이 함수는 쿼리가 새 데이터를 성공적으로 가져올 때마다 실행됩니다.
onError
- 이 함수는 쿼리에 오류가 발생하고 오류가 전달되면 실행됩니다.
select
- (data: TData) => unknown
- 비동기 호출에서 반환되는 데이터를 재구성할 수 있습니다.

useQuery(
    "key",
    fetchSuperHeroes,
    {
      initialData: () => {
        return {
          data: [
            {
              id: 2,
              name: "test",
            },
          ],
        };
      },
    }
  );

initialData
- TData | () => TData
- 초기값을 설정할 수 있습니다. (쿼리가 아직 생성되거나 캐시되지 않은 경우)
- 캐시에 유지됩니다.

const { refetch } = useQuery("key", fetch, {
  enabled: false,
});

enabled
- boolean값으로 쿼리를 자동으로 실행 되지 않도록 설정할 수 있습니다.
refetch
- 쿼리를 수동으로 다시 가져오는 기능입니다.

const { isLoading, isError, error, data, isFetching } = useQuery(
  ["colors", pageNumber],
  () => fetchColors(pageNumber),
  {
    keepPreviousData: true,
  }
);

keepPreviousData
- boolean
- 새 데이터를 가져올 때 이전 데이터가 유지되고 새 데이터가 도착하면 이전 데이터와 스왑 되어 새 데이터를 표시합니다.
- isPreviousData로 현재의 제공된 데이터의 상태를 알 수 있습니다.

useInfinitedQuery

무한 스크롤 또는 더보기와 같은 목록을 로드할 때 유용합니다.

const {
  isLoading,
  isError,
  error,
  data,
  fetchNextPage,
  hasNextPage,
  isFetching,
  isFetchingNextPage,
} = useInfiniteQuery(["colors"], fetchColors, {
  getNextPageParam: (_lastPage, pages) => {
    if (pages.length < 4) {
      return pages.length + 1;
    } else {
      return undefined;
    }
  },
});

getNextPageParam
- 다음 페이지에 호출할 pageParam 값을 반환할 수 있습니다.
- getNextPageParams undefined일 때 hasNextPage는 false를 반환하고 그 외 다른 값을 반환할 때,
  hasNextPage는 true를 반환합니다.
hasNextPage
- 다음 페이지가 있는지 여부를 boolean으로 확인할 수 있습니다.
fetchNextPage
- 더보기 버튼 클릭 or 무한 스크롤 시 호출할 때 사용됩니다.
isFetchingNextPage
- isFetchingNextPage와 isFetchPreviousPage로 백그라운드 새로 고침 상태와 추가 로딩 상태를 구분할 수 있습니다.

비동기 여러 개를 실행할 경우 useQueries

useQueriy를 Promise.all처럼 사용할 수 있는 것이 useQueries입니다.

useQueries([
  {
    queryKey: ["id", id],
    queryFn: () => loadIDData(),
  },
  {
    queryKey: ["gender", gender],
    queryFn: () => loadGenderData(),
  },
]);

QueryCache

쿼리에 대해 성공 및 실패 전처리를 할 수 있습니다.

const queryClient = new QueryClient({
  queryCache: new QueryCache({
    onError: (error, query) => {
      console.log(error, query);
    },
    onSuccess: (data) => {
      console.log(data);
    },
  }),
});

useMutation

데이터를 생성, 업데이트 또는 삭제할 때 사용하기 유용합니다.

// Access the client
const queryClient = useQueryClient();

// Queries
const query = useQuery(["todos"], getTodos);

// Mutations
const mutation = useMutation(postTodo, {
  onSuccess: () => {
    // Invalidate and refetch
    queryClient.invalidateQueries(["todos"]);
  },
});