subscriptions with apollo + echo are not working #2661

/*
 * Libraries
 */
import { Observable, ApolloLink } from '@apollo/client/core';
/*
 * Types
 */
import type {
 Operation,
 NextLink,
 FetchResult,
 RequestHandler,
 Observer,
} from '@apollo/client/core';
import type Echo from 'laravel-echo';
type EchoSubscriptionData = {
 more: boolean;
 result: any; // The data from the subscription graphql
};
function subscribeToEcho(
 echoClient: Echo<'pusher'>,
 channelName: string,
 observer: Observer<FetchResult>,
) {
 const channel = echoClient.private(channelName.replace(/^private-/, ''));
 channel.listen('.lighthouse-subscription', (data: EchoSubscriptionData) => {
 if (observer.next) {
 observer.next(data.result);
 }
 });
}
function unsubscribe(echoClient: Echo<'pusher'>, getChannelName: () => string) {
 const channelName = getChannelName();
 if (channelName) {
 echoClient.leave(channelName);
 }
}
function getFieldNode(operation: Operation) {
 const operationDefinition = operation.query.definitions.find(
 (definitionNode) => definitionNode.kind === 'OperationDefinition',
 );
 const fieldNode = operationDefinition?.selectionSet.selections.find(
 (definitionNode) => definitionNode.kind === 'Field',
 );
 return {
 fieldNode,
 };
}
function getChannelName(
 version: number,
 channel: string,
 channels: { [key: string]: string },
 subscriptionName: string,
) {
 // Lighthouse v6 logic, version didn't exist anymore in v6
 if (channel) {
 return channel;
 }
 // Otherwise, we use the old logic for backward compatibility
 return version === 2 ? channel : channels[subscriptionName];
}
function getLighthouseSubscription(data: FetchResult): {
 version?: number;
 channel?: string;
 channels?: {
 [key: string]: string;
 };
} {
 return data?.extensions?.lighthouse_subscriptions || {};
}
function createSubscriptionHandler(
 echoClient: Echo<'pusher'>,
 operation: Operation,
 observer: Observer<FetchResult>,
 setChannelName: (name: string) => any,
) {
 return (data: FetchResult) => {
 const { fieldNode } = getFieldNode(operation);
 const lighthouseSubscription = getLighthouseSubscription(data);
 const { version = 2, channel, channels } = lighthouseSubscription;
 const channelName = getChannelName(
 version,
 channel || '',
 channels || {},
 fieldNode?.name.value || '',
 );
 if (channelName) {
 setChannelName(channelName);
 subscribeToEcho(echoClient, channelName, observer);
 } else {
 if (observer.next) observer.next(data);
 if (observer.complete) observer.complete();
 }
 };
}
function createRequestHandler(echoClient: Echo<'pusher'>): RequestHandler {
 return (operation: Operation, forward: NextLink): Observable<FetchResult> => {
 let channelName: string;
 return new Observable((observer) => {
 forward(operation).subscribe(
 createSubscriptionHandler(
 echoClient,
 operation,
 observer,
 (name) => (channelName = name),
 ),
 (error) => observer.error(error),
 );
 return () => unsubscribe(echoClient, () => channelName);
 });
 };
}
function createApolloEchoSubscriptionLink(
 echoClient: Echo<'pusher'>,
): ApolloLink {
 return new ApolloLink(createRequestHandler(echoClient));
}
export { createApolloEchoSubscriptionLink };

const echoClient: Echo<'pusher'> = new Echo({
 broadcaster: 'pusher',
 key: import.meta.env.VITE_PUSHER_APP_KEY,
 wsHost: import.meta.env.VITE_PUSHER_HOST,
 wsPort: import.meta.env.VITE_PUSHER_PORT,
 forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
 encrypted: (import.meta.env.VITE_PUSHER_ENCRYPTED ?? 'true') === 'true',
 disableStats: true,
 cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER,
 enabledTransports:
 import.meta.env.VITE_PUSHER_SCHEME === 'http' ? ['ws'] : ['ws', 'wss'],
 bearerToken: keycloakInstance.token,
});