Update query in AutoModeButton.vue

src/api/index.ts

@@ -4,3 +4,4 @@ export * from "./use-trace_ids-subscription";
 export * from "./use-continuous-enabled-subscription";
 export * from "./use-schedule-auto-mode-state-subscription";
 export * from "./use-schedule-auto-mode-subscription";
+export * from "./use-schedule-auto-mode-mode-subscription";

src/api/use-schedule-auto-mode-mode-subscription.ts

@@ -0,0 +1,42 @@
+import { computed } from "vue";
+import type { ComputedRef } from "vue";
+import {
+  useQScheduleAutoModeModeQuery,
+  useScheduleAutoModeModeSubscription,
+} from "@/graphql/codegen/generated";
+
+// type AutoMode = "off" | "scheduler" | "queue";
+
+interface _ScheduleAutoModeModeSubscription {
+  autoModeMode: ComputedRef<string | undefined>;
+  error: ComputedRef<Error | undefined>;
+  subscription: ReturnType<typeof useScheduleAutoModeModeSubscription>;
+  query: ReturnType<typeof useQScheduleAutoModeModeQuery>;
+}
+
+type ScheduleAutoModeModeSubscription = _ScheduleAutoModeModeSubscription &
+  PromiseLike<_ScheduleAutoModeModeSubscription>;
+
+export function useSubscribeScheduleAutoModeMode(): ScheduleAutoModeModeSubscription {
+  const query = useQScheduleAutoModeModeQuery({ requestPolicy: "network-only" });
+  const subscription = useScheduleAutoModeModeSubscription();
+
+  const error = computed(() => subscription.error?.value || query.error?.value);
+
+  const autoModeMode = computed(() =>
+    error.value
+      ? undefined
+      : subscription.data?.value?.scheduleAutoModeMode ||
+        query.data?.value?.schedule.autoMode.mode
+  );
+
+  const ret = { autoModeMode, error, subscription, query };
+
+  return {
+    ...ret,
+    async then(onFulfilled, onRejected) {
+      await query;
+      return Promise.resolve(ret).then(onFulfilled, onRejected);
+    },
+  };
+}

src/components/auto-mode-button/AutoModeButton.vue

@@ -1,8 +1,8 @@
 <template>
   <v-card-actions>
-    <button-off v-if="autoMode === 'off'"></button-off>
-    <button-scheduler v-else-if="autoMode === 'scheduler'"></button-scheduler>
-    <button-queue v-else-if="autoMode === 'queue'"></button-queue>
+    <button-off v-if="mode === 'off'"></button-off>
+    <button-scheduler v-else-if="mode === 'scheduler'"></button-scheduler>
+    <button-queue v-else-if="mode === 'queue'"></button-queue>
     <button-error v-else></button-error>
   </v-card-actions>
 </template>
@@ -12,6 +12,6 @@ import ButtonError from "./modes/error/Button.vue";
 import ButtonOff from "./modes/off/Button.vue";
 import ButtonScheduler from "./modes/scheduler/Button.vue";
 import ButtonQueue from "./modes/queue/Button.vue";
-import { useSubscribeScheduleAutoMode } from "@/api";
-const { autoMode } = await useSubscribeScheduleAutoMode();
+import { useSubscribeScheduleAutoModeMode } from "@/api";
+const { autoModeMode: mode } = await useSubscribeScheduleAutoModeMode();
 </script>