Skip to content

fix(client): sync the feed's cached like count after liking a post - #47

Merged
YonatanHen merged 1 commit into
stagingfrom
dev/like-count-cache-fix
Jul 30, 2026
Merged

fix(client): sync the feed's cached like count after liking a post#47
YonatanHen merged 1 commit into
stagingfrom
dev/like-count-cache-fix

Conversation

@YonatanHen

Copy link
Copy Markdown
Owner

The bug

Liking a post, then navigating back to the feed, showed the pre-like count until a hard refresh.

Root cause

useLikePost optimistically updates and later invalidates only queryKeys.posts.detail(slug) — the single-post query. The feed keeps its own, separate cached copy of the same post's likeCount under queryKeys.posts.list(params). That query has a 5-minute staleTime, so navigating back to it via client-side routing served the stale cached array without ever refetching.

Fix

  • Added queryKeys.posts.lists = ['posts', 'list'] — a match target for every cached feed variant, narrower than the existing posts.all. Needed specifically because a detail query caches a single Post object while a list query caches Post[]; patching both with the same array-mapping updater would crash on the detail entry.
  • onMutate now optimistically patches both the detail cache and every cached list (via setQueriesData + a slug match).
  • onSettled now invalidates queryKeys.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 via getQueriesData before setQueriesData mutates anything.

Verification

  • New regression tests: one proves the feed's cached list is bumped optimistically (the exact symptom), one proves it's rolled back correctly on a failed request (alongside the existing detail-rollback test).
  • npm run test457/457 pass, 51 files. npm run typecheck clean.
  • Reproduced live against the running dev stack: signed in, liked a post from its detail page, clicked back to the feed via the nav link (no reload) — count was stale before the fix, correct immediately after.

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.
@YonatanHen
YonatanHen merged commit d3c665d into staging Jul 30, 2026
5 checks passed
@YonatanHen
YonatanHen deleted the dev/like-count-cache-fix branch July 30, 2026 16:09
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant