Migrate experiments to react-query

coder · BrunoQuaresma · Sep 14, 2023 · Sep 11, 2023 · Sep 11, 2023 · Sep 11, 2023
commit 4ec38be23da3d3e19cb730a48bf31e2a6ae6470a
diff --git a/site/src/api/queries/experiments.ts b/site/src/api/queries/experiments.ts
@@ -0,0 +1,23 @@
+import * as API from "api/api";
+
+export const experiments = () => {
+  return {
+    queryKey: ["experiments"],
+    queryFn: fetchExperiments,
+  };
+};
+
+const fetchExperiments = async () => {
+  // Experiments is injected by the Coder server into the HTML document.
+  const experiments = document.querySelector("meta[property=experiments]");
+  if (experiments) {
+    const rawContent = experiments.getAttribute("content");
+    try {
+      return JSON.parse(rawContent as string);
+    } catch (ex) {
+      // Ignore this and fetch as normal!
+    }
+  }
+
+  return API.getExperiments();
+};
diff --git a/site/src/components/Dashboard/DashboardProvider.tsx b/site/src/components/Dashboard/DashboardProvider.tsx
@@ -1,6 +1,7 @@
 import { useQuery } from "@tanstack/react-query";
 import { useMachine } from "@xstate/react";
 import { buildInfo } from "api/queries/buildInfo";
+import { experiments } from "api/queries/experiments";
 import { entitlements } from "api/queries/entitlements";
 import {
   AppearanceConfig,
@@ -11,7 +12,6 @@ import {
 import { FullScreenLoader } from "components/Loader/FullScreenLoader";
 import { createContext, FC, PropsWithChildren, useContext } from "react";
 import { appearanceMachine } from "xServices/appearance/appearanceXService";
-import { experimentsMachine } from "xServices/experiments/experimentsMachine";
 
 interface Appearance {
   config: AppearanceConfig;
@@ -34,15 +34,14 @@ export const DashboardProviderContext = createContext<
 export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
   const buildInfoQuery = useQuery(buildInfo());
   const entitlementsQuery = useQuery(entitlements());
+  const experimentsQuery = useQuery(experiments());
   const [appearanceState, appearanceSend] = useMachine(appearanceMachine);
-  const [experimentsState] = useMachine(experimentsMachine);
   const { appearance, preview } = appearanceState.context;
-  const { experiments } = experimentsState.context;
   const isLoading =
     !buildInfoQuery.data ||
     !entitlementsQuery.data ||
     !appearance ||
-    !experiments;
+    !experimentsQuery.data;
 
   const setAppearancePreview = (config: AppearanceConfig) => {
     appearanceSend({
@@ -67,7 +66,7 @@ export const DashboardProvider: FC<PropsWithChildren> = ({ children }) => {
       value={{
         buildInfo: buildInfoQuery.data,
         entitlements: entitlementsQuery.data,
-        experiments,
+        experiments: experimentsQuery.data,
         appearance: {
           preview,
           config: appearance,

diff --git a/site/src/xServices/experiments/experimentsMachine.ts b/site/src/xServices/experiments/experimentsMachine.ts