Use outer references to channel instead of casting this

Author: rmosolgo

javascript_client/src/subscriptions/ActionCableLink.ts

@@ -1,5 +1,5 @@
 import { ApolloLink, Observable, FetchResult, Operation, NextLink } from "@apollo/client/core"
-import { Cable, Channel } from "actioncable"
+import { Cable } from "actioncable"
 import { print } from "graphql"
 
 type RequestResult = FetchResult<{ [key: string]: any; }, Record<string, any>, Record<string, any>>
@@ -25,13 +25,12 @@ class ActionCableLink extends ApolloLink {
     return new Observable((observer) => {
       var channelId = Math.round(Date.now() + Math.random() * 100000).toString(16)
       var actionName = this.actionName
-      var subscription = this.cable.subscriptions.create(Object.assign({},{
+      var channel = this.cable.subscriptions.create(Object.assign({},{
         channel: this.channelName,
         channelId: channelId
       }, this.connectionParams), {
         connected: function() {
-          // Broken since https://github.com/DefinitelyTyped/DefinitelyTyped/pull/52421 ??
-          ((this as unknown) as Channel).perform(
+          channel.perform(
             actionName,
             {
               query: operation.query ? print(operation.query) : null,
@@ -52,9 +51,8 @@ class ActionCableLink extends ApolloLink {
           }
         }
       })
-
       // Make the ActionCable subscription behave like an Apollo subscription
-      return Object.assign(subscription, {closed: false})
+      return Object.assign(channel, {closed: false})
     })
   }
 }

javascript_client/src/subscriptions/ActionCableSubscriber.ts

@@ -1,6 +1,6 @@
 import printer from "graphql/language/printer"
 import registry from "./registry"
-import { Cable, Channel } from "actioncable"
+import { Cable } from "actioncable"
 
 interface ApolloNetworkInterface {
   applyMiddlewares: Function
@@ -30,14 +30,12 @@ class ActionCableSubscriber {
     var networkInterface = this._networkInterface
     // unique-ish
     var channelId = Math.round(Date.now() + Math.random() * 100000).toString(16)
-
     var channel = this._cable.subscriptions.create({
       channel: "GraphqlChannel",
       channelId: channelId,
     }, {
       // After connecting, send the data over ActionCable
       connected: function() {
-        var _this = this
         // applyMiddlewares code is inspired by networkInterface internals
         var opts = Object.assign({}, networkInterface._opts)
         networkInterface
@@ -52,10 +50,8 @@ class ActionCableSubscriber {
               variables: variables,
               operationId: operationId,
               operationName: operationName,
-            }) as any
-            // This goes to the #execute method of the channel
-            // Broken since https://github.com/DefinitelyTyped/DefinitelyTyped/pull/52421
-            ((_this as unknown) as Channel).perform("execute", channelParams)
+            })
+            channel.perform("execute", channelParams)
           })
       },
       // Payload from ActionCable should have at least two keys:

javascript_client/src/subscriptions/__tests__/ActionCableLinkTest.ts

@@ -16,6 +16,7 @@ describe("ActionCableLink", () => {
     cable = {
       subscriptions: {
         create: function(_channelName: string, options: {connected: Function, received: Function}) {
+          var alreadyConnected = false
           var subscription = Object.assign(
             Object.create({
               perform: function(actionName: string, options: object) {
@@ -29,8 +30,15 @@ describe("ActionCableLink", () => {
           )
 
           subscription.connected = subscription.connected.bind(subscription)
+          var received = subscription.received
+          subscription.received = function(data: any) {
+            if (!alreadyConnected) {
+              alreadyConnected = true
+              subscription.connected()
+            }
+            received(data)
+          }
           subscription.__proto__.unsubscribe = subscription.__proto__.unsubscribe.bind(subscription)
-          subscription.connected()
           return subscription
         }
       }

javascript_client/src/subscriptions/createActionCableHandler.ts

@@ -1,4 +1,4 @@
-import { Cable, Channel } from "actioncable"
+import { Cable } from "actioncable"
 
 /**
  * Create a Relay Modern-compatible subscription handler.
@@ -20,7 +20,7 @@ function createActionCableHandler(options: ActionCableHandlerOptions) {
     var operations = options.operations
 
     // Register the subscription by subscribing to the channel
-    const subscription = cable.subscriptions.create({
+    const channel = cable.subscriptions.create({
       channel: "GraphqlChannel",
       channelId: channelId,
     }, {
@@ -41,10 +41,8 @@ function createActionCableHandler(options: ActionCableHandlerOptions) {
             query: operation.text
           }
         }
-        // `this.perform` stopped working after https://github.com/DefinitelyTyped/DefinitelyTyped/pull/52421
-        ((this as unknown) as Channel).perform('send', channelParams);
-
-        ((this as unknown) as Channel).perform("execute", channelParams)
+        channel.perform('send', channelParams)
+        channel.perform("execute", channelParams)
       },
       // This result is sent back from ActionCable.
       received: function(payload: { result: { errors: any[], data: object }, more: boolean}) {
@@ -66,7 +64,7 @@ function createActionCableHandler(options: ActionCableHandlerOptions) {
     // Return an object for Relay to unsubscribe with
     return {
       dispose: function() {
-        subscription.unsubscribe()
+        channel.unsubscribe()
       }
     }
   }