React Query에서 중복 API 로직을 커스텀 훅으로 추출하는 방법에 대해 어떻게 생각하시나요?

[qkrwoghd04]

안녕하세요, 저는 React Query를 처음 사용해보는 입장입니다. 현재 프로젝트에서 ContentSection 컴포넌트 내에서 전체 콘텐츠와 북마크 데이터를 각각 useQuery로 가져오고 있는데요, 두 쿼리 모두 email과 token 체크 및 API 응답 검증 같은 유사한 로직이 포함되어 있습니다.

제가 생각한 방법은 이 중복 로직을 커스텀 훅으로 추출하여 관리하는 것입니다. 아래와 같이 코드를 작성 해봤습니다

// hooks/useContents.js
import { useQuery } from '@tanstack/react-query';
import { fetchAllContents } from '../../apis/userContentApi';

export const useContents = (email, token) => {
  return useQuery({
    queryKey: ['contents', email],
    queryFn: async () => {
      const result = await fetchAllContents({ email, token });
      if (result.stateCode !== 200) {
        throw new Error(result.message);
      }
      return result.data;
    },
    enabled: !!(email && token),
    staleTime: 2000,
  });
};

// hooks/useBookmarks.js
import { useQuery } from '@tanstack/react-query';
import { fetchAllBookmarkContents } from '../../apis/userBookmarkApi';

export const useBookmarks = (email, token) => {
  return useQuery({
    queryKey: ['bookmarks', email],
    queryFn: async () => {
      const result = await fetchAllBookmarkContents({ email, token });
      if (result.stateCode !== 200) {
        throw new Error(result.message);
      }
      return result.data;
    },
    enabled: !!(email && token),
    staleTime: 2000,
  });
};

import { useContents } from '../../hooks/useContents';
import { useBookmarks } from '../../hooks/useBookmarks';

const ContentSection = () => {
  const { email, token } = useQueryParams();
  const [activeTab, setActiveTab] = useState(['all', 'bookmark']);

  const { data: contents, isLoading: isContentsLoading, error: contentsError } = useContents(email, token);
  const { data: bookmarks, isLoading: isBookmarksLoading, error: bookmarksError, refetch: refetchBookmarks } = useBookmarks(email, token);
  
  ...

위와 같은 코드로 상태를 관리하려하는데, 알맞게 사용하고 있는 건지 잘 모르겠어서 시니어 개발자 분들께 여쭤봅니다!!

[bamsurla]

안녕하세요!! 제시해주신 코드만 봤을 때는, 함수로 따로 추출해주신 것이 유지보수에 도움이 될 거라고 생각됐어요!!

대신, 해당 함수들이 변경없이 많은 곳에서 재활용되는 경우면 그 usecase가 더 많아질 수 있겠네요

[joseph0926]

저도 따로 훅으로 빼는걸 선호하는데 이러면 발생할수있는 문제가 같은 훅을 사용하더라도 상황에따라 다른 쿼리옵션을 주어야할때 어려워지더라구요,,
예를들어 같은 로그 api를 땡겨도 메인에 있는 로그는 리패치인터벌이 0이지만 로그 페이지의 로그는 5초 인터벌도 줘야하고 staleTime도 설정해야하고,, 이런경우

물론 위 예시는 매우 간단해서 인자로 뚫어주어도 되지만 복잡해지면 한계가있어서,,
그래서 아예 쿼리키를 분리할때 쿼리 옵션까지 분리해주는것도 하나의 방법이 될수있을거같습니다

// query 문서 참고
const postQueries = {
  all: () => ({ queryKey: ['todos'] }),
  allLists: () => ({
    queryKey: [...postQueries.all().queryKey, 'list']
  }),
  list: (sort) => ({
    queryKey: [...postQueries.allLists().queryKey, sort],
    queryFn: () => fetchTodos(sort),
    staleTime: 5 * 1000,
  }),
  allDetails: () => ({
    queryKey: [...postQueries.all().queryKey, 'detail']
  }),
  detail: (id) => ({
    queryKey: [...postQueries.allDetails().queryKey, id],
    queryFn: () => fetchTodo(id),
    staleTime: 5 * 1000,
  }),
}

이러면 훅으로 분리해도 유연성도 가져갈수있을거같습니다

물론 위처럼 하면 또 해당 쿼리키 관리가 복잡해진다는 문제가 생길수도있긴하네요,,

[miridih-jhkim06]

일단 저는 제공해주신 내용에서 중복된 로직을 분리하는게 복잡성을 초래한다고 생각하지는 않아요.
다만 중복된 로직을 분리하는 방법에 대해 의견을 추가로 드리고싶어요.

제공해주신 코드에서 봤을때 공통으로 사용되는것들이 두가지가 있는 것 같아요.

• email, token값에 대한 검증처리
• result.stateCode !== 200 에 대한 에러처리

첫 번째로 email, token값에 대한 검증처리 에 대한 분리에요.
이는 해당 쿼리들이 email, token 값이 필수로 있어야 하는 조건이 있는것 같아요. 다만 쿼리로 제공하는 커스텀 훅 내부에서 처리하기보다 해당 값이 있는지 검증하는 형태의 HOC컴포넌트가 컴포넌트를 렌더링할지 말지, 즉 커스텀훅 자체가 실행될지 말지를 결정하도록 분리할 수 있다고 생각해요. (여기서는 token과 email이 없을때의 EmptyContent나 Error에대한 fallback UI를 렌더링한다고 가정하고 생각했어요)

두 번째로 result.stateCode !== 200에 대한 에러처리에요.
stateCode가 200이 아닐때에 대한 에러처리가 공통이라면 interceptor 같은것을 통해 공통으로 처리해줄 수도 있을것 같아요. 완전한 공통로직이 아니라면 custom하게 interceptor를 해당되는 API마다 넣어줄 수 있게 해줄수도 있을것 같아요

이렇게한다면 작성해주신 쿼리에서 실제로 react-query와 연관된 역할로써만 사용이되고, 값을 검증하거나 에러를 처리하는 로직이 다른 계층에서 처리되기때문에 각각의 함수가 자신의 역할만 할 수 있도록 분리가 되지않을까 싶습니다.

[metacode22]

저도 처음에 작성자님이 해주신 것처럼 query의 option들을 뒤로 숨기기 위해 커스텀 훅으로 추출했었습니다. 컴포넌트 단에서는 복잡해보일 수 있는 option들이 안 보이기 때문에 인지 부하를 낮출 수 있는 방법이라고 생각해요!

최근에는 tkdodo 블로그에서 The Query Options API라는 아티클을 본 뒤로는 queryOptions 함수를 적극 사용하고 있습니다.😀

queryOptions

다음과 같이 query들을 정의한 다음,

import { queryOptions } from '@tanstack/react-query';

export const todosQuery = queryOptions({
  queryKey: ['todos'],
  queryFn: getTodos,
});

export const todoDetailQuery = ({ todoId }: { todoId: string }) =>
  queryOptions({
    queryKey: ['todos', todoId],
    queryFn: () => getTodoDetail(todoId),
    enabled: Boolean(todoId),
  });

정의한 query들을 바탕으로 다음과 같이 사용하고 있어요.

export function Component() {
  const { data: todos } = useQuery(todosQuery);
  const { data: todoDetail } = useQuery(todoDetailQuery({ todoId: '1' }));

  ...
}

장점

앞서 정의한 todosQuery를 커스텀 훅으로 정의를 했다면 서버 사이드에서는 이를 재활용할 수 없어요. 하지만 queryOptions로 정의했다면 가능해집니다.

export const getServerSideProps = async () => {
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(todosQuery);

  ...
};

그리고 useQuery(todosQuery), useSuspenseQuery(todosQuery), useSuspenseQueries({ queries: [todosQuery, ...] })와 같이 다양하게 사용할 수 있어서 좋더라구요.

[jingeon27]

순수 api call이 아닌 dom을 위해 변형한 로직인거라 다른 useQuery와 다른 구분을 해줬으면 좋을 것 같습니다. (ex: bff