From 05ccb3cd38aaa69062b5b143dba6e076b1cb9af5 Mon Sep 17 00:00:00 2001
From: Ebube Ochemba <123279755+ebubecodes@users.noreply.github.com>
Date: Tue, 28 Oct 2025 14:14:16 +0100
Subject: [PATCH 1/2] 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.
---
 src/content/6/en/part6d.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/6/en/part6d.md b/src/content/6/en/part6d.md
index 936c7669898..37a8b639379 100644
--- a/src/content/6/en/part6d.md
+++ b/src/content/6/en/part6d.md
@@ -379,8 +379,8 @@ const App = () => {
     mutationFn: createNote,
     // highlight-start
     onSuccess: (newNote) => {
-      const notes = queryClient.getQueryData('notes')
-      queryClient.setQueryData('notes', notes.concat(newNote))
+      const notes = queryClient.getQueryData(['notes'])
+      queryClient.setQueryData(['notes'], notes.concat(newNote))
     // highlight-end
     }
   })

From 30caf0f53df52e61732a12bfbba0293dfd2d827c Mon Sep 17 00:00:00 2001
From: Ebube Ochemba <123279755+ebubecodes@users.noreply.github.com>
Date: Wed, 29 Oct 2025 12:06:10 +0100
Subject: [PATCH 2/2] Update queryClient calls to use array keys

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.
---
 src/content/6/fi/osa6d.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/content/6/fi/osa6d.md b/src/content/6/fi/osa6d.md
index 269924b19c4..f9a2e04a36d 100644
--- a/src/content/6/fi/osa6d.md
+++ b/src/content/6/fi/osa6d.md
@@ -380,8 +380,8 @@ const App = () => {
     mutationFn: createNote,
     // highlight-start
     onSuccess: (newNote) => {
-      const notes = queryClient.getQueryData('notes')
-      queryClient.setQueryData('notes', notes.concat(newNote))
+      const notes = queryClient.getQueryData(['notes'])
+      queryClient.setQueryData(['notes'], notes.concat(newNote))
     // highlight-end
     }
   })