[React Query] 쿼리키를 객체로 관리하는 방법을 공유합니다 🙌

[NamJwong]

이미 알고 계실수도 있겠지만, 휴먼 에러 방지를 위해 쿼리 키를 하드코딩으로 관리하는 것보다 객체로 관리하는 것을 권장한다고 합니다.

투두리스트 앱을 예로 들자면, 현재 우리는 아래와 같은 방식으로 쿼리 키를 만들고 있습니다.

['todoList']
['todo', todoID]
['todoDetail', todoID]

이러한 방식은 키의 중복이나 오타 등의 휴먼 에러 위험이 있습니다.

이는 아래와 같이 객체로 키를 관리하여 방지할 수 있습니다.

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

// 🕺 모든 todos 삭제
queryClient.removeQueries(todoKeys.all)

// 🚀 모든 리스트 invalidate
queryClient.invalidateQueries(todoKeys.lists())

// 🙌 prefetch 하나의 todo
queryClient.prefetchQueries(todoKeys.detail(id), () => fetchTodo(id))

저희도 추후에 이러한 방식으로 리팩토링 해봐도 좋을 것 같아서 공유합니다 👍

참고 자료

https://www.zigae.com/react-query-key/

+ 추가
나중에 쿼리 키 리팩토링을 한다면 이 글에서 소개하는 방법도 참고하면 좋을 것 같습니다.
https://tech.kakao.com/2022/06/13/react-query/