프로젝트에 리액트 쿼리 데브툴스 도입을 희망합니다.

[doggopawer]

발단

• 리액트 쿼리 작업중 쿼리스트링에 따른 리액트 쿼리 식별자의 증가로 인해 다소 상태관리가 복잡해진것 같습니다.
  예를 들면 아래 코드와 같이 useItemsQuery는 queryKey에 들어가는 식별자가 5개 이상으로
  어떤 식별자가 바뀌었는지 console.log()로는 쉽게 파악하기 힘듭니다.

export const useItemsQuery = ({
  category,
  priceRange,
  name,
  status,
  size,
}: UseItemsQuery) => {
  return useInfiniteQuery({
    queryKey: ['items', category, priceRange, name, status, size],
    queryFn: async ({ pageParam }) =>
      await getItems({
        category,
        priceRange,
        name,
        status,
        size,
        cursorId: pageParam,
      }),
    initialPageParam: 0,
    getNextPageParam: (lastPage, allPages, lastPageParam) => {
      if (lastPage.length === 0) {
        return undefined
      }
      return lastPageParam + 1
    },
  })
}

더 개발 시간을 단축시키기 위한 일환으로 리액트 데브 툴스 도입을 희망합니다.
현재 NABI-64(필터 폼 UI+로직 구현)에서 의존성 설치한 상태이고
한번 보시고, 반대 의견 있지 않으시면 추후에 적용하여 PR 올리겠습니다.

사용 예

[oaoong]

좋습니다!!