Merge pull request #268 from gadget-inc/optional-websocket

Support weird shopify extensions context

Author: airhorns

packages/api-client-core/spec/GadgetConnection.remote-ui.spec.ts

@@ -0,0 +1,17 @@
+/**
+ * @jest-environment ./spec/remote-ui-environment.ts
+ */
+jest.mock("isomorphic-ws", () => null); // mimic browser environment for remote-ui where the websocket global is not available
+import { GadgetConnection } from "../src/GadgetConnection.js";
+import { GadgetConnectionSharedSuite } from "./GadgetConnection-suite.js";
+
+describe("GadgetConnection in remote-ui", () => {
+  GadgetConnectionSharedSuite();
+
+  test("throws an error concerning missing websocket constructor as it is not available", async () => {
+    const connection = new GadgetConnection({ endpoint: "https://someapp.gadget.app" });
+    await expect(async () => await connection.transaction({}, async () => true)).rejects.toThrowErrorMatchingInlineSnapshot(
+      `"Can't use this GadgetClient for this subscription-based operation as there's no global WebSocket implementation available. Please pass one as the \`websocketImplementation\` option to the GadgetClient constructor."`
+    );
+  });
+});

packages/api-client-core/spec/remote-ui-environment.ts

@@ -0,0 +1,12 @@
+import { TestEnvironment } from "jest-environment-node";
+
+/**
+ * Implements an environment with only the stuff present in a remote-ui environment
+ * What that is isn't actually documented anywhere as best I can tell, but we do know there is no WebSocket global
+ * See https://github.com/Shopify/remote-ui */
+export default class RemoteUIEnvironment extends TestEnvironment {
+  async setup() {
+    await super.setup();
+    delete (this.global as any).WebSocket;
+  }
+}

packages/api-client-core/src/GadgetConnection.ts

@@ -73,14 +73,14 @@ export class GadgetConnection {
   private endpoint: string;
   private subscriptionClientOptions?: SubscriptionClientOptions;
   private websocketsEndpoint: string;
-  private websocketImplementation: any;
+  private websocketImplementation?: WebSocket;
   private _fetchImplementation: typeof globalThis.fetch;
   private environment: "Development" | "Production";
   private exchanges: Required<Exchanges>;
 
   // the base client using HTTP requests that non-transactional operations will use
   private baseClient: Client;
-  private baseSubscriptionClient: SubscriptionClient;
+  private baseSubscriptionClient?: SubscriptionClient;
 
   // the transactional websocket client that will be used inside a transaction block
   private currentTransaction: GadgetTransaction | null = null;
@@ -117,8 +117,6 @@ export class GadgetConnection {
 
     this.setAuthenticationMode(options.authenticationMode);
 
-    // the base client for subscriptions is lazy so we don't open unnecessary connections to the backend, and it reconnects to deal with network issues
-    this.baseSubscriptionClient = this.newSubscriptionClient({ lazy: true });
     this.baseClient = this.newBaseClient();
   }
 
@@ -266,7 +264,7 @@ export class GadgetConnection {
   };
 
   close() {
-    this.disposeClient(this.baseSubscriptionClient);
+    if (this.baseSubscriptionClient) this.disposeClient(this.baseSubscriptionClient);
     if (this.currentTransaction) {
       this.currentTransaction.close();
     }
@@ -352,7 +350,8 @@ export class GadgetConnection {
           return {
             subscribe: (sink) => {
               const input = { ...request, query: request.query || "" };
-              const dispose = this.baseSubscriptionClient.subscribe(input, sink as Sink<ExecutionResult>);
+
+              const dispose = this.getBaseSubscriptionClient().subscribe(input, sink as Sink<ExecutionResult>);
               return {
                 unsubscribe: dispose,
               };
@@ -374,6 +373,12 @@ export class GadgetConnection {
   }
 
   private newSubscriptionClient(overrides: GadgetSubscriptionClientOptions) {
+    if (!this.websocketImplementation) {
+      throw new Error(
+        "Can't use this GadgetClient for this subscription-based operation as there's no global WebSocket implementation available. Please pass one as the `websocketImplementation` option to the GadgetClient constructor."
+      );
+    }
+
     let url = this.websocketsEndpoint;
     if (overrides?.urlParams) {
       const params = new URLSearchParams();
@@ -503,6 +508,13 @@ export class GadgetConnection {
       maybePromise.catch((err: any) => console.error(`Error closing SubscriptionClient: ${err.message}`));
     }
   }
+
+  private getBaseSubscriptionClient() {
+    if (!this.baseSubscriptionClient) {
+      this.baseSubscriptionClient = this.newSubscriptionClient({ lazy: true });
+    }
+    return this.baseSubscriptionClient;
+  }
 }
 
 function processMaybeRelativeInput(input: RequestInfo | URL, endpoint: string): RequestInfo | URL {

packages/react/package.json

@@ -29,7 +29,7 @@
   },
   "dependencies": {
     "@gadgetinc/api-client-core": "^0.15.0",
-    "deep-equal": "^2.2.0",
+    "react-fast-compare": "^3.2.2",
     "urql": "^4.0.4"
   },
   "resolutions": {
@@ -39,7 +39,6 @@
     "@gadgetinc/api-client-core": "workspace:*",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
-    "@types/deep-equal": "^1.0.1",
     "@types/jest": "^29.5.2",
     "@types/lodash": "^4.14.191",
     "@types/node": "^18.0.0",

packages/react/src/useStructuralMemo.ts

@@ -1,5 +1,5 @@
-import deepEqual from "deep-equal";
 import { useRef } from "react";
+import deepEqual from "react-fast-compare";
 
 /**
  * Memoize and ensure a stable identity on a given value as long as it remains the same, structurally.