fix: immutable optimistic update to trigger re-render

layouts/LayoutDefault.tsx

@@ -68,9 +68,18 @@ function getQueryClient() {
   // suspends during the initial render. This may not be needed if we
   // have a suspense boundary BELOW the creation of the query client
   if (!browserQueryClient) browserQueryClient = makeQueryClient();
+  // This code is for all users
+  window.__TANSTACK_QUERY_CLIENT__ = browserQueryClient;
   return browserQueryClient;
 }
 
+// This code is only for TypeScript
+declare global {
+  interface Window {
+    __TANSTACK_QUERY_CLIENT__: import("@tanstack/query-core").QueryClient;
+  }
+}
+
 export function SignInWithGoogle() {
   const pageContext = usePageContext();
   /** This is populated using the +onCreatePageContext.server.ts hook */
@@ -232,7 +241,9 @@ function NavLinkChat() {
   const { urlPathname } = pageContext;
   const trpc = useTRPC();
   const queryClient = useQueryClient();
-  // const
+  const { data: conversations } = useQuery(
+    trpc.chat.conversations.fetchAll.queryOptions()
+  );
   const startConversation = useMutation(
     trpc.chat.conversations.start.mutationOptions({
       onSuccess: () => {
@@ -286,9 +297,6 @@ function NavLinkChat() {
     })
   );
 
-  const { data: conversations } = useQuery(
-    trpc.chat.conversations.fetchAll.queryOptions()
-  );
   // const selectedConversationId = useStore(
   //   (state) => state.selectedConversationId
   // );
@@ -356,7 +364,7 @@ function NavLinkChat() {
     >
       {conversations?.map((conversation) => (
         <NavLink
-          key={conversation.id}
+          key={conversation.id + conversation.title}
           href={`/chat/${conversation.id}`}
           label={conversation.title}
           className="hover-container"

pages/chat/@id/+Page.tsx

@@ -316,13 +316,17 @@ export default function ChatPage() {
             newConversations: null,
           };
         }
-        const newConversations: Array<Conversation> = [
-          ...previousConversations,
-          {
-            ...conversation,
-            title,
-          } as Conversation,
-        ];
+
+        /** MUST make a deep, immutable copy in order to trigger re-render of
+         * oberserving components. */
+        const newConversations: Array<Conversation> = JSON.parse(
+          JSON.stringify(previousConversations)
+        );
+        const conversationToUpdate = newConversations.find((c) => c.id === id);
+        if (!conversationToUpdate) {
+          return { previousConversations, newConversations };
+        }
+        conversationToUpdate.title = title;
         queryClient.setQueryData<Array<Conversation>>(
           trpc.chat.conversations.fetchAll.queryKey(),
           newConversations
@@ -508,10 +512,6 @@ export default function ChatPage() {
           onKeyUp={(e) => {
             if (e.key === "Enter") {
               e.preventDefault();
-              // updateConversationTitle.mutateAsync({
-              //   id: conversationId,
-              //   title: e.currentTarget.value,
-              // });
               e.currentTarget.blur();
             }
           }}