반응 쿼리에서 돌연변이 후 재검증: 단계별 가이드

Question

next.js 애플리케이션에서 반응 쿼리를 사용하여 데이터를 가져오고 업데이트하는 기본 구현이 있습니다. 내 목표는 돌연변이 후 데이터를 업데이트하는 것입니다. 현재 데이터는 탭을 새로 고칠 때만 업데이트됩니다. 그러나 사용자 상호 작용 없이는 변경되지 않습니다. 탭을 새로 고칠 때 발생하는 데이터 업데이트는 refetchOnWindowFocus 기본 동작으로 인해 발생하는 것으로 나타났습니다. 하지만 서버 측에서 데이터가 업데이트된 후 어떻게 유효하지 않게 됩니까? 다음은 관련 코드 조각입니다. 참고: 저는 React-querySSR 기능을 사용하기 위해 Hydration을 사용하고 있습니다. 문서_

P粉677684876 · Answer

변이를 구현하는 방식에서는 성공적인 변이 후 쿼리를 다시 가져와야 합니다.

으아악

이 방법이 작동하지 않으면 돌연변이가 실패한 것입니다. onSuccess 콜백이 호출되는지 확인하세요.

onSuccess 回调，但未重新提取您的查询，则可能意味着 queryKey 콜백이 호출되었지만 쿼리가 다시 가져오지 않은 경우 이는

불일치를 의미할 수 있습니다. 테스트 목적으로 필터를 다음으로 확장해 보세요.

으아악 모든 쿼리를 다시 가져와야 합니다. 작동한다면 queryKey 필터가 일치하지 않는 것입니다.

자세히 살펴보세요. 실패하고 있습니다.

으아악

그러나 사용자 정의 후크에서는 다음을 사용하고 있습니다.

으아악

그래서 실제로는 다르기 때문에 일치하지 않는 것 같습니다. 또한 캐시의 쿼리와 키를 더 잘 이해하려면 @tanstack/react-query-devtools를 사용하세요.

P粉231079976 · Answer

문제는 구성 요소에서 Article.jsx 매 렌더링마다 새 QueryClient를 생성하므로 새 캐시를 가져오고 따라서 업데이트되지 않는다는 것입니다.
대신 현재 인스턴스를 반환하는 useQueryClient 후크를 사용해야 합니다.
const queryClient = useQueryClient();