fix(client): sync the feed's cached like count after liking a post - #47
Merged
Conversation
Liking a post, then navigating back to the feed, showed the pre-like count until a hard refresh. useLikePost's optimistic update and invalidation only ever touched the post-detail query (queryKeys.posts.detail(slug)); the feed keeps its own separate cached copy of the same post under queryKeys.posts.list(params), and with a 5-minute staleTime, navigating back never triggered a refetch to pick up the real number. Adds queryKeys.posts.lists as a match target for every cached feed variant, alongside the existing queryKeys.posts.all — narrower than `all` so it can be used to patch list-shaped cache entries (Post[]) without also touching detail entries (a single Post), which would break if fed the same array-mapping updater. onMutate now patches both the detail cache and every cached list via setQueriesData, using getQueriesData first to snapshot the true prior state for rollback — setQueriesData's own return value is the data AFTER the updater runs, not before, so it cannot double as that snapshot. onSettled invalidates queryKeys.posts.all instead of just the one detail key, so every filtered feed variant refreshes too. Verified live: liked a post, navigated back via the nav link (no reload), and the feed showed the updated count immediately.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
The bug
Liking a post, then navigating back to the feed, showed the pre-like count until a hard refresh.
Root cause
useLikePostoptimistically updates and later invalidates onlyqueryKeys.posts.detail(slug)— the single-post query. The feed keeps its own, separate cached copy of the same post'slikeCountunderqueryKeys.posts.list(params). That query has a 5-minutestaleTime, so navigating back to it via client-side routing served the stale cached array without ever refetching.Fix
queryKeys.posts.lists = ['posts', 'list']— a match target for every cached feed variant, narrower than the existingposts.all. Needed specifically because a detail query caches a singlePostobject while a list query cachesPost[]; patching both with the same array-mapping updater would crash on the detail entry.onMutatenow optimistically patches both the detail cache and every cached list (viasetQueriesData+ aslugmatch).onSettlednow invalidatesqueryKeys.posts.all(every posts query) instead of just the one detail key.One implementation detail worth flagging in review:
setQueriesData's return value is the data after the updater runs, not the prior value, so it can't double as the rollback snapshot. The rollback snapshot is taken separately viagetQueriesDatabeforesetQueriesDatamutates anything.Verification
npm run test— 457/457 pass, 51 files.npm run typecheckclean.