api/store/unraidApi.ts

import { from, ApolloClient, createHttpLink, InMemoryCache, split } from '@apollo/client/core/core.cjs';
import { onError } from '@apollo/client/link/error';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { provideApolloClient } from '@vue/apollo-composable';
import { logErrorMessages } from '@vue/apollo-util';
import { createClient } from 'graphql-ws';
import { defineStore, createPinia, setActivePinia } from 'pinia';

// import { WebguiUnraidApiCommand } from '~/composables/services/webgui';
import { useAccountStore } from '~/store/account';
// import { useErrorsStore } from '~/store/errors';
import { useServerStore } from '~/store/server';

/**
 * @see https://stackoverflow.com/questions/73476371/using-pinia-with-vue-js-web-components
 * @see https://github.com/vuejs/pinia/discussions/1085
 */
setActivePinia(createPinia());
let baseUrl = window.location.origin;
const localDevUrl = baseUrl.includes(':4321'); /** @todo use ENV */
if (localDevUrl) {
  /** @temp local dev mode */
  baseUrl = baseUrl.replace(':4321', ':3001');
}
const httpEndpoint = new URL('/graphql', baseUrl);
const wsEndpoint = new URL('/graphql', baseUrl.replace('http', 'ws'));

console.debug('[useUnraidApiStore] httpEndpoint', httpEndpoint.toString());
console.debug('[useUnraidApiStore] wsEndpoint', wsEndpoint.toString());

export const useUnraidApiStore = defineStore('unraidApi', () => {
  console.debug('[useUnraidApiStore]');
  const accountStore = useAccountStore();
  // const errorsStore = useErrorsStore();
  const serverStore = useServerStore();

  const unraidApiClient = ref<ApolloClient<any>>();
  watch(unraidApiClient, (newVal, oldVal) => {
    console.debug('[watch:unraidApiStore.unraidApiClient]', { newVal, oldVal });
    if (newVal && !oldVal) { // first time
      serverStore.fetchServerFromApi();
    }
  });

  /**
   * Automatically called when an apiKey is set in the serverStore
   */
  const createApolloClient = () => {
    console.debug('[useUnraidApiStore.createApolloClient]', serverStore.apiKey);
    if (accountStore.accountActionType === 'signOut') {
      return console.debug('[useUnraidApiStore.createApolloClient] sign out imminent, skipping createApolloClient');
    }
    const headers = { 'x-api-key': serverStore.apiKey };

    const httpLink = createHttpLink({
      uri: httpEndpoint.toString(),
      headers,
    });

    const wsLink = new GraphQLWsLink(
      createClient({
        url: wsEndpoint.toString(),
        connectionParams: () => ({
          headers,
        }),
      }),
    );

    /**
     * @todo integrate errorsStore errorsStore.setError(error);
     * { graphQLErrors, networkError }
     */
    const errorLink = onError((errors) => {
      logErrorMessages(errors);
      // clientErrors.value = errors;
      // if (graphQLErrors) {
      //   logErrorMessages(graphQLErrors);
      //   // graphQLErrors.map(({ message, locations, path }) => {
      //   //   // console.error(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`);
      //   // })
      // }

      // if (networkError) {
      //   logErrorMessages(networkError);
      // }
    });

    const splitLinks = split(
      ({ query }) => {
        const definition = getMainDefinition(query);
        return (
          definition.kind === 'OperationDefinition' &&
          definition.operation === 'subscription'
        );
      },
      wsLink,
      httpLink,
    );
    /**
     * @todo as we add retries, determine which we'll need
     * https://www.apollographql.com/docs/react/api/link/introduction/#additive-composition
     * https://www.apollographql.com/docs/react/api/link/introduction/#directional-composition
     */
    const additiveLink = from([
      errorLink,
      splitLinks,
    ]);

    unraidApiClient.value = new ApolloClient({
      link: additiveLink,
      cache: new InMemoryCache(),
    });

    provideApolloClient(unraidApiClient.value);
    console.debug('[useUnraidApiStore.createApolloClient] 🏁 CREATED');
  };
  /**
   * Automatically called when an apiKey is unset in the serverStore
   */
  const closeUnraidApiClient = async () => {
    console.debug('[useUnraidApiStore.closeUnraidApiClient] STARTED');
    if (!unraidApiClient.value) { return console.debug('[useUnraidApiStore.closeUnraidApiClient] unraidApiClient not set'); }
    if (unraidApiClient.value) {
      await unraidApiClient.value.clearStore();
      unraidApiClient.value.stop();
      // (wsLink.value as any).subscriptionClient.close(); // needed if we start using subscriptions
    }
    unraidApiClient.value = undefined;
    console.debug('[useUnraidApiStore.closeUnraidApiClient] DONE');
  };

  // const clientErrors = ref<any>();
  // const offlineTimer = ref(false);
  // const enableRestartUnraidApiClient = computed(() => {
  //   const { connectPluginInstalled, stateDataError } = serverStore;
  //   return clientErrors.value && connectPluginInstalled && !stateDataError;
  // });
  // /**
  //  * @name detectOfflineTimer
  //  * @description if after 30secs the api isn't started we want to possibly enable apiEnableRestartButton
  //  * @param {String} from
  //  */
  // const detectOfflineTimer = () => {
  //   console.debug('[detectOfflineTimer]');
  //   setTimeout(() => {
  //     if (!unraidApiClient.value && serverStore.registered) {
  //       offlineTimer.value = true;
  //       sessionStorage.setItem('offlineTimer', Date.now());
  //     }
  //   }, 30000);
  // };
  // const restartUnraidApiClient = () => {
  //   WebguiUnraidApiCommand({
  //     csrf_token: serverStore.csrfToken,
  //     command: 'start',
  //   });
  //   // reset so the detectOfflineTimer can be used again without a page refresh
  //   offlineTimer.value = false;
  //   this.restartTriggered = true;
  //   sessionStorage.removeItem('offlineTimer');
  // };

  return {
    unraidApiClient,
    createApolloClient,
    closeUnraidApiClient,
  };
});