react-query 기능 모음

 

1. 데이터 페칭 (useQuery 훅 사용 예시)

javascript

import { useQuery } from "react-query";
import { getUser } from "./api";

function UserData({ userId }) {
  const { data, isLoading, isError } = useQuery(["user", userId], () => getUser(userId));

  if (isLoading) return "Loading...";
  if (isError) return "Error loading data";

  return <div>{data.name}</div>;
}

1. 캐싱 (자동 캐싱)

react-query는 기본적으로 쿼리 키에 따라 자동으로 캐싱을 관리합니다.

1. 배경 동기화 (윈도우 포커스 이벤트)

javascript

const { data } = useQuery(["user", userId], () => fetchUser(userId), {
  refetchOnWindowFocus: true, // 기본값이 true입니다.
});

1. 자동 리트라이

javascript

const { data } = useQuery(["user", userId], () => fetchUser(userId), {
  retry: 3, // 최대 3번 리트라이 합니다
  retryDelay: attemptIndex => Math.min1000 * 2 ** attemptIndex, 30000), // 지수 백오프를 사용하여 리트라이 딜레이 계산
});

1. 페이징 및 무한 스크롤 (useInfiniteQuery 훅 사용 예시)

javascript

import { useInQuery } from "react-query";
import { fetchPosts } from "./api";

function InfinitePosts() {
  const {
    data,
    fetchNextPage,
    hasNextPage,
    isLoading,
    isError,
  } = useInfiniteQuery("posts", fetchPosts, {
    getNextPageParam: (lastPage, pages) => lastPage.nextPageToken,
  });

  if (isLoading) return "Loading...";
  if (isError) return "Error loading data";

  return (
    <>
      {data.pages.map(page => (
        <div key={page.id}>{page.title}</div>
      ))}
      {hasNextPage && <button onClick={() => fetchNextPage()}>Load More</button>}
    </>
  );
}

1. 쿼리 무효화 및 리패칭

javascript

import { useQuery, useQueryClient } from "react-query";
import { fetchUser, updateUser } from "./api";

function UserComponent({ userId }) {
  const queryClient = useQueryClient();
  const { data } = useQuery(["user", userId], () => fetchUser(userId));

  const handleUpdate = async () => {
    const updatedUser = await updateUser(userId, newData);
    queryClient.invalidateQueries(["user", userId]); // 업데이트 후 쿼리를 무효화하여 다시 가져옵니다.
  };

  return <button onClick={handleUpdate}>Update user</button>;
}

1. 가비지 수집 (자동 처리)

react-query는 기본적으로 설정에 따라 사용하지 않는 데이터를 자동으로 가비지 수집합니다.

1. 전역 및 개별 쿼리 구성

javascript

import { QueryClient, QueryClientProvider } from "react-query";

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      retry: 2,
      staleTime: 60 * 1000,
    },
  },
});

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

1. 서버 상태 및 백그라운드 모드

javascript

import { useQuery } from "react-query";
import { getPosts } from "./api";

function App() {
  const { data, isLoading, isError } = useQuery("posts", getPosts, {
    suspense: true, // 서버 사이드 렌더링을 사용하거나 리액트의 실험적인 동시 모드를 사용하려면 활성화해야 합니다.
  });

  if (isLoading) return "Loading...";
  if (isError) return "Error loading data";

  return <PostsList posts={data} />;
}

1. 옵티미스틱 및 천이 페이로드 업데이트 (useMutation 훅 사용 예시)

javascript

import { useMutation, useQueryClient } from "react-query";
import { updatePost, getPost } from "./api";

function PostUpdater({ postId, newData }) {
  const queryClient = useQueryClient();
  const mutation = useMutation(updatePost, {
    onMutate: async () => {
      const previousPost = queryClient.getQueryData(["post", postId]);

      queryClient.setQueryData(["post", postId], newData); // 옵티미스틱 업데이트

      return { previousPost };
    },
    onError: (error, variables, context) => {
      queryClient.setQueryData(["post", postId], context.previousPost); // 실패 시 원래 상태로 롤백
    },
    onSettled: () => {
      queryClient.invalidateQueries(["post", postId]); // 완료 후 천이 페이로드 업데이트
    },
  });

  const handleClick = () => {
    mutation.mutate({ id: postId, data: newData });
  };

  return <button onClick={handleClick}>Update Post</button>;
}