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

Question

저는 next.js 애플리케이션에서 react-query를 사용하여 데이터 가져오기 및 업데이트의 기본 구현을 구현했습니다. 내 목표는 돌연변이 후 데이터를 업데이트하는 것입니다. 현재 데이터는 탭을 새로 고칠 때만 업데이트됩니다. 그러나 사용자 상호 작용 없이는 변경되지 않습니다.

탭 새로 고침 시 발생하는 데이터 업데이트가 refetchOnWindowFocus 기본 동작으로 인한 것임을 발견했습니다.

하지만 서버 측에서 데이터가 업데이트된 후 어떻게 유효하지 않게 됩니까? 다음은 관련 코드 조각입니다.

Note: 저는 react-query SSR 기능을 사용하기 위해 Hydration을 사용하고 있습니다. 문서

_app.jsx

으아아아

Home.jsx

으아아아

article.jsx

으아아아

어떤 도움이라도 대단히 감사하겠습니다

Updates: refetchInterval：2000 2초마다 업데이트되지만 이는 2초마다 네트워크 요청을 트리거하므로 이것이 재검증에 대한 모범 사례인지 잘 모르겠습니다.

Update: onSuccess方法内的控制台在突变时显示，这意味着逻辑有问题，因为即使密钥不同，这也应该有效：queryClient.invalidateQueries() 키를 지정하지 않고 모든 쿼리를 실행합니다. 하지만 그래도 업데이트되지 않습니다. 왜?

Answer 1

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

으아악

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

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

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

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

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

으아악

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

으아악

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

Answer 2

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