refactor: query online for connect status

2026-03-20 19:51:35 -05:00 · 2023-07-21 16:05:40 -07:00
parent cb60fb1283
commit 80d1c70e35
6 changed files with 30 additions and 55 deletions
--- a/components/UserProfile/DropdownConnectStatus.fragment.ts
+++ b/components/UserProfile/DropdownConnectStatus.fragment.ts
@@ -1,15 +1,7 @@
 import { graphql } from '~/composables/gql/gql';

-export const TEST_FRAGMENT = graphql(/* GraphQL */`
-  fragment TestFragment on Cloud {
-    error
-  }
-`);
-
-export const TEST_QUERY = graphql(/* GraphQL */`
-  query cloudError {
-    cloud {
-      ...TestFragment
-    }
+export const ONLINE_QUERY = graphql(/* GraphQL */`
+  query OnlineStatus {
+    online
  }
 `);
--- a/components/UserProfile/DropdownConnectStatus.vue
+++ b/components/UserProfile/DropdownConnectStatus.vue
@@ -1,43 +1,35 @@
 <script setup lang="ts">
 import { ExclamationTriangleIcon, CheckCircleIcon } from '@heroicons/vue/24/solid';
+import { provideApolloClient, useQuery } from '@vue/apollo-composable';

-type ApiOnlineStatus = 'online'|'offline';
-const onlineStatus = ref<ApiOnlineStatus>('online');
-const apiLoading = ref(false);
+import { ONLINE_QUERY } from './DropdownConnectStatus.fragment';
+import { useUnraidApiStore } from '~/store/unraidApi';

-// import { useQuery } from '@vue/apollo-composable';
+const unraidApiStore = useUnraidApiStore();

-// import {
-//   TEST_FRAGMENT,
-//   TEST_QUERY,
-// } from './DropdownConnectStatus.fragment';
-// import { useFragment } from '@/composables/gql/fragment-masking';
+const { loading, result } = provideApolloClient(unraidApiStore.unraidApiClient)(() => useQuery(ONLINE_QUERY));
+const online = computed(() => result.value ?? null);

-// const { result: newResult } = useQuery(
-//   TEST_QUERY,
-// );
-// const result = computed(() => useFragment(TEST_FRAGMENT, newResult.value?.cloud));
-
-// watch(result, (newVal, oldVal) => {
-//   console.log('result', newVal, oldVal);
-// });
+watch(online, (newVal, oldVal) => {
+  console.log('[watch:online]', newVal, oldVal);
+});
 </script>

 <template>
  <li class="px-8px flex flex-col items-center">
-    <template v-if="apiLoading">
+    <template v-if="loading">
      <BrandLoading class="w-36px mx-auto" />
      <span class="text-12px italic opacity-80">{{ 'Loading Connect status…' }}</span>
    </template>
    <span
      v-else
      class="w-full flex flex-row justify-start items-center gap-x-8px"
-      :title="onlineStatus !== 'online' ? 'Connect is not connected to Unraid cloud services' : 'Connect is connected to Unraid cloud services'"
+      :title="online ? 'Connect is connected to Unraid cloud services' : 'Connect is not connected to Unraid cloud services'"
    >
      <!-- <span class="block w-12px h-12px bg-green-600 rounded-full"></span> -->
-      <CheckCircleIcon v-if="onlineStatus === 'online'" class="text-green-500 w-16px h-16px" />
+      <CheckCircleIcon v-if="online" class="text-green-500 w-16px h-16px" />
      <ExclamationTriangleIcon v-else class="text-red-500 w-16px h-16px" />
-      <span>{{ onlineStatus !== 'online' ? 'Disconnected' : 'Connected' }}</span>
+      <span>{{ online ? 'Connected' : 'Disconnected' }}</span>
    </span>
  </li>
-</template>
+</template>
--- a/composables/gql/fragment-masking.ts
+++ b/composables/gql/fragment-masking.ts
@@ -2,6 +2,7 @@ import type { ResultOf, DocumentTypeDecoration, TypedDocumentNode } from '@graph
 import type { FragmentDefinitionNode } from 'graphql';
 import type { Incremental } from './graphql';

+
 export type FragmentType<TDocumentType extends DocumentTypeDecoration<any, any>> = TDocumentType extends DocumentTypeDecoration<
  infer TType,
  any
@@ -33,20 +34,21 @@ export function useFragment<TType>(
  _documentNode: DocumentTypeDecoration<TType, any>,
  fragmentType: ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
 ): ReadonlyArray<TType> | null | undefined;
-export function useFragment<TType> (
+export function useFragment<TType>(
  _documentNode: DocumentTypeDecoration<TType, any>,
  fragmentType: FragmentType<DocumentTypeDecoration<TType, any>> | ReadonlyArray<FragmentType<DocumentTypeDecoration<TType, any>>> | null | undefined
 ): TType | ReadonlyArray<TType> | null | undefined {
  return fragmentType as any;
 }

+
 export function makeFragmentData<
  F extends DocumentTypeDecoration<any, any>,
  FT extends ResultOf<F>
-> (data: FT, _fragment: F): FragmentType<F> {
+>(data: FT, _fragment: F): FragmentType<F> {
  return data as FragmentType<F>;
 }
-export function isFragmentReady<TQuery, TFrag> (
+export function isFragmentReady<TQuery, TFrag>(
  queryNode: DocumentTypeDecoration<TQuery, any>,
  fragmentNode: TypedDocumentNode<TFrag>,
  data: FragmentType<TypedDocumentNode<Incremental<TFrag>, any>> | null | undefined
@@ -54,7 +56,7 @@ export function isFragmentReady<TQuery, TFrag> (
  const deferredFields = (queryNode as { __meta__?: { deferredFields: Record<string, (keyof TFrag)[]> } }).__meta__
    ?.deferredFields;

-  if (!deferredFields) { return true; }
+  if (!deferredFields) return true;

  const fragDef = fragmentNode.definitions[0] as FragmentDefinitionNode | undefined;
  const fragName = fragDef?.name?.value;
--- a/composables/gql/gql.ts
+++ b/composables/gql/gql.ts
@@ -13,8 +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 TestFragment on Cloud {\n    error\n  }\n": types.TestFragmentFragmentDoc,
-    "\n  query cloudError {\n    cloud {\n      ...TestFragment\n    }\n  }\n": types.cloudErrorDocument,
+    "\n  query OnlineStatus {\n    online\n  }\n": types.OnlineStatusDocument,
    "\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,
@@ -39,11 +38,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 TestFragment on Cloud {\n    error\n  }\n"): (typeof documents)["\n  fragment TestFragment on Cloud {\n    error\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 cloudError {\n    cloud {\n      ...TestFragment\n    }\n  }\n"): (typeof documents)["\n  query cloudError {\n    cloud {\n      ...TestFragment\n    }\n  }\n"];
+export function graphql(source: "\n  query OnlineStatus {\n    online\n  }\n"): (typeof documents)["\n  query OnlineStatus {\n    online\n  }\n"];
 /**
 * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
 */
--- a/composables/gql/graphql.ts
+++ b/composables/gql/graphql.ts
@@ -1586,15 +1586,10 @@ export type usersInput = {
  slim?: InputMaybe<Scalars['Boolean']['input']>;
 };

-export type TestFragmentFragment = { __typename?: 'Cloud', error?: string | null } & { ' $fragmentName'?: 'TestFragmentFragment' };
-
-export type cloudErrorQueryVariables = Exact<{ [key: string]: never; }>;
+export type OnlineStatusQueryVariables = Exact<{ [key: string]: never; }>;


-export type cloudErrorQuery = { __typename?: 'Query', cloud?: (
-    { __typename?: 'Cloud' }
-    & { ' $fragmentRefs'?: { 'TestFragmentFragment': TestFragmentFragment } }
-  ) | null };
+export type OnlineStatusQuery = { __typename?: 'Query', online?: boolean | null };

 export type FragmentConfigFragment = { __typename?: 'Config', error?: ConfigErrorState | null, valid?: boolean | null } & { ' $fragmentName'?: 'FragmentConfigFragment' };

@@ -1621,10 +1616,9 @@ export type serverStateQuery = { __typename?: 'Query', crashReportingEnabled?: b
    & { ' $fragmentRefs'?: { 'FragmentConfigFragment': FragmentConfigFragment } }
  ), cloud?: { __typename?: 'Cloud', error?: string | null, apiKey: { __typename?: 'ApiKeyResponse', valid: boolean, error?: string | null }, relay?: { __typename?: 'RelayResponse', status: string, error?: string | null } | null, cloud: { __typename?: 'CloudResponse', status: string, error?: string | null } } | null };

-export const TestFragmentFragmentDoc = {"kind":"Document","definitions":[{"kind":"FragmentDefinition","name":{"kind":"Name","value":"TestFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]} as unknown as DocumentNode<TestFragmentFragment, 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 cloudErrorDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"cloudError"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"TestFragment"}}]}}]}},{"kind":"FragmentDefinition","name":{"kind":"Name","value":"TestFragment"},"typeCondition":{"kind":"NamedType","name":{"kind":"Name","value":"Cloud"}},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]} as unknown as DocumentNode<cloudErrorQuery, cloudErrorQueryVariables>;
+export const OnlineStatusDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"OnlineStatus"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"online"}}]}}]} as unknown as DocumentNode<OnlineStatusQuery, OnlineStatusQueryVariables>;
 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":"owner"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentOwner"}}]}},{"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":"registration"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentRegistration"}}]}},{"kind":"Field","name":{"kind":"Name","value":"crashReportingEnabled"}},{"kind":"Field","name":{"kind":"Name","value":"vars"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentVars"}}]}},{"kind":"Field","name":{"kind":"Name","value":"config"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"FragmentSpread","name":{"kind":"Name","value":"FragmentConfig"}}]}},{"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":"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":"cloud"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"status"}},{"kind":"Field","name":{"kind":"Name","value":"error"}}]}}]}}]}},{"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"}}]}},{"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<serverStateQuery, serverStateQueryVariables>;
--- a/composables/gql/index.ts
+++ b/composables/gql/index.ts
@@ -1,2 +1,2 @@
-export * from './fragment-masking';
-export * from './gql';
+export * from "./fragment-masking";
+export * from "./gql";