react-query enabled 옵션

Next + React Query로 SNS 서비스 만들기

재게시, 답글 기능 zustand로 만들어보기

작성

118

react-query 사용 시

enabled 옵션이 true인 경우

queryFn을 실행하지는 않지만

queryKey는 생성되는데 queryKey가 안 생기게 하자니 Hook을 조건부로 작성할 수 없어서 이런 방법은 불가능하고 queryFn은 실행하지 않으니 괜찮다는 생각도 드는데

예를 들면 ["post", id]가 있고 id가 null인 경우

queryKey는 ["post", null]로 무조건 생성이 되더군요. Observe도 많은 곳에서 쓸 수록 2 or 3 이런 식으로 증가하고요. 이게 성능에 문제가 없을지 아니면 queryKey 생성까지 막을 수 있는 방법이 있는지 궁금합니다.

react next.js react-query

답변 2

제로초(조현영)

지식공유자

id가 null인 경우 enabled를 false로 하시면 되지 않나요?

yskim

질문자

useQuery({
    queryKey: ["wish", id],
    queryFn: () => getWish(userId!),
    enabled: !!id,
    staleTime: 1000 * 60 * 10,
  });

이런 식으로 했을 때 id가 없을 경우 queryFn은 실행되지 않지만
query devtools에서는 ["wish", null]로 생겨서 문의드렸습니다. 해당 키에 disabled 표시와 data: null인 것을 확인 했지만 키가 캐싱(?)되긴 하는 것 같아서요

제로초(조현영)

지식공유자

저도 처음 안 사실이네요. 성능에 전혀 문제는 없습니다. 없애는 방법은 모르겠습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.
ysk님께서 질문하신 사항은 React Query의 enabled 옵션과 queryKey 생성 관련된 내용이네요. 우선, React Query의 enabled 옵션 사용과 queryKey 생성 과정에 대한 간단한 설명을 제공드립니다.

`enabled` 옵션

enabled: false로 설정하면 queryFn은 자동으로 실행되지 않아서 데이터 페칭을 막을 수 있습니다. 그러나 하나의 특성상, queryKey는 여전히 생성됩니다. 이는 React Query의 내부 설계에 따른 동작으로, queryFn과 관계없이 queryKey는 캐싱 시스템의 식별용으로 생성됩니다.

queryKey 생성 문제 및 성능

queryKey 자체는 서버로의 요청과 직접적인 연관이 없기에, 단순히 생성되는 것만으로 성능에 큰 문제를 주지는 않습니다. 다만, queryKey의 구성 요소로 null이 포함되는 경우, 예상치 않은 데이터를 참조할 가능성 등을 염두에 두어야 합니다.

성능 최적화 팁

의미 있는 조건부 사용: 미리 검사 후 조건에 따라 useQuery를 사용하는 방식을 채택하세요. 예를 들어, id가 존재할 때만 useQuery를 사용하는 방법입니다.
queryFn의 효율적 구성: queryFn 내부를 최대한 경량화하고, 불필요한 작업을 최소화하여 만일의 경우에도 효율성을 지킬 수 있도록 합니다.
유연한 queryKey 설계: 가능한 경우 null 같은 비의미적 게시 요소를 queryKey에 포함하지 않도록 관리합니다.

유사한 질문 및 답변을 찾기 위한 참고:

React Query의 enabled 속성에서 유사한 논의를 확인할 수 있습니다.
또 다른 참고 자료로는, useQuery 사용 시 조건부 처리에 대한 블로그 포스트가 있습니다. 이 포스트는 React Query의 핵심 개념을 깊이 있게 다루고 있습니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

인프런 커뮤니티 질문&답변