Skip to content

Commit 05ccb3c

Browse files
authored
fix: correct query key format in newNoteMutation onSuccess handler
The useQuery hook uses an array format for queryKey (['notes']), but the mutation's getQueryData and setQueryData calls were using a string format ('notes'). In TanStack Query v4+, these are treated as completely different cache keys, preventing the optimistic cache update from working. This caused the UI to not update after adding a new note because the mutation was updating a different cache entry than the one being watched by useQuery. Changed queryClient.getQueryData('notes') to queryClient.getQueryData(['notes']) and queryClient.setQueryData('notes', ...) to queryClient.setQueryData(['notes'], ...) to ensure cache consistency and proper UI updates.
1 parent 070deb3 commit 05ccb3c

File tree

1 file changed

+2
-2
lines changed

1 file changed

+2
-2
lines changed

src/content/6/en/part6d.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -379,8 +379,8 @@ const App = () => {
379379
mutationFn: createNote,
380380
// highlight-start
381381
onSuccess: (newNote) => {
382-
const notes = queryClient.getQueryData('notes')
383-
queryClient.setQueryData('notes', notes.concat(newNote))
382+
const notes = queryClient.getQueryData(['notes'])
383+
queryClient.setQueryData(['notes'], notes.concat(newNote))
384384
// highlight-end
385385
}
386386
})

0 commit comments

Comments
 (0)