coder · Parkreiner · May 3, 2024 · May 2, 2024 · May 2, 2024 · May 2, 2024
@@ -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;
+      },
     }),
   );
 

@@ -9,9 +9,9 @@ import { embedRedirect } from "utils/redirect";
 import { type AuthContextValue, useAuthContext } from "./AuthProvider";
 
 export const RequireAuth: FC = () => {
+  const location = useLocation();
   const { signOut, isSigningOut, isSignedOut, isSignedIn, isLoading } =
     useAuthContext();
-  const location = useLocation();
 
   useEffect(() => {
     if (isLoading || isSigningOut || !isSignedIn) {
@@ -65,7 +65,15 @@ export const RequireAuth: FC = () => {
   );
 };
 
-export const useAuthenticated = () => {
+// We can do some TS magic here but I would rather to be explicit on what
+// values are not undefined when authenticated
+type NonNullableAuth = AuthContextValue & {
+  user: Exclude<AuthContextValue["user"], undefined>;
+  permissions: Exclude<AuthContextValue["permissions"], undefined>;
+  organizationId: Exclude<AuthContextValue["organizationId"], undefined>;
+};
+
+export const useAuthenticated = (): NonNullableAuth => {
   const auth = useAuthContext();
 
   if (!auth.user) {
@@ -76,11 +84,5 @@ export const useAuthenticated = () => {
     throw new Error("Permissions are not available.");
   }
 
-  // We can do some TS magic here but I would rather to be explicit on what
-  // values are not undefined when authenticated
-  return auth as AuthContextValue & {
-    user: Exclude<AuthContextValue["user"], undefined>;
-    permissions: Exclude<AuthContextValue["permissions"], undefined>;
-    organizationId: Exclude<AuthContextValue["organizationId"], undefined>;
-  };
+  return auth as NonNullableAuth;
 };
@@ -4,6 +4,7 @@ import type {
   BuildInfoResponse,
   Entitlements,
   Experiments,
+  Region,
   User,
 } from "api/typesGenerated";
 
@@ -22,6 +23,7 @@ type AvailableMetadata = Readonly<{
   experiments: Experiments;
   appearance: AppearanceConfig;
   entitlements: Entitlements;
+  regions: readonly Region[];
   "build-info": BuildInfoResponse;
 }>;
 
@@ -42,7 +44,7 @@ export type RuntimeHtmlMetadata = Readonly<{
 type SubscriptionCallback = (metadata: RuntimeHtmlMetadata) => void;
 type QuerySelector = typeof document.querySelector;
 
-type ParseJsonResult<T extends MetadataValue> = Readonly<
+type ParseJsonResult<T = unknown> = Readonly<
   | {
       value: T;
       node: Element;
@@ -76,6 +78,7 @@ export class MetadataManager implements MetadataManagerApi {
       entitlements: this.registerValue<Entitlements>("entitlements"),
       experiments: this.registerValue<Experiments>("experiments"),
       "build-info": this.registerValue<BuildInfoResponse>("build-info"),
+      regions: this.registerRegionValue("region"),
     };
   }
 
@@ -84,6 +87,40 @@ export class MetadataManager implements MetadataManagerApi {
     this.subscriptions.forEach((cb) => cb(metadataBinding));
   }
 
+  /**
+   * This is a band-aid solution for code that was specific to the Region
+   * type.
+   *
+   * Ideally the code should be updated on the backend to ensure that the
+   * response is one consistent type, and then this method should be removed
+   * entirely.
+   *
+   * Removing this method would also ensure that the other types in this file
+   * can be tightened up even further (e.g., adding a type constraint to
+   * parseJson)
+   */
+  private registerRegionValue(key: "region"): MetadataState<readonly Region[]> {
+    type RegionResponse =
+      | readonly Region[]
+      | Readonly<{
+          regions: readonly Region[];
+        }>;
+
+    const { value, node } = this.parseJson<RegionResponse>("regions");
+
+    let newEntry: MetadataState<readonly Region[]>;
+    if (!node || value === undefined) {
+      newEntry = { value: undefined, status: "missing" };
+    } else if ("regions" in value) {
+      newEntry = { value: value.regions, status: "loaded" };
+    } else {
+      newEntry = { value, status: "loaded" };
+    }
+
+    this.trackedMetadataNodes.set(key, node);
+    return newEntry;
+  }
+
   private registerValue<T extends MetadataValue>(
     key: MetadataKey,
   ): MetadataState<T> {
@@ -100,7 +137,7 @@ export class MetadataManager implements MetadataManagerApi {
     return newEntry;
   }
 
-  private parseJson<T extends MetadataValue>(key: string): ParseJsonResult<T> {
+  private parseJson<T = unknown>(key: string): ParseJsonResult<T> {
     const node = this.querySelector(`meta[property=${key}]`);
     if (!node) {
       return { value: undefined, node: null };