[Feat] 모각코 리스트 페이지 API 연동 및 리액트 쿼리 사용

[ttaerrim]

설명

• closed [FEATURE] 모각코 리스트 페이지 구현 #121

• React Query의 쿼리 키를 다룰 때 편리한 @lukemorales/query-key-factory를 사용했습니다.

  사용하지 않는다면 다음과 같이 상수로 키를 관리할 수 있습니다. ^[1]

  const mogacoKeys = {
    all: ['mogaco'] as const,
    lists: () => [...mogacoKeys.all, 'list'] as const,
    list: (filters: string) => [...mogacoKeys.lists(), { filters }] as const,
    details: () => [...mogacoKeys.all, 'detail'] as const,
    detail: (id: number) => [...mogacoKeys.details(), id] as const,
  }

  query-key-factory 라이브러리는 유사한 형식으로 키를 생성해 주고, 이를 queryFn과도 연결하여 사용할 수 있어 편리합니다.

  import { createQueryKeys } from '@lukemorales/query-key-factory';
  
  import { mogaco } from '@/services';
  
  export const mogacoKeys = createQueryKeys('mogaco', {
    list: (filters?: { filters: { page: number } }) => ({
      queryKey: [{ filters }],
      queryFn: () => mogaco.list(),
    }),
    detail: (id: string) => [id],
  });

  사용하는 부분에서는 다음과 같이 간단하게 사용하면 됩니다.

  const { data: mogacoList } = useQuery(queryKeys.mogaco.list());

• msw 사용 시 axios에서 설정한 baseURL을 사용하지 않기 위해 개발 환경에서는 지정하지 않도록 코드를 수정했습니다.

  baseURL: import.meta.env.DEV ? '' : import.meta.env.VITE_API_URL,
  

완료한 기능 명세

• 모각코 리스트 페이지 API 연결

스크린샷

기능 작업에 대한 스크린샷/화면 녹화 있을 경우 첨부하기

리뷰 요청 사항

특별히 리뷰해 주었으면 하는 부분, 고민되는 부분 기재하기

참고

1. React Query Key 관리 | 지나가던 개발(zigae)

[ttaerrim]

길긴 하네요..~

[js43o]

혹시 이 부분(filters, page)도 리액트 쿼리 문법인가요..?
아니면 그냥 모각코 게시글 리스트를 필터링해서 가져오기 위한 매개변수일까요?

[ttaerrim]

쿼리 키 팩토리를 사용하면 list: () => {}로 사용을 못하고 무조건 매개변수를 전달해 주도록 해야 하더라고요?
그리고 아마 저희가 페이지네이션 사용하게 되면 /mogaco?offset=1&limit=10 처럼 쿼리 스트링을 전달해 주게 될 거예요. 그런 offset, limit 같은 것이 filters에 담기는 객체 정보가 될 거고, 그걸 쿼리 키로 함께 사용하게 될 거예요!

[js43o]

아하 팩토리 문법이군요 감사합니다! 공부해보겠습니다.

[ttaerrim]

넵 저도 처음 써 봐서요!! 혹시 매개변수 없이 작성할 수 있는 방법 아시게 된다면 공유 부탁드립니다!!

[js43o]

이 부분 보고 바로 반영해서 사용하고 있습니다..!😊

[ttaerrim]

굿굿~~~

[LEEJW1953]

pr과 코드 읽어보면서 react query 사용법을 배워보겠습니다 🙌