-
카테고리
-
세부 분야
프론트엔드
-
해결 여부
미해결
react-query key 관련해서 궁금한게 있습니다.
24.06.29 17:23 작성 조회수 58
0
// 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 동일하게 작성해야 할까요?
답변을 작성해보세요.
1
조현영
지식공유자2024.06.29
요즘 AI 인턴 답변이 엄청나네요.
https://github.com/TanStack/query/discussions/932
이런식으로 각각의 설정마다 처음 설정된 useQuery 설정이 적용되는지 마지막 useQuery 설정이 적용되는지가 다릅니다. 일관성이 없어보이긴 하네요. cacheTime은 첫 useQuery 설정 따라간다고 하네요.
getQueryData는 확실히 있다는 게 보장된 상황에서 쓰셔야하고, 없다면 값이 있는지 검사를 하셔야 합니다.
0
인프런 AI 인턴
2024.06.29
안녕하세요, 인프런 AI 인턴입니다.
Joel님의 질문은 React Query에서 동일한 queryKey
를 다루는 두 컴포넌트 간의 상호 작용 및 staleTime
의 역할과 getQueryData
의 사용법에 대한 것으로 보입니다. 대답하기 앞서, 질문의 요지를 명확히 파악하는 것이 중요합니다.
StaleTime 덮어쓰기에 대한 질문:
- React Query에서
staleTime
은 특정 쿼리 데이터가 “싱싱한” 상태로 유지되는 기간을 정의합니다. 여기서 중요한 점은,queryKey
로 식별되는 쿼리 데이터는 단일staleTime
값을 갖는 단일 엔티티로 관리된다는 것입니다.queryKey
가 동일하면, 해당 쿼리의 캐시 및 설정이 공유됩니다. 따라서, 최근 설정된staleTime
이 이전 값에 대해서 우선적으로 적용될 수 있습니다. 그러나 이 질문에 대한 대답은 경우에 따라 달라질 수 있으멀로, 아래 문서를 참고하실 것을 추천드립니다.
- React Query에서
getQueryData
사용법에 대한 질문:getQueryData
는queryKey
를 통해 React Query 캐시에서 데이터를 동기적으로 조회하는 메소드입니다. 이 메소드는 데이터가 캐시되어 있을 경우 해당 데이터를 바로 반환하며, 캐시되어 있지 않은 경우undefined
를 반환합니다. 따라서, B 컴포넌트에서getQueryData
를 사용하여 데이터를 조회하기 전에 데이터가 캐시에 존재하는지 확인이 필요합니다. 만약 데이터가 캐시에 없다면, 쿼리를 실행하여 데이터를 캐시하는 접근 방법을 고려해야 합니다.
질문의 세부 사항에 대한 답변을 찾는 가장 좋은 방법 중 하나는 공식 문서나 해당 주제에 대한 심층 토론을 참조하는 것입니다. 여기서는 Joel님의 질문에서 직접적으로 해결할 수 있는 특정 답변을 찾기 어렵기 때문에, 관련된 학습 자료나 공식 문서를 검포하는 것이 좋습니다.
React Query의 공식 문서(React Query Documentation), 특히 쿼리의 options
섹션과 staleTime
, cache
관리 방법에 대해 자세히 설명하는 부분을 확인해 보시길 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
답변 2