shifting query client clear() for unauthenticated users

components/dashboard/src/Login.tsx

@@ -21,7 +21,6 @@ import { SSOLoginForm } from "./login/SSOLoginForm";
 import { useAuthProviders } from "./data/auth-providers/auth-provider-query";
 import { SetupPending } from "./login/SetupPending";
 import { useNeedsSetup } from "./dedicated-setup/use-needs-setup";
-import { useQueryClient } from "@tanstack/react-query";
 
 export function markLoggedIn() {
     document.cookie = GitpodCookie.generateCookie(window.location.hostname);
@@ -36,7 +35,6 @@ type LoginProps = {
 };
 export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
     const { setUser } = useContext(UserContext);
-    const client = useQueryClient();
 
     const urlHash = useMemo(() => getURLHash(), []);
 
@@ -68,11 +66,9 @@ export const Login: FC<LoginProps> = ({ onLoggedIn }) => {
     const updateUser = useCallback(async () => {
         await getGitpodService().reconnect();
         const user = await getGitpodService().server.getLoggedInUser();
-        // Clear the query cache on login to reset it
-        client.clear();
         setUser(user);
         markLoggedIn();
-    }, [client, setUser]);
+    }, [setUser]);
 
     const authorizeSuccessful = useCallback(async () => {
         updateUser().catch(console.error);

components/dashboard/src/components/error-boundaries/QueryErrorBoundary.tsx

@@ -5,7 +5,7 @@
  */
 
 import { ErrorCodes } from "@gitpod/gitpod-protocol/lib/messaging/error";
-import { QueryErrorResetBoundary } from "@tanstack/react-query";
+import { QueryErrorResetBoundary, useQueryClient } from "@tanstack/react-query";
 import { FC } from "react";
 import { ErrorBoundary, FallbackProps } from "react-error-boundary";
 import { hasLoggedInBefore, Login } from "../../Login";
@@ -28,11 +28,14 @@ export const QueryErrorBoundary: FC = ({ children }) => {
 
 // This handles any expected errors, i.e. errors w/ a code that an api call produced
 const ExpectedQueryErrorsFallback: FC<FallbackProps> = ({ error, resetErrorBoundary }) => {
+    const client = useQueryClient();
     // adjust typing, as we may have caught an api error here w/ a code property
     const caughtError = error as CaughtError;
 
     // User needs to Login
     if (caughtError.code === ErrorCodes.NOT_AUTHENTICATED) {
+        console.log("clearing query cache for unauthenticated user");
+        client.clear();
         // Before we show a Login screen, check to see if we need to redirect to www site
         // Redirects if it's the root, no user, and no gp cookie present (has logged in recently)
         if (isGitpodIo() && window.location.pathname === "/" && window.location.hash === "") {

components/dashboard/src/data/git-providers/suggested-repositories-query.ts

@@ -11,11 +11,18 @@ import { getGitpodService } from "../../service/service";
 export const useSuggestedRepositories = () => {
     const { data: org } = useCurrentOrg();
 
-    return useQuery(["suggested-repositories", { orgId: org?.id }], async () => {
-        if (!org) {
-            throw new Error("No org selected");
-        }
+    return useQuery(
+        ["suggested-repositories", { orgId: org?.id }],
+        async () => {
+            if (!org) {
+                throw new Error("No org selected");
+            }
 
-        return await getGitpodService().server.getSuggestedRepositories(org.id);
-    });
+            return await getGitpodService().server.getSuggestedRepositories(org.id);
+        },
+        {
+            // Keeps data in cache for 24h - will still refresh though
+            cacheTime: 1000 * 60 * 60 * 24,
+        },
+    );
 };

components/dashboard/src/data/setup.tsx

@@ -30,6 +30,12 @@ export function isNoPersistence(queryKey: QueryKey): boolean {
 
 export const setupQueryClientProvider = () => {
     const client = new QueryClient({
+        defaultOptions: {
+            queries: {
+                // Default stale time to help avoid re-fetching data too frequently
+                staleTime: 1000 * 5, // 5 seconds
+            },
+        },
         queryCache: new QueryCache({
             // log any errors our queries throw
             onError: (error) => {

components/dashboard/src/menu/Menu.tsx

@@ -20,7 +20,6 @@ import { isGitpodIo } from "../utils";
 import OrganizationSelector from "./OrganizationSelector";
 import { getAdminTabs } from "../admin/admin.routes";
 import classNames from "classnames";
-import { useQueryClient } from "@tanstack/react-query";
 
 interface Entry {
     title: string;
@@ -168,8 +167,6 @@ type UserMenuProps = {
     onFeedback?: () => void;
 };
 const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedbackLink, onFeedback }) => {
-    const client = useQueryClient();
-
     const extraSection = useMemo(() => {
         const items: ContextMenuEntry[] = [];
 
@@ -222,13 +219,9 @@ const UserMenu: FC<UserMenuProps> = ({ user, className, withAdminLink, withFeedb
             {
                 title: "Log out",
                 href: gitpodHostUrl.asApiLogout().toString(),
-                // Clear query cache on logout
-                onClick: () => {
-                    client.clear();
-                },
             },
         ];
-    }, [client, extraSection, user]);
+    }, [extraSection, user]);
 
     return (
         <div