Broken snippet
onSuccess(post) {
dispatch(feedActions.push(post)); // second copy
queryClient.invalidateQueries({ queryKey: ["feed"] });
}Back to week 4
Topic
Challenge: Query or RTK?
Definition
TanStack Query manages server-owned asynchronous data, whereas Redux Toolkit manages shared client-owned state that has no server cache as its source of truth.
In simpler words
Feed posts come from Nest through Query; a half-written post belongs in the RTK draft slice.
The wrong split creates duplicated post arrays and manual synchronization bugs.
After this you can
- Classify server versus client state
- Invalidate instead of manually mirroring server arrays
Choose one source of truth
Definition
A server-state cache must remain authoritative for remote entities, while client state should represent only local UI information.
In simpler words
Do not keep the same feed collection in both Query and Redux.
Store composer text and local UI preferences in RTK.
Use a mutation then invalidate the feed key after Nest accepts a post.
Challenge lab
Bug report
New posts appear twice after a create succeeds.
What is broken
The submit handler pushes the server result into a Redux feed array and invalidates the Query feed.
Pass criteria
- One feed source of truth
- Draft clears after confirmed success
- Feed refreshes after create
Choose the correct fix
Keep in mind
- Ask “could another user change this on the server?” before choosing RTK.
Test
Check your understanding
At least 10 questions — mix of concept, syntax, practical, and logic. Score ≥ 80% (enforced by the API) to save progress.
Checking your session…
10 questions · concept 3 · syntax 2 · practical 3 · logic 2