react-query key 관련해서 궁금한게 있습니다.

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

서로 다른 컴포넌트간 query 일치하게 하기

작성

249

// 1번 - A 컴포넌트
useQuery({
  queryKey: ['user'],
  queryFn: () => getUser(user),
  staleTime: 6000
})

// 2번 - B 컴포넌트
useQuery({
  queryKey: ['user'],
  queryFn: () => getUser(user),
})

StaleTime 덮어 써지는지 질문

1번이 A 컴포넌트에서 실행되고, 1분이 지나기전에 B 컴포넌트에 선언한 2번이 실행 될 경우
- 1번에 선언한 키값이 같기 때문에 1분이 지나지 않았다면 실제 fetching 없이 캐싱된 데이터를 가져온다
- 키가 같더라도 useQuery로 선언했기 때문에 fetch되고 1번에 선언한 staleTime은 2번으로 덮어써져서 추후 무시된다
1번이 A 컴포넌트에서 실행되고, 1분이 지난 후 B 컴포넌트에 선언한 2번이 실행 될 경우
- 1분이 지났기 때문에 다시 2번에서 fetching이 일어나고 1번에 선언한 staleTime은 유지된다
- 1분이 지났기 때문에 다시 fetching이 일어나고 2번으로 덮어써져서 추후 staleTime은 2번에 정의된 대로 없어진다(기본값 0으로 세팅된다)

getQueryData 정확하게 사용 하는 방법

// 1번 - A 컴포넌트
useQuery({
  queryKey: ['user'],
  queryFn: () => getUser(user),
  staleTime: 6000
})

// 2번 - B 컴포넌트
const data = queryClient.getQueryData(['user'])

위 처럼 선언했을 경우 A 컴포넌트 -> B 컴포넌트가 순차 실행되면 getQueryData를 잘 가져 오겠지만 만약 B 컴포넌트가 먼저 실행될 경우 어떻게 해야 할까요?

있는지 검사하고 없으면 1번처럼 다시 선언해야 할까요?
순차 보장이 안된다면 B컴포넌트도 동일하게 useQuery로 staleTime 동일하게 작성해야 할까요?

react-query

답변 2

제로초(조현영)

지식공유자

요즘 AI 인턴 답변이 엄청나네요.

https://github.com/TanStack/query/discussions/932

이런식으로 각각의 설정마다 처음 설정된 useQuery 설정이 적용되는지 마지막 useQuery 설정이 적용되는지가 다릅니다. 일관성이 없어보이긴 하네요. cacheTime은 첫 useQuery 설정 따라간다고 하네요.

getQueryData는 확실히 있다는 게 보장된 상황에서 쓰셔야하고, 없다면 값이 있는지 검사를 하셔야 합니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다.

Joel님의 질문은 React Query에서 동일한 queryKey를 다루는 두 컴포넌트 간의 상호 작용 및 staleTime의 역할과 getQueryData의 사용법에 대한 것으로 보입니다. 대답하기 앞서, 질문의 요지를 명확히 파악하는 것이 중요합니다.

StaleTime 덮어쓰기에 대한 질문:
- React Query에서 staleTime은 특정 쿼리 데이터가 “싱싱한” 상태로 유지되는 기간을 정의합니다. 여기서 중요한 점은, queryKey로 식별되는 쿼리 데이터는 단일 staleTime 값을 갖는 단일 엔티티로 관리된다는 것입니다. queryKey가 동일하면, 해당 쿼리의 캐시 및 설정이 공유됩니다. 따라서, 최근 설정된 staleTime이 이전 값에 대해서 우선적으로 적용될 수 있습니다. 그러나 이 질문에 대한 대답은 경우에 따라 달라질 수 있으멀로, 아래 문서를 참고하실 것을 추천드립니다.
getQueryData 사용법에 대한 질문:
- getQueryData는 queryKey를 통해 React Query 캐시에서 데이터를 동기적으로 조회하는 메소드입니다. 이 메소드는 데이터가 캐시되어 있을 경우 해당 데이터를 바로 반환하며, 캐시되어 있지 않은 경우 undefined를 반환합니다. 따라서, B 컴포넌트에서 getQueryData를 사용하여 데이터를 조회하기 전에 데이터가 캐시에 존재하는지 확인이 필요합니다. 만약 데이터가 캐시에 없다면, 쿼리를 실행하여 데이터를 캐시하는 접근 방법을 고려해야 합니다.

질문의 세부 사항에 대한 답변을 찾는 가장 좋은 방법 중 하나는 공식 문서나 해당 주제에 대한 심층 토론을 참조하는 것입니다. 여기서는 Joel님의 질문에서 직접적으로 해결할 수 있는 특정 답변을 찾기 어렵기 때문에, 관련된 학습 자료나 공식 문서를 검포하는 것이 좋습니다.

React Query의 공식 문서(React Query Documentation), 특히 쿼리의 options 섹션과 staleTime, cache 관리 방법에 대해 자세히 설명하는 부분을 확인해 보시길 바랍니다.

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

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