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, // }, ];