[React] useQuery에서 queryKey의 역할은 무엇일까?

개요

오늘 Tanstack Query로 리팩토링하는 타임어택을 하다가 오류를 하나 해결하지 못하고 제출했었다.

동기분에게 도움을 요청했었는데 바로 문제를 찾아주셨다👍🏻

 

문제는 `useQuery`에서 queryKey를 설정하는 곳에서 발생했었다.

queryKey의 역할을 명확하게 이해하고 있지 못하는 것 같아 queryKey에 대해 글을 정리해보려고 한다.

 

 

queryKey는 무엇일까?

queryKey를 기반으로 쿼리 캐싱을 관리함

 

queryKey의 특징

· queryKey는 반드시 배열 안에 있어야 한다.

· query에 대한 추가적인 정보가 필요하면 해당 내용을 string key 뒤에 넣어주면 된다.

⭐️ 같은 queryKey를 가진 요청은 동일한 데이터를 공유한다.

 

 

내가 겪은 문제 상황과 원인

💻 기존의 useTodoDetailQuery.js 코드

import { useQuery } from "@tanstack/react-query";
import { fetchDetail } from "../api/todos";

export const useTodoDetailQuery = (id) => {
  return useQuery({
    queryKey: ["todos"],
    queryFn: () => fetchDetail(id),
  });
};

 

💻 기존의 useTodosQuery.js 코드

import { useQuery } from "@tanstack/react-query";
import { fetchData } from "../api/todos";

export const useTodosQuery = () => {
  return useQuery({
    queryKey: ["todos"],
    queryFn: fetchData,
  });
};

 

TodoList를 보여주는 페이지에 있다가 TodoDetail 페이지로 넘어갈 때는 문제가 없다.

그런데 TodoDetail 페이지에서 TodoList를 보여주는 페이지로 넘어오면 에러가 발생한다.

 

문제의 원인을 살펴본 결과,

TodoDetail 페이지에서 TodoList를 보여주는 페이지로 넘어올 때

TodoList에서 map을 돌릴 때 사용하는 todos가 객체로 콘솔에 찍히는 것을 확인했다.

 

🧐 그렇다면 왜 배열이었던 todos가 객체로 넘어오게 되는 것일까?

 

위에 작성한 useQuery 훅 코드를 살펴보면 알 수 있다.

queryKey: ["todos"]

queryKey를 설정할 때 동일한 key를 공유하는 것을 확인할 수 있다.

동일한 key를 공유하고 있기 때문에 데이터 또한 같은 데이터를 공유하게 된다.

 

✅ TodoDetail 페이지에서 TodoList를 보여주는 페이지로 넘어올 때, 같은 queryKey로 같은 데이터를 공유하고 있기 때문에 todos가 객체가 되는 것이었다. 좀 더 자세하게 말하면, 같은 queryKey를 공유하고 있기 때문에 detail에서 사용한 todo의 데이터가 기존의 todos의 데이터를 덮어쓰게 된다.

 

그렇다면 해당 문제를 어떻게 해결할까?

 

 

해결 방법

해결방법은 굉장히 간단하다.

 

💻 수정된 useTodoDetailQuery.js 코드

import { useQuery } from "@tanstack/react-query";
import { fetchDetail } from "../api/todos";

export const useTodoDetailQuery = (id) => {
  return useQuery({
    queryKey: ["todos", id],
    queryFn: () => fetchDetail(id),
  });
};

✅ queryKey를 설정할 때, 가져오려는 데이터의 테이블 이름과 id를 함께 적어주면 된다.

id값을 포함하여 개별 todo의 상세 데이터를 캐싱하게 된다.

 

그러면 다음과 같이 페이지를 이동해도 에러가 발생하지 않는다!

 

---

[참고자료]

https://tanstack.com/query/latest/docs/framework/react/guides/query-keys

https://velog.io/@rgfdds98/React-Query-queryKeys