Merge pull request #4886 from rmosolgo/add-urql-actioncable-client

rmosolgo · web-flow · commit 8d8a10e04e2f · 2024-03-20T11:02:48.000-04:00
Add urql actioncable client
diff --git a/guides/javascript_client/urql_subscriptions.md b/guides/javascript_client/urql_subscriptions.md
@@ -8,7 +8,9 @@ desc: GraphQL subscriptions with GraphQL-Ruby and urql
 index: 4
 ---
 
-GraphQL-Ruby currently supports using `urql` with the {% internal_link "Pusher implementation", "/subscriptions/pusher_implementation" %}. For example:
+GraphQL-Ruby currently supports using `urql` with the {% internal_link "ActionCable", "/subscriptions/action_cable_implementation" %} and {% internal_link "Pusher implementation", "/subscriptions/pusher_implementation" %}.
+
+## Pusher
 
 ```js
 import SubscriptionExchange from "graphql-ruby-client/subscriptions/SubscriptionExchange"
@@ -29,5 +31,24 @@ const client = new Client({
 });
 ```
 
+## ActionCable
+
+```js
+import { createConsumer } from "@rails/actioncable";
+import SubscriptionExchange from "graphql-ruby-client/subscriptions/SubscriptionExchange"
+
+const actionCable = createConsumer('ws://127.0.0.1:3000/cable');
+const forwardToActionCable = SubscriptionExchange.create({ consumer: actionCable })
+
+const client = new Client({
+  url: '/graphql',
+  exchanges: [
+    ...defaultExchanges,
+    subscriptionExchange({
+      forwardSubscription: forwardToActionCable
+    }),
+  ],
+});
+```
 
 Want to use `urql` with another subscription backend? Please {% open_an_issue "Using urql with ..." %}.
diff --git a/javascript_client/src/subscriptions/SubscriptionExchange.ts b/javascript_client/src/subscriptions/SubscriptionExchange.ts
@@ -1,83 +1,94 @@
 import Pusher from "pusher-js"
 import Urql from "urql"
+import { Consumer, Subscription } from "@rails/actioncable"
 
 type ForwardCallback = (...args: any[]) => void
 
 const SubscriptionExchange = {
-  create(options: { pusher: Pusher }) {
-    const pusher = options.pusher
-    return function(operation: Urql.Operation) {
-      // urql will call `.subscribed` on the returned object:
-      // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L68-L73
-      // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L82-L97
-      return {
-        subscribe: ({next, error, complete}: { next: ForwardCallback, error: ForwardCallback, complete: ForwardCallback}) => {
-          // Somehow forward the operation to be POSTed to the server,
-          // I don't see an option for passing this on to the `fetchExchange`
-          const fetchBody = JSON.stringify({
-            query: operation.query,
-            variables: operation.variables,
-          })
-          var pusherChannelName: string
-          const subscriptionId = "" + operation.key
-          var fetchOptions = operation.context.fetchOptions
-          if (typeof fetchOptions === "function") {
-            fetchOptions = fetchOptions()
-          } else if (fetchOptions == null) {
-            fetchOptions = {}
-          }
+  create(options: { pusher?: Pusher, consumer?: Consumer, channelName?: string }) {
+    if (options.pusher) {
+      return createPusherSubscription(options.pusher)
+    } else if (options.consumer) {
+      return createUrqlActionCableSubscription(options.consumer, options?.channelName)
+    } else {
+      throw new Error("Either `pusher: ...` or `consumer: ...` is required.")
+    }
+  }
+}
 
-          const headers = {
-            ...(fetchOptions.headers),
-            ...{
-              'Content-Type': 'application/json',
-              'X-Subscription-ID': subscriptionId
-            }
-          }
 
-          const defaultFetchOptions = { method: "POST" }
-          const mergedFetchOptions = {
-            ...defaultFetchOptions,
-            ...fetchOptions,
-            body: fetchBody,
-            headers: headers,
+function createPusherSubscription(pusher: Pusher) {
+  return function(operation: Urql.Operation) {
+    // urql will call `.subscribed` on the returned object:
+    // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L68-L73
+    // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L82-L97
+    return {
+      subscribe: ({next, error, complete}: { next: ForwardCallback, error: ForwardCallback, complete: ForwardCallback}) => {
+        // Somehow forward the operation to be POSTed to the server,
+        // I don't see an option for passing this on to the `fetchExchange`
+        const fetchBody = JSON.stringify({
+          query: operation.query,
+          variables: operation.variables,
+        })
+        var pusherChannelName: string
+        const subscriptionId = "" + operation.key
+        var fetchOptions = operation.context.fetchOptions
+        if (typeof fetchOptions === "function") {
+          fetchOptions = fetchOptions()
+        } else if (fetchOptions == null) {
+          fetchOptions = {}
+        }
+
+        const headers = {
+          ...(fetchOptions.headers),
+          ...{
+            'Content-Type': 'application/json',
+            'X-Subscription-ID': subscriptionId
           }
-          const fetchFn = operation.context.fetch || fetch
-          fetchFn(operation.context.url, mergedFetchOptions)
-            .then((fetchResult) => {
-              // Get the server-provided subscription ID
-              pusherChannelName = fetchResult.headers.get("X-Subscription-ID") as string
-              // Set up a subscription to Pusher, forwarding updates to
-              // the `next` function provided by urql
-              const pusherChannel = pusher.subscribe(pusherChannelName)
-              pusherChannel.bind("update", (payload: {result: object, more: boolean}) => {
-                // Here's an update to this subscription,
-                // pass it on:
-                if (payload.result) {
-                  next(payload.result)
-                }
-                // If the server signals that this is the end,
-                // then unsubscribe the client:
-                if (!payload.more) {
-                  complete()
-                }
-              })
-              // Continue processing the initial result for the subscription
-              return fetchResult.json()
-            })
-            .then((jsonResult) => {
-              // forward the initial result to urql
-              next(jsonResult)
+        }
+
+        const defaultFetchOptions = { method: "POST" }
+        const mergedFetchOptions = {
+          ...defaultFetchOptions,
+          ...fetchOptions,
+          body: fetchBody,
+          headers: headers,
+        }
+        const fetchFn = operation.context.fetch || fetch
+        fetchFn(operation.context.url, mergedFetchOptions)
+          .then((fetchResult) => {
+            // Get the server-provided subscription ID
+            pusherChannelName = fetchResult.headers.get("X-Subscription-ID") as string
+            // Set up a subscription to Pusher, forwarding updates to
+            // the `next` function provided by urql
+            const pusherChannel = pusher.subscribe(pusherChannelName)
+            pusherChannel.bind("update", (payload: {result: object, more: boolean}) => {
+              // Here's an update to this subscription,
+              // pass it on:
+              if (payload.result) {
+                next(payload.result)
+              }
+              // If the server signals that this is the end,
+              // then unsubscribe the client:
+              if (!payload.more) {
+                complete()
+              }
             })
-            .catch(error)
+            // Continue processing the initial result for the subscription
+            return fetchResult.json()
+          })
+          .then((jsonResult) => {
+            // forward the initial result to urql
+            next(jsonResult)
+          })
+          .catch(error)
 
-          // urql will call `.unsubscribe()` if it's returned here:
-          // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L102
-          return {
-            unsubscribe: () => {
-              // When requested by urql, disconnect from this channel
-              pusherChannelName && pusher.unsubscribe(pusherChannelName)
-            }
+        // urql will call `.unsubscribe()` if it's returned here:
+        // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L102
+        return {
+          unsubscribe: () => {
+            // When requested by urql, disconnect from this channel
+            pusherChannelName && pusher.unsubscribe(pusherChannelName)
           }
         }
       }
@@ -86,4 +97,42 @@ const SubscriptionExchange = {
 }
 
 
+
+function createUrqlActionCableSubscription(consumer: Consumer, channelName: string = "GraphqlChannel") {
+  return function(operation: Urql.Operation) {
+    let subscription: Subscription | null = null
+    // urql will call `.subscribed` on the returned object:
+    // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L68-L73
+    // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L82-L97
+    return {
+      subscribe: ({next, error, complete}: { next: ForwardCallback, error: ForwardCallback, complete: ForwardCallback}) => {
+        subscription = consumer.subscriptions.create(channelName, {
+          connected() {
+            console.log(subscription)
+            subscription?.perform("execute", { query: operation.query, variables: operation.variables })
+          },
+          received(data: any) {
+            if (data?.result?.errors) {
+              error(data.errors)
+            }
+            if (data?.result?.data) {
+              next(data.result)
+            }
+            if (!data.more) {
+              complete()
+            }
+          }
+        } as any)
+        // urql will call `.unsubscribe()` if it's returned here:
+        // https://github.com/FormidableLabs/urql/blob/f89cfd06d9f14ae9cb3be10b21bd5cbd12ca275c/packages/core/src/exchanges/subscription.ts#L102
+        return {
+          unsubscribe: () => {
+            subscription?.unsubscribe()
+          }
+        }
+      }
+    }
+  }
+}
+
 export default SubscriptionExchange
diff --git a/javascript_client/src/subscriptions/__tests__/SubscriptionExchangeTest.ts b/javascript_client/src/subscriptions/__tests__/SubscriptionExchangeTest.ts
@@ -3,12 +3,13 @@ import Pusher from "pusher-js"
 import Urql from "urql"
 import {parse} from "graphql"
 import { nextTick } from "process"
+import { Consumer } from "@rails/actioncable"
 
 type MockChannel = {
   bind: (action: string, handler: Function) => void,
 }
 
-describe("SubscriptionExchange", () => {
+describe("SubscriptionExchange with Pusher", () => {
   var channelName = "1234"
   var log: any[]
   var pusher: any
@@ -99,3 +100,68 @@ describe("SubscriptionExchange", () => {
 
   })
 })
+
+describe("SubscriptionExchange with ActionCable", () => {
+  it("calls through to handlers", () => {
+    var handlers: any
+    var log: [string, any][]= []
+
+    var dummyActionCableConsumer = {
+      subscriptions: {
+        create: (channelName: string, newHandlers: any) => {
+          log.push(["create", channelName])
+          handlers = newHandlers
+          return {
+            perform: (evt: string, data: any) => {
+              log.push([evt, data])
+            },
+            unsubscribe: () => {
+              log.push(["unsubscribed", null])
+            }
+          }
+        }
+      }
+    }
+
+    var options = {
+      consumer: (dummyActionCableConsumer as unknown) as Consumer,
+      channelName: "CustomChannel"
+    }
+
+    var exchange = SubscriptionExchange.create(options);
+    var parsedQuery = parse("{ foo { bar } }")
+    var operation = {
+      query: parsedQuery,
+      variables: {},
+      context: {
+        url: "/graphql",
+        requestPolicy: "network-only",
+      },
+      kind: "subscription",
+    } as Urql.Operation
+
+    var subscriber = exchange(operation)
+    const next = (data: any) => { log.push(["next", data]) }
+    const error = (err: any) => { log.push(["error", err]) }
+    const complete = (data: any) => { log.push(["complete", data]) }
+    const subscription = subscriber.subscribe({ next, error, complete })
+
+
+    return new Promise((resolve, _reject) => {
+      nextTick(() => {
+        handlers.connected() // trigger the GraphQL send
+        handlers.received({ result: { data: { a: "1" } }, more: false })
+        subscription.unsubscribe()
+        const expectedLog = [
+          ["create", "CustomChannel"],
+          ["execute", { query: parsedQuery, variables: {} }],
+          ["next", { data: { a: "1" } }],
+          ["complete", undefined],
+          ["unsubscribed", null],
+        ]
+        expect(log).toEqual(expectedLog)
+        resolve(true)
+      })
+    })
+  })
+})
