react query의 query key질문입니다.

Question

Array Keys with variables쿼리에 데이터를 고유하게 설명하기 위해 추가 정보가 필요한 경우 문자열이 있는 배열과 직렬화 가능한 개체를 사용하여 설명할수 있습니다. 다음과 같은 경우에 유용합니다• Hierarchical or nested resources• It's common to passan ID, index, or other primitive to uniquely identify the item• Queries with additional parameters• It's common to passan object of additional options// An individual todo useQuery({ queryKey: ['todo', 5], ... }) // An individual todo in a &#34;preview&#34; format useQuery({ queryKey: ['todo', 5, { preview: true }], ...}) // A list of todos that are &#34;done&#34; useQuery({ queryKey: ['todos', { type: 'done' }], ... })공식문서에 이렇게 나와있던데, 실제 어떤식으로 사용하라는지 잘 감이 안옵니다.더 unique하게 query키를 식별해야하는 상황 예시좀 들어주실 수 있으신가요..?

-ChatGPT- · Answer

React Query의 query key를 사용하여 데이터를 고유하게 식별하는 것은 매우 유용한 기능입니다. query key는 배열로 표현되며, 첫 번째 요소는 데이터의 종류 또는 이름을 나타내고, 두 번째 요소 이후에는 해당 데이터를 고유하게 식별할 수 있는 추가 정보를 나타냅니다.다음은 더 unique하게 query key를 식별해야 하는 상황 예시입니다.동일한 이름의 다른 데이터 타입 요청예를 들어, "users"와 "posts"라는 두 개의 데이터 타입이 있을 때, "users"를 가져오기 위한 쿼리와 "posts"를 가져오기 위한 쿼리의 query key를 구분하기 위해 다음과 같은 방식을 사용할 수 있습니다.// Get a list of users useQuery({ queryKey: ['users'], ... }) // Get a list of posts useQuery({ queryKey: ['posts'], ... })다른 필터링 옵션을 사용하여 데이터 요청예를 들어, "users" 데이터에서 "active" 상태인 사용자들만 가져오는 경우, 다음과 같은 query key를 사용할 수 있습니다.// Get a list of active users useQuery({ queryKey: ['users', { active: true }], ... })계층적인 데이터 요청예를 들어, "users" 데이터와 "users"의 하위 리소스인 "posts" 데이터가 있다고 가정합니다. 이 경우, 다음과 같은 query key를 사용하여 "users"와 "posts"를 구분할 수 있습니다.// Get a list of users useQuery({ queryKey: ['users'], ... }) // Get a list of posts for a specific user useQuery({ queryKey: ['users', userId, 'posts'], ... })여러개의 파라미터를 사용하여 데이터 요청예를 들어, "posts" 데이터에서 "2022"년 1월에 작성된 게시물만 가져오는 경우, 다음과 같은 query key를 사용할 수 있습니다.// Get a list of posts for a specific month useQuery({ queryKey: ['posts', { year: 2022, month: 1 }], ... })이러한 방식으로 query key를 사용하여 데이터를 고유하게 식별할 수 있습니다.-ChatGPT의 답변을 그대로 가져온 것이니 개인적인 의견은 들어가 있지 않습니다.-

RWB · Answer

React Query는 useQuery 사용 시, 지정한 키를 고유값으로 하여 내부적으로 데이터를 관리합니다.이를 통해 동일한 키로 요청이 들어올 경우, 설정에 따라 캐시된 데이터 사용이 가능하다면 요청을 날리지 않고 캐시된 데이터를 바로 제공해주는 등, 데이터를 효율적으로 관리할 수 있습니다.이 키를 관리목적에 따라 세분화하면, 원하는 데이터를 한꺼번에 관리할 수 있습니다.예를 들어, 달력 데이터를 관리한다고 가정해봅시다.// 2023-04 달력 useQuery(['calendar', 2023, 4], todo); // 2022-11 달력 useQuery(['calendar', 2022, 11], todo); // 2023-07 달력 useQuery(['calendar', 2023, 7], todo);해당 데이터를 갱신한다고 가정할 때, 키를 어떻게 할당하냐에 따라 갱신 범위를 다르게 지정해 줄 수 있습니다.const queryClient = useQueryClient(); // calendar 키를 가지는 모든 데이터가 갱신됨 queryClient.invalidateQueries(['calendar']); // 2023년 달력 데이터만 갱신됨 queryClient.invalidateQueries(['calendar', 2023]); // 2023-07 달력 데이터만 갱신됨 queryClient.invalidateQueries(['calendar', 2023, 7]);이를 응용하여 페이지별 구분자를 키로 관리하여, 특정 페이지에 해당하는 데이터 전체를 일괄갱신하는 등, 다양하게 응용할 수 있습니다.

react query의 query key질문입니다.

2개의 답변

Q&A 목록