fix state sync bug

src/app/components/SSEEventListeners.tsx

@@ -1,13 +1,10 @@
 import { useQueryClient } from "@tanstack/react-query";
-import { useSetAtom } from "jotai";
 import type { FC, PropsWithChildren } from "react";
 import { projectDetailQuery, sessionDetailQuery } from "../../lib/api/queries";
 import { useServerEventListener } from "../../lib/sse/hook/useServerEventListener";
-import { sessionProcessesAtom } from "../projects/[projectId]/sessions/[sessionId]/store/sessionProcessesAtom";
 
 export const SSEEventListeners: FC<PropsWithChildren> = ({ children }) => {
   const queryClient = useQueryClient();
-  const setSessionProcesses = useSetAtom(sessionProcessesAtom);
 
   useServerEventListener("sessionListChanged", async (event) => {
     await queryClient.invalidateQueries({
@@ -21,9 +18,5 @@ export const SSEEventListeners: FC<PropsWithChildren> = ({ children }) => {
     });
   });
 
-  useServerEventListener("sessionProcessChanged", async ({ processes }) => {
-    setSessionProcesses(processes);
-  });
-
   return <>{children}</>;
 };

src/app/components/SyncSessionProcess.tsx

@@ -1,16 +1,24 @@
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { useSetAtom } from "jotai";
 import { type FC, type PropsWithChildren, useEffect } from "react";
-import type { PublicSessionProcess } from "../../types/session-process";
+import { sessionProcessesQuery } from "../../lib/api/queries";
+import { useServerEventListener } from "../../lib/sse/hook/useServerEventListener";
 import { sessionProcessesAtom } from "../projects/[projectId]/sessions/[sessionId]/store/sessionProcessesAtom";
 
-export const SyncSessionProcess: FC<
-  PropsWithChildren<{ initProcesses: PublicSessionProcess[] }>
-> = ({ children, initProcesses }) => {
+export const SyncSessionProcess: FC<PropsWithChildren> = ({ children }) => {
   const setSessionProcesses = useSetAtom(sessionProcessesAtom);
+  const { data } = useSuspenseQuery({
+    queryKey: sessionProcessesQuery.queryKey,
+    queryFn: sessionProcessesQuery.queryFn,
+  });
+
+  useServerEventListener("sessionProcessChanged", async ({ processes }) => {
+    setSessionProcesses(processes);
+  });
 
   useEffect(() => {
-    setSessionProcesses(initProcesses);
-  }, [initProcesses, setSessionProcesses]);
+    setSessionProcesses(data.processes);
+  }, [data, setSessionProcesses]);
 
   return <>{children}</>;
 };

src/routes/__root.tsx

@@ -3,6 +3,7 @@ import { createRootRoute, Outlet } from "@tanstack/react-router";
 import { TanStackRouterDevtoolsPanel } from "@tanstack/react-router-devtools";
 import { RootErrorBoundary } from "../app/components/RootErrorBoundary";
 import { SSEEventListeners } from "../app/components/SSEEventListeners";
+import { SyncSessionProcess } from "../app/components/SyncSessionProcess";
 import { ThemeProvider } from "../components/ThemeProvider";
 import { Toaster } from "../components/ui/sonner";
 import { LinguiClientProvider } from "../lib/i18n/LinguiProvider";
@@ -15,18 +16,20 @@ export const Route = createRootRoute({
         <LinguiClientProvider>
           <SSEProvider>
             <SSEEventListeners>
-              <Outlet />
-              <TanStackDevtools
-                config={{
-                  position: "bottom-right",
-                }}
-                plugins={[
-                  {
-                    name: "Tanstack Router",
-                    render: <TanStackRouterDevtoolsPanel />,
-                  },
-                ]}
-              />
+              <SyncSessionProcess>
+                <Outlet />
+                <TanStackDevtools
+                  config={{
+                    position: "bottom-right",
+                  }}
+                  plugins={[
+                    {
+                      name: "Tanstack Router",
+                      render: <TanStackRouterDevtoolsPanel />,
+                    },
+                  ]}
+                />
+              </SyncSessionProcess>
             </SSEEventListeners>
           </SSEProvider>
         </LinguiClientProvider>