React Query: 키 구성 방법

React Query를 사용하고 있다면 useQuery 후크가 어떻게 작동하는지 확실히 알 것입니다. React Query documentation에서 찾은 것과 유사한 몇 가지 예입니다.

// a simple string.only key
useQuery('todos', ...)

// an array key
useQuery(['todo', id], ...)

// other, more complex keys
useQuery(['todo', id, 'comments', commentId], ...)
useQuery(['todo', {id, type: 'comments', commentId}], ...)

이러한 키는 특정 쿼리를 식별하는 데 사용되며 반응 쿼리의 캐싱 메커니즘과 함께 가장 중요합니다. 리액트 쿼리가 다양한 컴포넌트에서 여러 번 호출되더라도 동일한 쿼리를 한 번만 가져오도록 하고, 다시 가져오거나 캐시를 무효화할 때 사용할 캐시를 식별합니다.

더 큰 응용 프로그램에서는 동일한 쿼리를 사용하는 모든 구성 요소 또는 후크에서 키가 동일한지 또는 캐시를 무효화하려는 경우(예: 변형 후) 더 중요한지 확인해야 합니다.

반응 쿼리 문서는 이 문제에 대한 해결책을 제공하지 않습니다. 이것에 대한 나의 해결책은 매우 간단합니다. 각 쿼리에 대해 key 및 query 함수로 객체를 생성합니다.

const todoQuery = {
  key: (id: string): ['todo', string] => ['todo', id],
  query: (id: string): Promise<...> => {... fetch the todos ...},
}
export default todoQuery

useQuery를 사용하면 다음과 같습니다.

const { data, isLoading } => useQuery(todoQuery.key(id), () => todoQuery.query(id))

키가 항상 동일하도록 하는 간단하지만 효과적인 방법이라고 생각합니다. 어떤 이유로 키를 변경해야 하는 경우에도 키가 사용된 모든 위치에 대해 항상 키를 변경합니다.


사진 제공: Joshua Aragon on Unsplash