subscriptions with apollo + echo are not working

[kvelaro]

From this link suggestion https://lighthouse-php.com/6/subscriptions/client-implementations.html#apollo-for-laravel-echo
I followed to this repo: https://github.com/thekonz/apollo-lighthouse-subscription-link

Copied and builded without success

Modified a little to

import {ApolloClient, ApolloLink, InMemoryCache, HttpLink } from "@apollo/client/core";
import gql from "graphql-tag";
import Echo from 'laravel-echo';
import { createLighthouseSubscriptionLink } from "@thekonz/apollo-lighthouse-subscription-link";

import Pusher from 'pusher-js';
window.Pusher = Pusher;

const echoClient = window.Echo = new Echo({
    broadcaster: 'reverb',
    key: import.meta.env.VITE_REVERB_APP_KEY,
    wsHost: import.meta.env.VITE_REVERB_HOST,
    wsPort: import.meta.env.VITE_REVERB_PORT ?? 80,
    wssPort: import.meta.env.VITE_REVERB_PORT ?? 443,
    forceTLS: (import.meta.env.VITE_REVERB_SCHEME ?? 'https') === 'https',
    enabledTransports: ['ws', 'wss'],
});

const httpLink = new HttpLink({
    uri: '/graphql',
    // credentials: 'same-origin'
});

const client = new ApolloClient({
    link: ApolloLink.from([
        createLighthouseSubscriptionLink(echoClient),
        httpLink, // your existing http link to your graphql api
    ]),
    cache: new InMemoryCache(),
});

const subscriber = client
    .subscribe({
        query: gql`
      subscription articles($editor: ID) {
        articleUpdated(editor: $editor) {
          id
          title
        }
      }
    `,
    })
    .subscribe((article) => {
        console.log(article); // { id: 2, title: "New title" }
    });

// stop listening to events
// subscriber.unsubscribe()

So my question why would you give a link to stale/old repo whose code is outdated

I successfully connect to socket server, however my subscriptions are not working. Is there a working example somewhere ?

[kvelaro]

Author has committed that repo is no longer actual
thekonz/apollo-lighthouse-subscription-link#29

[spawnia]

@thekonz I just removed the link with e09a9d5.

[CMarzin]

@kvelaro are you still searching for a working apollo link for lighthouse v6 ? I use this one I tweaked from the https://github.com/thekonz/apollo-lighthouse-subscription-link

echoSubscriptionLink.ts

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