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"