avicenna/service/app-hub/dashboard/src/app/graphql.provider.ts

import { ApplicationConfig, inject } from '@angular/core';
import {
  ApolloClientOptions,
  ApolloLink,
  InMemoryCache,
  split,
} from '@apollo/client/core';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { getMainDefinition } from '@apollo/client/utilities';
import { provideApollo } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { OperationDefinitionNode } from 'graphql';
import { createClient } from 'graphql-ws';
import { environment } from '../environments/environment';

const uri = environment.graphQl.endpoint; // <-- add the URL of the GraphQL server here
export function apolloOptionsFactory(): ApolloClientOptions {
  const httpLink = inject(HttpLink);

  const http = httpLink.create({ uri });

  const ws = new GraphQLWsLink(
    createClient({
      url: environment.graphQl.ws,
    }),
  );

  const link = split(
    ({ query }) => {
      const { kind, operation } = getMainDefinition(
        query,
      ) as OperationDefinitionNode;
      return kind === 'OperationDefinition' && operation === 'subscription';
    },
    ws,
    http,
  );
  return {
    link,
    cache: new InMemoryCache(),
  };
}

export const graphqlProvider: ApplicationConfig['providers'] = [
  provideApollo(() => {
    const httpLink = inject(HttpLink);

    const http = httpLink.create({ uri });

    const ws = new GraphQLWsLink(
      createClient({
        url: environment.graphQl.ws,
      }),
    );

    const link = ApolloLink.split(
      ({ query }) => {
        const { kind, operation } = getMainDefinition(
          query,
        ) as OperationDefinitionNode;
        return kind === 'OperationDefinition' && operation === 'subscription';
      },
      ws,
      http,
    );
    return {
      link,
      cache: new InMemoryCache(),
    };
  }),
  // Apollo,
  // {
  //   provide: APOLLO_OPTIONS,
  //   useFactory: apolloOptionsFactory,
  // },
];