블로그 포스트 목록 key의 invalidate가 제대로 동작하지 않는 문제 해결

블로그 포스트를 생성, 수정, 삭제 후 queryClient.invalidateQueries({ queryKey: queryKeys.posts.list(authorName) })을 통해 블로그 포스트 목록 key를 stale로 mark하고, background refetch를 유도했다.

하지만 가끔 background refetch 된 결과를 화면에 반영하지 못하는 문제가 발생했다. (예를 들면 삭제된 블로그 포스트가 블로그 포스트 목록에 계속 존재하는 문제 등)

블로그 포스트 생성, 수정, 삭제 후 invalidateQueries 대신 resetQueries를 사용해 query 자체를 reset 하는 방법으로 해결했다.

query가 초기화되어 데이터를 다시 처음부터 가져와 최신의 서버 상태를 반영할 수 있게 되었다.

cacheTime을 0으로 설정하는 방법도 있지만, 이는 cache를 아예 사용하지 않는 방법이다. 즉 매번 데이터를 처음부터 가져오게 된다.

mutation(생성, 수정, 삭제) 직후만 query를 reset하고 그 외의 경우는 cache를 유지하고 싶었기 때문에, cacheTime을 0으로 설정하는 방법 대신, mutation 직후 resetQueries를 호출하는 방법을 사용했다.