Merge pull request #327 from ipnet-mesh/fix/channels-query-cache-collision

fix: Channels page crash from query cache shape collision

Author: jinglemansweep

src/meshcore_hub/web/static/js/spa-react/pages/Channels.test.tsx

@@ -2,7 +2,7 @@ import { screen, waitFor } from "@testing-library/react";
 import { describe, expect, it, vi } from "vitest";
 
 import { Channels } from "@/pages/Channels";
-import { renderWithProviders } from "@/test/renderWithProviders";
+import { renderWithProviders, createTestQueryClient } from "@/test/renderWithProviders";
 import { makeConfig } from "@/test/makeConfig";
 import * as api from "@/utils/api";
 
@@ -69,4 +69,15 @@ describe("Channels", () => {
       expect(screen.queryByText("Public")).not.toBeInTheDocument();
     });
   });
+
+  it("renders correctly when cache was pre-populated by Dashboard (raw object shape)", async () => {
+    mockChannelsApi();
+    const client = createTestQueryClient();
+    client.setQueryData(["channels", "list", {}], CHANNELS);
+    renderWithProviders(<Channels />, { client });
+    await waitFor(() => {
+      expect(screen.getByText("Public")).toBeInTheDocument();
+      expect(screen.getByText("Ops")).toBeInTheDocument();
+    });
+  });
 });

src/meshcore_hub/web/static/js/spa-react/pages/Channels.tsx

@@ -293,16 +293,10 @@ export function Channels() {
     error: queryError,
   } = useQuery({
     queryKey: qk.channels.list({}),
-    queryFn: async ({ signal }) => {
-      const resp = await apiGet<ChannelListResponse>(
-        "/api/v1/channels",
-        {},
-        { signal },
-      );
-      return resp.items || [];
-    },
+    queryFn: ({ signal }) =>
+      apiGet<ChannelListResponse>("/api/v1/channels", {}, { signal }),
   });
-  const channels = data ?? [];
+  const channels = data?.items ?? [];
   const error = queryError ? queryError.message : null;
   const [modal, setModal] = useState<ModalState | null>(null);