refactor: remove state polling and only refetch after action

_data/serverState.ts

@@ -51,14 +51,14 @@ export const serverState: Server = {
   guid: randomGuid,
   // "guid": "0781-5583-8355-81071A2B0211",
   inIframe: false,
-  keyfile: 'DUMMY_KEYFILE',
+  // keyfile: 'DUMMY_KEYFILE',
   lanIp: '192.168.254.36',
   license: '',
   locale: 'en_US',
   name: 'fuji',
   connectPluginInstalled: 'dynamix.unraid.net.staging.plg',
   // connectPluginInstalled: '',
-  registered: true,
+  registered: false,
   regGen: 0,
   // "regGuid": "0781-5583-8355-81071A2B0211",
   site: 'http://localhost:4321',

components/UserProfile/CallbackFeedback.vue

@@ -45,7 +45,7 @@ const {
   connectPluginInstalled,
   registered,
   authAction,
-  refreshedServerState,
+  refreshServerStateStatus,
 } = storeToRefs(serverStore);
 
 /**
@@ -90,11 +90,11 @@ const subheading = computed(() => {
 
 const closeText = computed(() => {
   const txt = !connectPluginInstalled.value ? 'No Thanks' : 'Close';
-  return refreshedServerState.value ? txt : 'Reload';
+  return refreshServerStateStatus.value === 'done' ? txt : 'Reload';
 });
 const close = () => {
   if (callbackStatus.value === 'loading') { return console.debug('[close] not allowed'); }
-  return refreshedServerState.value
+  return refreshServerStateStatus.value === 'done'
     ? callbackActionsStore.setCallbackStatus('ready')
     : window.location.reload();
 };

components/UserProfile/DropdownConnectStatus.vue

@@ -6,14 +6,6 @@ import { useServerStore } from '~/store/server';
 
 const serverStore = useServerStore();
 const { cloud } = storeToRefs(serverStore);
-
-onMounted(() => {
-  console.debug('[DropdownConnectStatus:mounted] cloud', cloud.value);
-});
-
-watch(cloud, (newVal, oldVal) => {
-  console.log('[watch:cloud]', newVal, oldVal);
-});
 </script>
 
 <template>

components/UserProfile/DropdownContent.vue

@@ -72,8 +72,8 @@ const links = computed(():UserProfileLink[] => {
 });
 
 const showErrors = computed(() => errors.value.length);
-const showKeyline = computed(() => (showErrors.value || showConnectStatus.value) && keyActions.value?.length && links.value.length);
 const showConnectStatus = computed(() => !showErrors.value && !stateData.value.error && registered.value && connectPluginInstalled.value);
+const showKeyline = computed(() => showConnectStatus.value && (keyActions.value?.length || links.value.length));
 </script>
 
 <template>

composables/gql/gql.ts

@@ -13,13 +13,7 @@ import type { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-
  * Therefore it is highly recommended to use the babel or swc plugin for production.
  */
 const documents = {
-    "\n  fragment FragmentCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n": types.FragmentCloudFragmentDoc,
-    "\n  fragment FragmentConfig on Config {\n    error\n    valid\n  }\n": types.FragmentConfigFragmentDoc,
-    "\n  fragment FragmentOwner on Owner {\n    avatar\n    username\n  }\n": types.FragmentOwnerFragmentDoc,
-    "\n  fragment FragmentRegistration on Registration {\n    state\n    expiration\n    keyFile {\n      contents\n    }\n  }\n": types.FragmentRegistrationFragmentDoc,
-    "\n  fragment FragmentVars on Vars {\n    regGen\n    regState\n    configError\n    configValid\n  }\n": types.FragmentVarsFragmentDoc,
-    "\n  query serverState {\n    cloud {\n      ...FragmentCloud\n    }\n    config {\n      ...FragmentConfig\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      ...FragmentOwner\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    vars {\n      ...FragmentVars\n    }\n  }\n": types.serverStateDocument,
-    "\n  query CloudStatus {\n    cloud {\n      ...FragmentCloud\n    }\n  }\n": types.CloudStatusDocument,
+    "\n  query serverState {\n    cloud {\n      error\n      apiKey {\n        valid\n        error\n      }\n      cloud {\n        status\n        error\n      }\n      minigraphql {\n        status\n        error\n      }\n      relay {\n        status\n        error\n      }\n    }\n    config {\n      error\n      valid\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      avatar\n      username\n    }\n    registration {\n      state\n      expiration\n      keyFile {\n        contents\n      }\n    }\n    vars {\n      regGen\n      regState\n      configError\n      configValid\n    }\n  }\n": types.serverStateDocument,
 };
 
 /**
@@ -39,31 +33,7 @@ export function graphql(source: string): unknown;
 /**
  * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
  */
-export function graphql(source: "\n  fragment FragmentCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n"): (typeof documents)["\n  fragment FragmentCloud on Cloud {\n    error\n    apiKey {\n      valid\n      error\n    }\n    cloud {\n      status\n      error\n    }\n    minigraphql {\n      status\n      error\n    }\n    relay {\n      status\n      error\n    }\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  fragment FragmentConfig on Config {\n    error\n    valid\n  }\n"): (typeof documents)["\n  fragment FragmentConfig on Config {\n    error\n    valid\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  fragment FragmentOwner on Owner {\n    avatar\n    username\n  }\n"): (typeof documents)["\n  fragment FragmentOwner on Owner {\n    avatar\n    username\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  fragment FragmentRegistration on Registration {\n    state\n    expiration\n    keyFile {\n      contents\n    }\n  }\n"): (typeof documents)["\n  fragment FragmentRegistration on Registration {\n    state\n    expiration\n    keyFile {\n      contents\n    }\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  fragment FragmentVars on Vars {\n    regGen\n    regState\n    configError\n    configValid\n  }\n"): (typeof documents)["\n  fragment FragmentVars on Vars {\n    regGen\n    regState\n    configError\n    configValid\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  query serverState {\n    cloud {\n      ...FragmentCloud\n    }\n    config {\n      ...FragmentConfig\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      ...FragmentOwner\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    vars {\n      ...FragmentVars\n    }\n  }\n"): (typeof documents)["\n  query serverState {\n    cloud {\n      ...FragmentCloud\n    }\n    config {\n      ...FragmentConfig\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      ...FragmentOwner\n    }\n    registration {\n      ...FragmentRegistration\n    }\n    vars {\n      ...FragmentVars\n    }\n  }\n"];
-/**
- * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
- */
-export function graphql(source: "\n  query CloudStatus {\n    cloud {\n      ...FragmentCloud\n    }\n  }\n"): (typeof documents)["\n  query CloudStatus {\n    cloud {\n      ...FragmentCloud\n    }\n  }\n"];
+export function graphql(source: "\n  query serverState {\n    cloud {\n      error\n      apiKey {\n        valid\n        error\n      }\n      cloud {\n        status\n        error\n      }\n      minigraphql {\n        status\n        error\n      }\n      relay {\n        status\n        error\n      }\n    }\n    config {\n      error\n      valid\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      avatar\n      username\n    }\n    registration {\n      state\n      expiration\n      keyFile {\n        contents\n      }\n    }\n    vars {\n      regGen\n      regState\n      configError\n      configValid\n    }\n  }\n"): (typeof documents)["\n  query serverState {\n    cloud {\n      error\n      apiKey {\n        valid\n        error\n      }\n      cloud {\n        status\n        error\n      }\n      minigraphql {\n        status\n        error\n      }\n      relay {\n        status\n        error\n      }\n    }\n    config {\n      error\n      valid\n    }\n    info {\n      os {\n        hostname\n      }\n    }\n    owner {\n      avatar\n      username\n    }\n    registration {\n      state\n      expiration\n      keyFile {\n        contents\n      }\n    }\n    vars {\n      regGen\n      regState\n      configError\n      configValid\n    }\n  }\n"];
 
 export function graphql(source: string) {
   return (documents as any)[source] ?? {};

composables/gql/graphql.ts

@@ -1586,48 +1586,10 @@ export type usersInput = {
   slim?: InputMaybe<Scalars['Boolean']['input']>;
 };
 
-export type FragmentCloudFragment = { __typename?: 'Cloud', error?: string | null, apiKey: { __typename?: 'ApiKeyResponse', valid: boolean, error?: string | null }, cloud: { __typename?: 'CloudResponse', status: string, error?: string | null }, minigraphql: { __typename?: 'MinigraphqlResponse', status: MinigraphStatus, error?: string | null }, relay?: { __typename?: 'RelayResponse', status: string, error?: string | null } | null } & { ' $fragmentName'?: 'FragmentCloudFragment' };
-
-export type FragmentConfigFragment = { __typename?: 'Config', error?: ConfigErrorState | null, valid?: boolean | null } & { ' $fragmentName'?: 'FragmentConfigFragment' };
-
-export type FragmentOwnerFragment = { __typename?: 'Owner', avatar?: string | null, username?: string | null } & { ' $fragmentName'?: 'FragmentOwnerFragment' };
-
-export type FragmentRegistrationFragment = { __typename?: 'Registration', state?: RegistrationState | null, expiration?: string | null, keyFile?: { __typename?: 'KeyFile', contents?: string | null } | null } & { ' $fragmentName'?: 'FragmentRegistrationFragment' };
-
-export type FragmentVarsFragment = { __typename?: 'Vars', regGen?: string | null, regState?: RegistrationState | null, configError?: ConfigErrorState | null, configValid?: boolean | null } & { ' $fragmentName'?: 'FragmentVarsFragment' };
-
 export type serverStateQueryVariables = Exact<{ [key: string]: never; }>;
 
 
-export type serverStateQuery = { __typename?: 'Query', cloud?: (
-    { __typename?: 'Cloud' }
-    & { ' $fragmentRefs'?: { 'FragmentCloudFragment': FragmentCloudFragment } }
-  ) | null, config: (
-    { __typename?: 'Config' }
-    & { ' $fragmentRefs'?: { 'FragmentConfigFragment': FragmentConfigFragment } }
-  ), info?: { __typename?: 'Info', os?: { __typename?: 'Os', hostname?: string | null } | null } | null, owner?: (
-    { __typename?: 'Owner' }
-    & { ' $fragmentRefs'?: { 'FragmentOwnerFragment': FragmentOwnerFragment } }
-  ) | null, registration?: (
-    { __typename?: 'Registration' }
-    & { ' $fragmentRefs'?: { 'FragmentRegistrationFragment': FragmentRegistrationFragment } }
-  ) | null, vars?: (
-    { __typename?: 'Vars' }
-    & { ' $fragmentRefs'?: { 'FragmentVarsFragment': FragmentVarsFragment } }
-  ) | null };
-
-export type CloudStatusQueryVariables = Exact<{ [key: string]: never; }>;
+export type serverStateQuery = { __typename?: 'Query', cloud?: { __typename?: 'Cloud', error?: string | null, apiKey: { __typename?: 'ApiKeyResponse', valid: boolean, error?: string | null }, cloud: { __typename?: 'CloudResponse', status: string, error?: string | null }, minigraphql: { __typename?: 'MinigraphqlResponse', status: MinigraphStatus, error?: string | null }, relay?: { __typename?: 'RelayResponse', status: string, error?: string | null } | null } | null, config: { __typename?: 'Config', error?: ConfigErrorState | null, valid?: boolean | null }, info?: { __typename?: 'Info', os?: { __typename?: 'Os', hostname?: string | null } | null } | null, owner?: { __typename?: 'Owner', avatar?: string | null, username?: string | null } | null, registration?: { __typename?: 'Registration', state?: RegistrationState | null, expiration?: string | null, keyFile?: { __typename?: 'KeyFile', contents?: string | null } | null } | null, vars?: { __typename?: 'Vars', regGen?: string | null, regState?: RegistrationState | null, configError?: ConfigErrorState | null, configValid?: boolean | null } | null };
 
 
-export type CloudStatusQuery = { __typename?: 'Query', cloud?: (
-    { __typename?: 'Cloud' }
-    & { ' $fragmentRefs'?: { 'FragmentCloudFragment': FragmentCloudFragment } }
-  ) | null };
-
-export const FragmentCloudFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<FragmentCloudFragment, unknown>;
-export const FragmentConfigFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentConfig"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Config"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}}]} as unknown as DocumentNode<FragmentConfigFragment, unknown>;
-export const FragmentOwnerFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentOwner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Owner"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}}]} as unknown as DocumentNode<FragmentOwnerFragment, unknown>;
-export const FragmentRegistrationFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentRegistration"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Registration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}}]}}]} as unknown as DocumentNode<FragmentRegistrationFragment, unknown>;
-export const FragmentVarsFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentVars"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Vars"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]} as unknown as DocumentNode<FragmentVarsFragment, unknown>;
-export const serverStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"serverState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentCloud"}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentConfig"}}]}},{"kind":"Field","name":{"kind":"Name","value":"info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"os"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hostname"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentOwner"}}]}},{"kind":"Field","name":{"kind":"Name","value":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentRegistration"}}]}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentVars"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentConfig"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Config"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentOwner"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Owner"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentRegistration"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Registration"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentVars"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Vars"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]} as unknown as DocumentNode<serverStateQuery, serverStateQueryVariables>;
-export const CloudStatusDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"CloudStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentCloud"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"FragmentCloud"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]} as unknown as DocumentNode<CloudStatusQuery, CloudStatusQueryVariables>;
+export const serverStateDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"serverState"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"apiKey"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"valid"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"minigraphql"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}},{"kind":"Field","name":{"kind":"Name","value":"relay"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}},{"kind":"Field","name":{"kind":"Name","value":"valid"}}]}},{"kind":"Field","name":{"kind":"Name","value":"info"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"os"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"hostname"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"avatar"}},{"kind":"Field","name":{"kind":"Name","value":"username"}}]}},{"kind":"Field","name":{"kind":"Name","value":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"state"}},{"kind":"Field","name":{"kind":"Name","value":"expiration"}},{"kind":"Field","name":{"kind":"Name","value":"keyFile"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"contents"}}]}}]}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"regGen"}},{"kind":"Field","name":{"kind":"Name","value":"regState"}},{"kind":"Field","name":{"kind":"Name","value":"configError"}},{"kind":"Field","name":{"kind":"Name","value":"configValid"}}]}}]}}]} as unknown as DocumentNode<serverStateQuery, serverStateQueryVariables>;

store/callbackActions.ts

@@ -41,7 +41,6 @@ export const useCallbackActionsStore = defineStore('callbackActions', () => {
       }
       // all actions have run
       if (array.length === (index + 1)) {
-        /** @todo refresh server state until we have new data */
         await serverStore.refreshServerState();
         // callbackStatus.value = 'done';
         if (array.length > 1) {

store/server.fragment.ts

@@ -1,67 +1,84 @@
 import { graphql } from '~/composables/gql/gql';
 
-export const SERVER_CLOUD_FRAGMENT = graphql(/* GraphQL */`
-  fragment FragmentCloud on Cloud {
-    error
-    apiKey {
-      valid
-      error
-    }
-    cloud {
-      status
-      error
-    }
-    minigraphql {
-      status
-      error
-    }
-    relay {
-      status
-      error
-    }
-  }
-`);
+// export const SERVER_CLOUD_FRAGMENT = graphql(/* GraphQL */`
+//   fragment FragmentCloud on Cloud {
+//     error
+//     apiKey {
+//       valid
+//       error
+//     }
+//     cloud {
+//       status
+//       error
+//     }
+//     minigraphql {
+//       status
+//       error
+//     }
+//     relay {
+//       status
+//       error
+//     }
+//   }
+// `);
 
-export const SERVER_CONFIG_FRAGMENT = graphql(/* GraphQL */`
-  fragment FragmentConfig on Config {
-    error
-    valid
-  }
-`);
+// export const SERVER_CONFIG_FRAGMENT = graphql(/* GraphQL */`
+//   fragment FragmentConfig on Config {
+//     error
+//     valid
+//   }
+// `);
 
-export const SERVER_OWNER_FRAGMENT = graphql(/* GraphQL */`
-  fragment FragmentOwner on Owner {
-    avatar
-    username
-  }
-`);
+// export const SERVER_OWNER_FRAGMENT = graphql(/* GraphQL */`
+//   fragment FragmentOwner on Owner {
+//     avatar
+//     username
+//   }
+// `);
 
-export const SERVER_REGISTRATION_FRAGMENT = graphql(/* GraphQL */`
-  fragment FragmentRegistration on Registration {
-    state
-    expiration
-    keyFile {
-      contents
-    }
-  }
-`);
+// export const SERVER_REGISTRATION_FRAGMENT = graphql(/* GraphQL */`
+//   fragment FragmentRegistration on Registration {
+//     state
+//     expiration
+//     keyFile {
+//       contents
+//     }
+//   }
+// `);
 
-export const SERVER_VARS_FRAGMENT = graphql(/* GraphQL */`
-  fragment FragmentVars on Vars {
-    regGen
-    regState
-    configError
-    configValid
-  }
-`);
+// export const SERVER_VARS_FRAGMENT = graphql(/* GraphQL */`
+//   fragment FragmentVars on Vars {
+//     regGen
+//     regState
+//     configError
+//     configValid
+//   }
+// `);
 
 export const SERVER_STATE_QUERY = graphql(/* GraphQL */`
   query serverState {
     cloud {
-      ...FragmentCloud
+      error
+      apiKey {
+        valid
+        error
+      }
+      cloud {
+        status
+        error
+      }
+      minigraphql {
+        status
+        error
+      }
+      relay {
+        status
+        error
+      }
     }
     config {
-      ...FragmentConfig
+      error
+      valid
     }
     info {
       os {
@@ -69,21 +86,21 @@ export const SERVER_STATE_QUERY = graphql(/* GraphQL */`
       }
     }
     owner {
-      ...FragmentOwner
+      avatar
+      username
     }
     registration {
-      ...FragmentRegistration
+      state
+      expiration
+      keyFile {
+        contents
+      }
     }
     vars {
-      ...FragmentVars
-    }
-  }
-`);
-
-export const SERVER_CLOUD_QUERY = graphql(/* GraphQL */`
-  query CloudStatus {
-    cloud {
-      ...FragmentCloud
+      regGen
+      regState
+      configError
+      configValid
     }
   }
 `);

store/server.ts

@@ -1,6 +1,6 @@
 /**
  * @todo Check OS and Connect Plugin versions against latest via API every session
- */
+*/
 import { defineStore, createPinia, setActivePinia } from 'pinia';
 import {
   ArrowRightOnRectangleIcon,
@@ -13,6 +13,7 @@ import {
 import { useQuery } from '@vue/apollo-composable';
 
 import { SERVER_STATE_QUERY } from './server.fragment';
+import type { serverStateQuery } from '~/composables/gql/graphql';
 import { WebguiState } from '~/composables/services/webgui';
 import { SETTINGS_MANAGMENT_ACCESS } from '~/helpers/urls';
 import { useAccountStore } from '~/store/account';
@@ -189,7 +190,7 @@ export const useServerStore = defineStore('server', () => {
 
   const serverDebugPayload = computed((): Server => {
     const payload = {
-      apiKey: apiKey.value ? `${apiKey.value.substring(0, 6)}__[REDACTED]` : '',
+      apiKey: apiKey.value ? `${apiKey.value.substring(0, 6)}__[REDACTED]` : '', // so we don't send full api key in email
       apiVersion: apiVersion.value,
       avatar: avatar.value,
       connectPluginInstalled: connectPluginInstalled.value,
@@ -731,7 +732,7 @@ export const useServerStore = defineStore('server', () => {
     console.debug('[setServer] server', server.value);
   };
 
-  const mutateServerStateFromApi = (data) => {
+  const mutateServerStateFromApi = (data: serverStateQuery): Server => {
     const mutatedData = {
       // if we get an owners obj back and the username is root we don't want to overwrite the values
       ...(data.owner && data.owner.username !== 'root' && {
@@ -761,7 +762,7 @@ export const useServerStore = defineStore('server', () => {
 
   const fetchServerFromApi = () => {
     const { result: resultServerState, refetch: refetchServerState } = useQuery(SERVER_STATE_QUERY, null, {
-      pollInterval: 2500,
+      // pollInterval: 2500,
       fetchPolicy: 'no-cache',
     });
     const serverState = computed(() => resultServerState.value ?? null);
@@ -790,40 +791,63 @@ export const useServerStore = defineStore('server', () => {
   };
 
   let refreshCount = 0;
-  const refreshLimit = 10;
-  const refreshedServerState = ref(false);
+  const refreshLimit = 20;
+  const refreshTimeout = 250;
+  const refreshServerStateStatus = ref<'done' | 'ready' | 'refreshing' | 'timeout'>('ready');
   const refreshServerState = async () => {
-    refreshCount++;
-    console.debug('[refreshServerState] start', { refreshCount });
-    const registeredBeforeRefresh = registered.value;
-    const stateBeforeRefresh = state.value;
-
-    const responseNewState = apiServerStateRefresh.value
-      ? await apiServerStateRefresh.value()
-      : await phpServerStateRefresh();
-    console.debug('[refreshServerState] responseNewState', responseNewState);
-
-    const newState = apiServerStateRefresh.value && responseNewState?.data ? responseNewState.data : responseNewState;
-    console.debug('[refreshServerState] newState', newState);
-
-    const registrationStatusChanged = registeredBeforeRefresh !== newState.registered;
-    const stateChanged = stateBeforeRefresh !== newState.state;
-
-    if (registrationStatusChanged || stateChanged) {
-      console.debug('[refreshServerState] change detected, stop refreshing', { registrationStatusChanged, stateChanged });
-      refreshedServerState.value = true;
-      return true;
-    }
-
+    // If we've reached the refresh limit, stop refreshing
     if (refreshCount >= refreshLimit) {
       console.debug('[refreshServerState] refresh limit reached, stop refreshing');
+      refreshServerStateStatus.value = 'timeout';
       return false;
     }
 
+    refreshCount++;
+    refreshServerStateStatus.value = 'refreshing';
+
+    const oldRegistered = registered.value;
+    const oldState = state.value;
+    const fromApi = !!apiServerStateRefresh.value;
+    console.debug('[refreshServerState] start', {
+      fromApi,
+      refreshCount,
+    });
+    // Fetch the server state from the API or PHP
+    const response = fromApi
+      ? await apiServerStateRefresh.value()
+      : await phpServerStateRefresh();
+    if (!response) {
+      console.debug('[refreshServerState] no response, fetch again in 250ms…');
+      return setTimeout(() => {
+        refreshServerState();
+      }, refreshTimeout);
+    }
+    console.debug('[refreshServerState] response', response);
+    // Extract the new values from the response
+    const newRegistered = fromApi && response?.data ? !!response.data.owner.username : response.registered;
+    const newState = fromApi && response?.data ? response.data.vars.regState : response.state;
+    // Compare the new values to the old values
+    const registrationStatusChanged = oldRegistered !== newRegistered;
+    const stateChanged = oldState !== newState;
+    console.debug('[refreshServerState] newState', {
+      oldRegistered,
+      newRegistered,
+      oldState,
+      newState,
+      registrationStatusChanged,
+      stateChanged,
+    });
+    // If the registration status or state changed, stop refreshing
+    if (registrationStatusChanged || stateChanged) {
+      console.debug('[refreshServerState] change detected, stop refreshing', { registrationStatusChanged, stateChanged });
+      refreshServerStateStatus.value = 'done';
+      return true;
+    }
+    // If we haven't reached the refresh limit, try again
     console.debug('[refreshServerState] no change, fetch again in 250ms…', { registrationStatusChanged, stateChanged });
     setTimeout(() => {
       return refreshServerState();
-    }, 250);
+    }, refreshTimeout);
   };
 
   return {
@@ -849,7 +873,7 @@ export const useServerStore = defineStore('server', () => {
     theme,
     uptime,
     username,
-    refreshedServerState,
+    refreshServerStateStatus,
     // getters
     authAction,
     deprecatedUnraidSSL,

types/server.ts

@@ -6,7 +6,7 @@ export interface ServerStateConfigStatus {
   valid: boolean;
 }
 export interface ServerStateCloudStatus {
-  error: string | null;
+  error: string | undefined;
 }
 
 export type ServerState = 'BASIC'