coder · Parkreiner · May 3, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024
diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -38,9 +38,23 @@ export const AppProviders: FC<AppProvidersProps> = ({
 }) => {
   // https://tanstack.com/query/v4/docs/react/devtools
   const [showDevtools, setShowDevtools] = useState(false);
+
   useEffect(() => {
-    window.toggleDevtools = () => setShowDevtools((old) => !old);
-    // eslint-disable-next-line react-hooks/exhaustive-deps -- no dependencies needed here
+    // Storing key in variable to avoid accidental typos; we're working with the
+    // window object, so there's basically zero type-checking available
+    const toggleKey = "toggleDevtools";
+
+    // Don't want to throw away the previous devtools value if some other
+    // extension added something already
+    const devtoolsBeforeSync = window[toggleKey];
+    window[toggleKey] = () => {
+      devtoolsBeforeSync?.();
+      setShowDevtools((current) => !current);
+    };
+
+    return () => {
+      window[toggleKey] = devtoolsBeforeSync;
+    };
   }, []);
 
   return (
@@ -60,10 +74,10 @@ export const AppProviders: FC<AppProvidersProps> = ({
 
 export const App: FC = () => {
   return (
-    <AppProviders>
-      <ErrorBoundary>
+    <ErrorBoundary>
+      <AppProviders>
         <RouterProvider router={router} />
-      </ErrorBoundary>
-    </AppProviders>
+      </AppProviders>
+    </ErrorBoundary>
   );
 };
diff --git a/site/src/api/queries/appearance.ts b/site/src/api/queries/appearance.ts
@@ -1,16 +1,14 @@
-import type { QueryClient, UseQueryOptions } from "react-query";
+import type { QueryClient } from "react-query";
 import * as API from "api/api";
 import type { AppearanceConfig } from "api/typesGenerated";
-import { getMetadataAsJSON } from "utils/metadata";
+import type { MetadataState } from "hooks/useEmbeddedMetadata";
 import { cachedQuery } from "./util";
 
-const initialAppearanceData = getMetadataAsJSON<AppearanceConfig>("appearance");
 const appearanceConfigKey = ["appearance"] as const;
 
-export const appearance = (): UseQueryOptions<AppearanceConfig> => {
-  // We either have our initial data or should immediately fetch and never again!
+export const appearance = (metadata: MetadataState<AppearanceConfig>) => {
   return cachedQuery({
-    initialData: initialAppearanceData,
+    metadata,
     queryKey: ["appearance"],
     queryFn: () => API.getAppearance(),
   });

diff --git a/site/src/api/queries/buildInfo.ts b/site/src/api/queries/buildInfo.ts
@@ -1,16 +1,14 @@
-import type { UseQueryOptions } from "react-query";
 import * as API from "api/api";
 import type { BuildInfoResponse } from "api/typesGenerated";
-import { getMetadataAsJSON } from "utils/metadata";
+import type { MetadataState } from "hooks/useEmbeddedMetadata";
 import { cachedQuery } from "./util";
 
-const initialBuildInfoData = getMetadataAsJSON<BuildInfoResponse>("build-info");
 const buildInfoKey = ["buildInfo"] as const;
 
-export const buildInfo = (): UseQueryOptions<BuildInfoResponse> => {
+export const buildInfo = (metadata: MetadataState<BuildInfoResponse>) => {
   // The version of the app can't change without reloading the page.
   return cachedQuery({
-    initialData: initialBuildInfoData,
+    metadata,
     queryKey: buildInfoKey,
     queryFn: () => API.getBuildInfo(),
   });

diff --git a/site/src/api/queries/entitlements.ts b/site/src/api/queries/entitlements.ts
@@ -1,15 +1,14 @@
-import type { QueryClient, UseQueryOptions } from "react-query";
+import type { QueryClient } from "react-query";
 import * as API from "api/api";
 import type { Entitlements } from "api/typesGenerated";
-import { getMetadataAsJSON } from "utils/metadata";
+import type { MetadataState } from "hooks/useEmbeddedMetadata";
 import { cachedQuery } from "./util";
 
-const initialEntitlementsData = getMetadataAsJSON<Entitlements>("entitlements");
 const entitlementsQueryKey = ["entitlements"] as const;
 
-export const entitlements = (): UseQueryOptions<Entitlements> => {
+export const entitlements = (metadata: MetadataState<Entitlements>) => {
   return cachedQuery({
-    initialData: initialEntitlementsData,
+    metadata,
     queryKey: entitlementsQueryKey,
     queryFn: () => API.getEntitlements(),
   });

diff --git a/site/src/api/queries/experiments.ts b/site/src/api/queries/experiments.ts
@@ -1,15 +1,13 @@
-import type { UseQueryOptions } from "react-query";
 import * as API from "api/api";
 import type { Experiments } from "api/typesGenerated";
-import { getMetadataAsJSON } from "utils/metadata";
+import type { MetadataState } from "hooks/useEmbeddedMetadata";
 import { cachedQuery } from "./util";
 
-const initialExperimentsData = getMetadataAsJSON<Experiments>("experiments");
 const experimentsKey = ["experiments"] as const;
 
-export const experiments = (): UseQueryOptions<Experiments> => {
+export const experiments = (metadata: MetadataState<Experiments>) => {
   return cachedQuery({
-    initialData: initialExperimentsData,
+    metadata,
     queryKey: experimentsKey,
     queryFn: () => API.getExperiments(),
   });

diff --git a/site/src/api/queries/users.ts b/site/src/api/queries/users.ts
@@ -1,6 +1,5 @@
 import type {
   QueryClient,
-  QueryKey,
   UseMutationOptions,
   UseQueryOptions,
 } from "react-query";
@@ -15,9 +14,12 @@ import type {
   User,
   GenerateAPIKeyResponse,
 } from "api/typesGenerated";
+import {
+  defaultMetadataManager,
+  type MetadataState,
+} from "hooks/useEmbeddedMetadata";
 import type { UsePaginatedQueryOptions } from "hooks/usePaginatedQuery";
 import { prepareQuery } from "utils/filters";
-import { getMetadataAsJSON } from "utils/metadata";
 import { getAuthorizationKey } from "./authCheck";
 import { cachedQuery } from "./util";
 
@@ -113,8 +115,6 @@ 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
@@ -126,11 +126,9 @@ export const authMethods = () => {
 
 const meKey = ["me"];
 
-export const me = (): UseQueryOptions<User> & {
-  queryKey: QueryKey;
-} => {
+export const me = (metadata: MetadataState<User>) => {
   return cachedQuery({
-    initialData: initialUserData,
+    metadata,
     queryKey: meKey,
     queryFn: API.getAuthenticatedUser,
   });
@@ -143,10 +141,9 @@ export function apiKey(): UseQueryOptions<GenerateAPIKeyResponse> {
   };
 }
 
-export const hasFirstUser = (): UseQueryOptions<boolean> => {
+export const hasFirstUser = (userMetadata: MetadataState<User>) => {
   return cachedQuery({
-    // This cannot be false otherwise it will not fetch!
-    initialData: Boolean(initialUserData) || undefined,
+    metadata: userMetadata,
     queryKey: ["hasFirstUser"],
     queryFn: API.hasFirstUser,
   });
@@ -193,6 +190,22 @@ export const logout = (queryClient: QueryClient) => {
   return {
     mutationFn: API.logout,
     onSuccess: () => {
+      /**
+       * 2024-05-02 - If we persist any form of user data after the user logs
+       * out, that will continue to seed the React Query cache, creating
+       * "impossible" states where we'll have data we're not supposed to have.
+       *
+       * This has caused issues where logging out will instantly throw a
+       * completely uncaught runtime rendering error. Worse yet, the error only
+       * exists when serving the site from the Go backend (the JS environment
+       * has zero issues because it doesn't have access to the metadata). These
+       * errors can only be caught with E2E tests.
+       *
+       * Deleting the user data will mean that all future requests have to take
+       * a full roundtrip, but this still felt like the best way to ensure that
+       * manually logging out doesn't blow the entire app up.
+       */
+      defaultMetadataManager.clearMetadataByKey("user");
       queryClient.removeQueries();
     },
   };

diff --git a/site/src/api/queries/util.ts b/site/src/api/queries/util.ts
@@ -1,27 +1,74 @@
-import type { UseQueryOptions } from "react-query";
+import type { UseQueryOptions, QueryKey } from "react-query";
+import type { MetadataState, MetadataValue } from "hooks/useEmbeddedMetadata";
+
+const disabledFetchOptions = {
+  cacheTime: Infinity,
+  staleTime: Infinity,
+  refetchOnMount: false,
+  refetchOnReconnect: false,
+  refetchOnWindowFocus: false,
+} as const satisfies UseQueryOptions;
+
+type UseQueryOptionsWithMetadata<
+  TMetadata extends MetadataValue = MetadataValue,
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = Omit<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  "initialData"
+> & {
+  metadata: MetadataState<TMetadata>;
+};
+
+type FormattedQueryOptionsResult<
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = Omit<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  "initialData"
+> & {
+  queryKey: NonNullable<TQueryKey>;
+};
 
 /**
  * cachedQuery allows the caller to only make a request a single time, and use
  * `initialData` if it is provided. This is particularly helpful for passing
  * values injected via metadata. We do this for the initial user fetch,
  * buildinfo, and a few others to reduce page load time.
  */
-export const cachedQuery = <
-  TQueryOptions extends UseQueryOptions<TData>,
-  TData,
+export function cachedQuery<
+  TMetadata extends MetadataValue = MetadataValue,
+  TQueryFnData = unknown,
+  TError = unknown,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
 >(
-  options: TQueryOptions,
-): TQueryOptions =>
-  // Only do this if there is initial data, otherwise it can conflict with tests.
-  ({
-    ...(options.initialData
-      ? {
-          cacheTime: Infinity,
-          staleTime: Infinity,
-          refetchOnMount: false,
-          refetchOnReconnect: false,
-          refetchOnWindowFocus: false,
-        }
-      : {}),
-    ...options,
-  });
+  options: UseQueryOptionsWithMetadata<
+    TMetadata,
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey
+  >,
+): FormattedQueryOptionsResult<TQueryFnData, TError, TData, TQueryKey> {
+  const { metadata, ...delegatedOptions } = options;
+  const newOptions = {
+    ...delegatedOptions,
+    initialData: metadata.available ? metadata.value : undefined,
+
+    // Make sure the disabled options are always serialized last, so that no
+    // one using this function can accidentally override the values
+    ...(metadata.available ? disabledFetchOptions : {}),
+  };
+
+  return newOptions as FormattedQueryOptionsResult<
+    TQueryFnData,
+    TError,
+    TData,
+    TQueryKey
+  >;
+}
diff --git a/site/src/contexts/ProxyContext.tsx b/site/src/contexts/ProxyContext.tsx
@@ -12,6 +12,7 @@ import { getWorkspaceProxies, getWorkspaceProxyRegions } from "api/api";
 import { cachedQuery } from "api/queries/util";
 import type { Region, WorkspaceProxy } from "api/typesGenerated";
 import { useAuthenticated } from "contexts/auth/RequireAuth";
+import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import { type ProxyLatencyReport, useProxyLatency } from "./useProxyLatency";
 
 export interface ProxyContextValue {
@@ -94,37 +95,8 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
     computeUsableURLS(userSavedProxy),
   );
 
-  const queryKey = ["get-proxies"];
-  // This doesn't seem like an idiomatic way to get react-query to use the
-  // initial data without performing an API request on mount, but it works.
-  //
-  // If anyone would like to clean this up in the future, it should seed data
-  // from the `meta` tag if it exists, and not fetch the regions route.
-  const [initialData] = useState(() => {
-    // Build info is injected by the Coder server into the HTML document.
-    const regions = document.querySelector("meta[property=regions]");
-    if (regions) {
-      const rawContent = regions.getAttribute("content");
-      try {
-        const obj = JSON.parse(rawContent as string);
-        if ("regions" in obj) {
-          return obj.regions as Region[];
-        }
-        return obj as Region[];
-      } catch (ex) {
-        // Ignore this and fetch as normal!
-      }
-    }
-  });
-
   const { permissions } = useAuthenticated();
-  const query = async (): Promise<readonly Region[]> => {
-    const endpoint = permissions.editWorkspaceProxies
-      ? getWorkspaceProxies
-      : getWorkspaceProxyRegions;
-    const resp = await endpoint();
-    return resp.regions;
-  };
+  const { metadata } = useEmbeddedMetadata();
 
   const {
     data: proxiesResp,
@@ -133,9 +105,15 @@ export const ProxyProvider: FC<PropsWithChildren> = ({ children }) => {
     isFetched: proxiesFetched,
   } = useQuery(
     cachedQuery({
-      initialData,
-      queryKey,
-      queryFn: query,
+      metadata: metadata.regions,
+      queryKey: ["get-proxies"],
+      queryFn: async (): Promise<readonly Region[]> => {
+        const endpoint = permissions.editWorkspaceProxies
+          ? getWorkspaceProxies
+          : getWorkspaceProxyRegions;
+        const resp = await endpoint();
+        return resp.regions;
+      },
     }),
   );