diff --git a/frontend/src/ts/ape/server-configuration.ts b/frontend/src/ts/ape/server-configuration.ts
index 75a60cfd99cd..c63100950238 100644
--- a/frontend/src/ts/ape/server-configuration.ts
+++ b/frontend/src/ts/ape/server-configuration.ts
@@ -1,8 +1,7 @@
 import { Configuration } from "@monkeytype/schemas/configuration";
-import Ape from ".";
 import { promiseWithResolvers } from "../utils/misc";
-
-let config: Configuration | undefined = undefined;
+import { queryClient } from "../queries";
+import { getServerConfigurationQueryOptions } from "../queries/server-configuration";
 
 const {
   promise: configurationPromise,
@@ -13,19 +12,16 @@ const {
 export { configurationPromise };
 
 export function get(): Configuration | undefined {
-  return config;
+  return queryClient.getQueryData(
+    getServerConfigurationQueryOptions().queryKey,
+  );
 }
 
 export async function sync(): Promise<void> {
-  const response = await Ape.configuration.get();
-
-  if (response.status !== 200) {
-    const message = `Could not fetch configuration: ${response.body.message}`;
-    console.error(message);
-    reject(message);
-    return;
-  } else {
-    config = response.body.data ?? undefined;
+  try {
+    await queryClient.fetchQuery(getServerConfigurationQueryOptions());
     resolve(true);
+  } catch (e) {
+    reject(e);
   }
 }
diff --git a/frontend/src/ts/queries/server-configuration.ts b/frontend/src/ts/queries/server-configuration.ts
new file mode 100644
index 000000000000..3a84c2f68658
--- /dev/null
+++ b/frontend/src/ts/queries/server-configuration.ts
@@ -0,0 +1,28 @@
+import { queryOptions } from "@tanstack/solid-query";
+import { baseKey } from "./utils/keys";
+import Ape from "../ape";
+
+const queryKeys = {
+  root: () => baseKey("serverConfiguration"),
+};
+
+//only refetch once on site load
+const staleTime = Infinity;
+
+// oxlint-disable-next-line typescript/explicit-function-return-type
+export const getServerConfigurationQueryOptions = () =>
+  queryOptions({
+    queryKey: queryKeys.root(),
+    queryFn: async () => {
+      const response = await Ape.configuration.get();
+
+      if (response.status !== 200) {
+        throw new Error(
+          `Could not fetch configuration: ${response.body.message}`,
+        );
+      }
+      return response.body.data;
+    },
+    staleTime,
+    gcTime: Infinity,
+  });