chore: reduce requests the dashboard makes from seeded data

kylecarbs · kylecarbs · commit 1587c7f4e559 · 2024-04-22T14:14:17.000-04:00
We already inject all of this content in `index.html`.

There was also a bug with displaying a loading indicator when
the workspace proxies endpoint 404s.
diff --git a/site/src/api/queries/appearance.ts b/site/src/api/queries/appearance.ts
@@ -6,12 +6,22 @@ import { getMetadataAsJSON } from "utils/metadata";
 const initialAppearanceData = getMetadataAsJSON<AppearanceConfig>("appearance");
 const appearanceConfigKey = ["appearance"] as const;
 
-export const appearance = (): UseQueryOptions<AppearanceConfig> => {
-  return {
+export const appearance = () => {
+  const opts: UseQueryOptions<AppearanceConfig> = {
     queryKey: ["appearance"],
     initialData: initialAppearanceData,
     queryFn: () => API.getAppearance(),
   };
+  // If we have initial appearance data, we don't want to fetch
+  // the user again. We already have it!
+  if (initialAppearanceData) {
+    opts.cacheTime = Infinity;
+    opts.staleTime = Infinity;
+    opts.refetchOnMount = false;
+    opts.refetchOnReconnect = false;
+    opts.refetchOnWindowFocus = false;
+  }
+  return opts;
 };
 
 export const updateAppearance = (queryClient: QueryClient) => {
diff --git a/site/src/api/queries/buildInfo.ts b/site/src/api/queries/buildInfo.ts
@@ -6,10 +6,20 @@ import { getMetadataAsJSON } from "utils/metadata";
 const initialBuildInfoData = getMetadataAsJSON<BuildInfoResponse>("build-info");
 const buildInfoKey = ["buildInfo"] as const;
 
-export const buildInfo = (): UseQueryOptions<BuildInfoResponse> => {
-  return {
+export const buildInfo = () => {
+  const opts: UseQueryOptions<BuildInfoResponse> = {
     queryKey: buildInfoKey,
     initialData: initialBuildInfoData,
     queryFn: () => API.getBuildInfo(),
   };
+  // If we have initial build info data, we don't want to fetch
+  // the user again. We already have it!
+  if (initialBuildInfoData) {
+    opts.cacheTime = Infinity;
+    opts.staleTime = Infinity;
+    opts.refetchOnMount = false;
+    opts.refetchOnReconnect = false;
+    opts.refetchOnWindowFocus = false;
+  }
+  return opts
 };
diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -112,6 +112,8 @@ export const updateRoles = (queryClient: QueryClient) => {
   };
 };
 
+const initialUserData = getMetadataAsJSON<User>("user");
+
 export const authMethods = () => {
   return {
     // Even the endpoint being /users/authmethods we don't want to revalidate it
@@ -121,18 +123,26 @@ export const authMethods = () => {
   };
 };
 
-const initialUserData = getMetadataAsJSON<User>("user");
-
 const meKey = ["me"];
 
-export const me = (): UseQueryOptions<User> & {
-  queryKey: QueryKey;
-} => {
-  return {
+export const me = () => {
+  const opts: UseQueryOptions<User> & {
+    queryKey: QueryKey;
+  } = {
     queryKey: meKey,
     initialData: initialUserData,
     queryFn: API.getAuthenticatedUser,
   };
+  // If we have initial user data, we don't want to fetch
+  // the user again. We already have it!
+  if (initialUserData) {
+    opts.cacheTime = Infinity;
+    opts.staleTime = Infinity;
+    opts.refetchOnMount = false;
+    opts.refetchOnReconnect = false;
+    opts.refetchOnWindowFocus = false;
+  }
+  return opts
 };
 
 export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
@@ -142,8 +152,14 @@ export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
   };
 }
 
-export const hasFirstUser = () => {
+export const hasFirstUser = (): UseQueryOptions<boolean> => {
   return {
+    // If there is initial user data, we don't want to make
+    // this request. It's a waste!
+    cacheTime: Infinity,
+    staleTime: Infinity,
+    initialData: Boolean(initialUserData),
+
     queryKey: ["hasFirstUser"],
     queryFn: API.hasFirstUser,
   };
diff --git a/site/src/modules/dashboard/Navbar/NavbarView.tsx b/site/src/modules/dashboard/Navbar/NavbarView.tsx
@@ -235,6 +235,13 @@ const ProxyMenu: FC<ProxyMenuProps> = ({ proxyContextValue }) => {
     return proxy.healthy && latency !== undefined && latency.at < refetchDate;
   };
 
+  // This endpoint returns a 404 when not using enterprise.
+  // If we don't return null, then it looks like this is
+  // loading forever!
+  if (proxyContextValue.error) {
+    return null
+  }
+
   if (isLoading) {
     return (
       <Skeleton
