upgrading apollo client to latest version for unsupported transport package with websocket subscriptions

Describe the bug

apollographql/subscriptions-transport-ws is not supported, nor maintained. Please, use https://github.com/enisdenjo/graphql-ws.

To Reproduce using websocket based subscription queries

Expected behavior not working and suggests switching graphql-ws which latest version of apollo-client uses

Environment:

- @angular/[e-mail]
- @angular/[e-mail]
- @apollo/[e-mail]
- [e-mail]
- [e-mail]
- [e-mail]

Additional context

[neaplus]

Subscription queries by using graphql-ws with apollo-angular@3x and angular@13x

package.json

"dependencies": {
...
    "@angular/core": "~13.x",
    "@apollo/client": "3.6.8",
    "apollo-angular": "^3.0.1",
    "graphql": "^16",
    "graphql-ws": "5.9.0",
...
},

graphql.module.ts

import { NgModule } from '@angular/core';
import { ApolloModule, APOLLO_OPTIONS } from 'apollo-angular';
import { HttpLink } from 'apollo-angular/http';
import { split, ApolloClientOptions, InMemoryCache } from '@apollo/client/core';
import { getMainDefinition } from '@apollo/client/utilities';
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from 'graphql-ws';

@NgModule({
    exports: [ApolloModule],
    providers: [
        {
            provide: APOLLO_OPTIONS,
            useFactory(httpLink: HttpLink): ApolloClientOptions<any> {
                // Create an http link:
                const http = httpLink.create({
                    uri: 'http://localhost:3000/graphql',
                });
                // Create a websocket link:
                const ws = new GraphQLWsLink(
                    createClient({
                        url: 'ws://localhost:8420/graphql',
                    }),
                );

                // using the ability to split links, you can send data to each link
                // depending on what kind of operation is being sent
                const link = split(
                    ({ query }) => {
                        const call = getMainDefinition(query);
                        console.log('GraphQL call > ', call);
                        return (call.kind === 'OperationDefinition' && call.operation === 'subscription');
                    },
                    ws,
                    http,
                );

                return { link, cache: new InMemoryCache(), };
            },
            deps: [HttpLink],
        },
    ],
})
export class GraphQLModule { }

mysubscriptiongql.ts

import { Injectable } from '@angular/core';
import { gql, Subscription } from 'apollo-angular';

@Injectable({
    providedIn: 'root',
})
export class MySubscriptionGQL extends Subscription {
    document = gql`
      subscription {
        msg
      }
    `;
}

sample.component.ts

import { Component, OnInit, ViewEncapsulation } from '@angular/core';
import { Apollo, gql } from 'apollo-angular';
import { MySubscriptionGQL } from './mysubscriptiongql';

@Component({})
export class SampleComponent implements OnInit {

    constructor(private apollo: Apollo, private mySubscriptionGQL: MySubscriptionGQL) { }

    ngOnInit(): void {
        // 1. using apollo client directly
        this.apollo.subscribe({
            query: gql`subscription { msg }`,
        }).subscribe((result) => {
            console.log('apollo-client', result);
        });

        // 2. using apollo-angular Subscription definition
        this.mySubscriptionGQL.subscribe().subscribe((result) => {
            console.log('subscription-gql', result);
        });
    }
}

[neaplus]

indeed, it works 🤌 thanks dude. I’ll drop a simple sample here as well in case of someone needs, since It’s not documented.