쿼리 구조화

현재 코드와 React Query의 queryOptions 접근 방식 비교:

1. 현재 코드:

   • 서비스 함수로 API 호출 로직을 분리
   • 각 함수는 특정 API 엔드포인트에 대한 호출 담당
   • 에러 처리가 각 함수 내에서 이루어짐

2. queryOptions 접근 방식:

   • 쿼리 키, 쿼리 함수, 기타 옵션들을 하나의 객체로 묶음
   • React Query의 훅들과 직접적으로 사용하기 쉬움
   • TypeScript와 함께 사용할 때 타입 안전성이 더 강화됨

queryOptions를 사용한 코드 예시:

import { queryOptions } from '@tanstack/react-query'
import { api } from "../util/api";

export const eventQueries = {
  all: () => queryOptions({
    queryKey: ['events'],
    queryFn: async () => {
      const response = await api.get<EventsResponse>("/events");
      return response.events;
    },
  }),

  detail: (id: string) => queryOptions({
    queryKey: ['events', id],
    queryFn: async () => {
      const response = await api.get<EventResponse>(`/events/${id}`);
      return response.event;
    },
  }),

  // 다른 쿼리들도 비슷한 방식으로 정의할 수 있습니다.
}

export const eventMutations = {
  add: () => ({
    mutationFn: (event: addEventRequest) => 
      api.post<addEventResponse, addEventRequest>("/events", { body: event }),
  }),

  update: (id: string) => ({
    mutationFn: (event: addEventRequest) => 
      api.patch<addEventResponse, addEventRequest>(`/events/${id}`, { body: event }),
  }),

  delete: () => ({
    mutationFn: (id: string) => 
      api.delete<eventDeleteResponse, eventDeleteRequest>(`/events/${id}`),
  }),
}

이점:

1. 쿼리와 뮤테이션 로직이 중앙화되어 관리가 쉬워짐
2. React Query 훅들과 함께 사용하기 쉬워짐 (예: useQuery(eventQueries.all()))
3. TypeScript와 함께 사용할 때 타입 안전성이 향상됨
4. 쿼리 키와 함수가 함께 정의되어 있어 일관성을 유지하기 쉬움

결론:
현재 코드도 충분히 잘 구조화되어 있으며, 프로젝트의 요구사항과 팀의 선호도에 따라 현재 방식을 유지해도 무방함. queryOptions 방식으로의 전환은 타입 안전성과 React Query와의 통합을 더 강화하고자 할 때 고려할 수 있음.