fix: invalid group query

apps/hub/src/components/breadcrumbs/breadcrumbs.tsx

@@ -1,7 +1,8 @@
 import { useAuth } from "@/domains/auth/contexts/auth";
-import { RestOnRouteChange } from "@/lib/utils";
+
 import { Skeleton, cn } from "@rivet-gg/components";
-import { CatchBoundary, useMatchRoute } from "@tanstack/react-router";
+import { ErrorBoundary } from "@sentry/react";
+import { useMatchRoute } from "@tanstack/react-router";
 import { Suspense, useContext } from "react";
 import { EnvironmentBreadcrumb } from "./environment-breadcrumb";
 import { GroupBreadcrumb } from "./group-breadcrumb";
@@ -58,9 +59,10 @@ export function Breadcrumbs() {
         !isMobile && "items-center gap-2",
       )}
     >
-      <CatchBoundary
-        getResetKey={() => Date.now()}
-        errorComponent={RestOnRouteChange}
+      <ErrorBoundary
+        onError={(...args) => {
+          console.log("Error occurred while rendering breadcrumbs.", ...args);
+        }}
       >
         <Suspense
           fallback={
@@ -73,7 +75,7 @@ export function Breadcrumbs() {
         >
           <Content />
         </Suspense>
-      </CatchBoundary>
+      </ErrorBoundary>
     </div>
   );
 }

apps/hub/src/components/breadcrumbs/group-breadcrumb.tsx

@@ -32,6 +32,10 @@ export function GroupBreadcrumb({ groupId }: GroupBreadcrumbProps) {
 
   const Element = isMobile ? NavItem : Fragment;
 
+  if (!data) {
+    return null;
+  }
+
   return (
     <Element>
       <Link

apps/hub/src/components/error-component.tsx

@@ -1,3 +1,4 @@
+import { ls } from "@/lib/ls";
 import { hasMethod, isRivetError } from "@/lib/utils";
 import {
   Button,
@@ -9,7 +10,7 @@ import {
   Code,
   Text,
 } from "@rivet-gg/components";
-import { Icon, faBomb } from "@rivet-gg/icons";
+import { Icon, faBomb, faLock } from "@rivet-gg/icons";
 import * as Sentry from "@sentry/react";
 import {
   useQueryClient,
@@ -38,6 +39,31 @@ export const ErrorComponent = ({
   }, [error, queryErrorResetBoundary]);
 
   if (isRivetError(error)) {
+    if (error.statusCode === 403 && error.body.code === "GROUP_NOT_MEMBER") {
+      return (
+        <Card>
+          <CardHeader>
+            <CardTitle className="flex gap-2">
+              <Icon icon={faLock} />
+              Unauthorized
+            </CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Text>You are not a member of this group.</Text>
+          </CardContent>
+          <CardFooter>
+            <Button
+              onClick={() => {
+                ls.clear();
+                router.navigate({ to: "/" });
+              }}
+            >
+              Go Home
+            </Button>
+          </CardFooter>
+        </Card>
+      );
+    }
     if (error.statusCode === 404) {
       return <NotFoundComponent />;
     }
@@ -65,6 +91,7 @@ export const ErrorComponent = ({
         <Button
           onClick={() => {
             router.invalidate();
+            ls.clear();
             queryClient.resetQueries();
             queryClient.invalidateQueries();
             reset?.();

apps/hub/src/components/header/header-sub-nav.tsx

@@ -1,7 +1,7 @@
 import { useAuth } from "@/domains/auth/contexts/auth";
-import { RestOnRouteChange } from "@/lib/utils";
 import { Skeleton, cn } from "@rivet-gg/components";
-import { CatchBoundary, useMatchRoute } from "@tanstack/react-router";
+import { ErrorBoundary } from "@sentry/react";
+import { useMatchRoute } from "@tanstack/react-router";
 import { Suspense, useContext } from "react";
 import { MobileBreadcrumbsContext } from "../breadcrumbs/mobile-breadcrumbs";
 import { HeaderEnvironmentLinks } from "./links/header-environment-links";
@@ -59,10 +59,7 @@ export function HeaderSubNav() {
   const isMobile = useContext(MobileBreadcrumbsContext);
 
   return (
-    <CatchBoundary
-      getResetKey={() => Date.now()}
-      errorComponent={RestOnRouteChange}
-    >
+    <ErrorBoundary>
       <Suspense
         fallback={
           <div className="-mb-2 hidden md:flex min-h-10 items-center gap-6">
@@ -82,6 +79,6 @@ export function HeaderSubNav() {
           <Content />
         </div>
       </Suspense>
-    </CatchBoundary>
+    </ErrorBoundary>
   );
 }

apps/hub/src/components/header/links/header-group-links.tsx

@@ -1,4 +1,6 @@
+import { groupProjectsQueryOptions } from "@/domains/project/queries";
 import { faGear, faHome, faUsers } from "@rivet-gg/icons";
+import { useSuspenseQuery } from "@tanstack/react-query";
 import { Link } from "@tanstack/react-router";
 import { HeaderLink } from "../header-link";
 
@@ -7,6 +9,7 @@ interface HeaderLinksLinkProps {
 }
 
 export function HeaderGroupLinks({ groupId }: HeaderLinksLinkProps) {
+  useSuspenseQuery(groupProjectsQueryOptions(groupId));
   return (
     <>
       <HeaderLink icon={faHome}>

apps/hub/src/components/not-found-component.tsx

@@ -1,3 +1,4 @@
+import { ls } from "@/lib/ls";
 import {
   Button,
   Card,
@@ -8,9 +9,13 @@ import {
   Text,
 } from "@rivet-gg/components";
 import { Icon, faFlagCheckered } from "@rivet-gg/icons";
-import { Link } from "@tanstack/react-router";
+import { useQueryClient } from "@tanstack/react-query";
+import { useRouter } from "@tanstack/react-router";
 
 export const NotFoundComponent = () => {
+  const router = useRouter();
+  const queryClient = useQueryClient();
+
   return (
     <Card w="full">
       <CardHeader>
@@ -23,8 +28,14 @@ export const NotFoundComponent = () => {
         <Text>This page does not exists!</Text>
       </CardContent>
       <CardFooter>
-        <Button asChild>
-          <Link to="/">Homepage</Link>
+        <Button
+          onClick={() => {
+            queryClient.invalidateQueries();
+            ls.clear();
+            router.navigate({ to: "/" });
+          }}
+        >
+          Homepage
         </Button>
       </CardFooter>
     </Card>

apps/hub/src/domains/project/queries/query-options.tsx

@@ -1,5 +1,7 @@
+import { isRivetError } from "@/lib/utils";
 import { rivetClient, rivetEeClient } from "@/queries/global";
 import { getMetaWatchIndex } from "@/queries/utils";
+import { RivetError } from "@rivet-gg/api";
 import { loadModuleCategories } from "@rivet-gg/components";
 import { queryOptions } from "@tanstack/react-query";
 
@@ -42,10 +44,31 @@ export const groupsCountQueryOptions = () => {
 
 export const groupProjectsQueryOptions = (groupId: string) => {
   return queryOptions({
-    ...projectsByGroupQueryOptions(),
-    select: (data) => {
-      // biome-ignore lint/style/noNonNullAssertion: when we get here, we know the group exists
-      const group = data.groups.find((group) => group.groupId === groupId)!;
+    queryKey: ["team", groupId, "projects"],
+    retry(failureCount, error) {
+      if (isRivetError(error) && error.statusCode === 404) {
+        return false;
+      }
+      return failureCount < 3;
+    },
+    queryFn: async ({ signal, meta }) => {
+      const data = await rivetClient.cloud.games.getGames(
+        {
+          watchIndex: getMetaWatchIndex(meta),
+        },
+        { abortSignal: signal },
+      );
+
+      const group = data.groups.find((group) => group.groupId === groupId);
+      if (!group) {
+        throw new RivetError({
+          statusCode: 404,
+          body: {
+            message: "Group not found",
+          },
+        });
+      }
+
       const projects = data.games.filter(
         (game) => game.developer.groupId === group.groupId,
       );
@@ -60,16 +83,14 @@ export const groupProjectsQueryOptions = (groupId: string) => {
 export const groupOnwerQueryOptions = (groupId: string) => {
   return queryOptions({
     ...groupProjectsQueryOptions(groupId),
-    select: (data) => {
-      return groupProjectsQueryOptions(groupId).select?.(data).ownerIdentityId;
-    },
+    select: (data) => data.ownerIdentityId,
   });
 };
 
 export const projectsCountQueryOptions = (groupId: string) => {
   return queryOptions({
     ...groupProjectsQueryOptions(groupId),
-    select: (data) => data.games.length,
+    select: (data) => data.projects.length,
   });
 };
 

apps/hub/src/lib/ls.ts

@@ -11,4 +11,7 @@ export const ls = {
   remove: (key: LSKey) => {
     localStorage.removeItem(key);
   },
+  clear: () => {
+    localStorage.clear();
+  },
 };

apps/hub/src/queries/global.ts

@@ -56,7 +56,6 @@ const queryCache = new QueryCache({
   onError: (error) => {
     if (isRivetError(error)) {
       if (
-        error.statusCode === 403 ||
         error.body.code === "TOKEN_REVOKED" ||
         error.body.code === "TOKEN_INVALID"
       ) {

apps/hub/src/routes/_authenticated/_layout/teams/$groupId.tsx

@@ -1,5 +1,6 @@
 import { ErrorComponent } from "@/components/error-component";
 import * as Layout from "@/domains/project/layouts/group-layout";
+import { groupProjectsQueryOptions } from "@/domains/project/queries";
 import { useDialog } from "@/hooks/use-dialog";
 import { ls } from "@/lib/ls";
 import {
@@ -82,7 +83,11 @@ export const Route = createFileRoute("/_authenticated/_layout/teams/$groupId")({
   component: GroupIdView,
   errorComponent: GroupIdErrorComponent,
   pendingComponent: Layout.Root.Skeleton,
-  beforeLoad: ({ params: { groupId }, context: { auth } }) => {
+  beforeLoad: async ({
+    params: { groupId },
+    context: { auth, queryClient },
+  }) => {
+    await queryClient.ensureQueryData(groupProjectsQueryOptions(groupId));
     ls.set(`rivet-lastteam-${auth.profile?.identity.identityId}`, groupId);
   },
 });