fix: use vue-query; make less useless api call

polylan_submitter/src/queries.ts

@@ -0,0 +1,45 @@
+import { QueryClient } from "@tanstack/vue-query";
+import { persistQueryClient } from "@tanstack/query-persist-client-core";
+import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
+import {
+  gamesApiListEventGamesOptions,
+  polylanSubmitterApiGetUserInfoOptions,
+  polylanSubmitterApiGetUserInfoQueryKey,
+} from "@/api/@tanstack/vue-query.gen";
+
+// Exported (not just provided by VueQueryPlugin) so Pinia stores can
+// fetchQuery() through the same cache.
+export const queryClient = new QueryClient();
+
+// Login/logout are full-page redirects, so the user can't change within a
+// page load - only refetched once after a reload (see restoreQueryCache).
+export const userQuery = () => ({
+  ...polylanSubmitterApiGetUserInfoOptions(),
+  staleTime: Infinity,
+});
+
+// Games only change when staff enable/disable one, a few minutes of
+// staleness is fine.
+export const eventGamesQuery = (eventPath: string) => ({
+  ...gamesApiListEventGamesOptions({ path: { event_path: eventPath } }),
+  staleTime: 5 * 60 * 1000,
+});
+
+const PERSISTED_QUERIES = new Set(["polylanSubmitterApiGetUserInfo", "gamesApiListEventGames"]);
+
+// Restores user + games from localStorage before the app mounts, so pages
+// render right away on reload instead of waiting on the API.
+export const restoreQueryCache = (client: QueryClient) =>
+  persistQueryClient({
+    queryClient: client,
+    persister: createSyncStoragePersister({ storage: window.localStorage }),
+    dehydrateOptions: {
+      shouldDehydrateQuery: (query) =>
+        query.state.status === "success" &&
+        PERSISTED_QUERIES.has((query.queryKey[0] as { _id: string })._id),
+    },
+  });
+
+// The restored user is only a placeholder until the real one comes back.
+export const onQueryCacheRestored = (client: QueryClient) =>
+  client.invalidateQueries({ queryKey: polylanSubmitterApiGetUserInfoQueryKey() });