Upgrade to urql v4

- removes the deprecated exchanges that are built into the client now - adds the new mandatory properties to the `OperationResult` type
gadget-inc · Jun 22, 2023 · b900bc2 · b900bc2
1 parent aef4344
commit b900bc2
Show file tree

Hide file tree

Showing 15 changed files with 164 additions and 106 deletions.
diff --git a/packages/api-client-core/package.json b/packages/api-client-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gadgetinc/api-client-core",
-  "version": "0.13.13",
+  "version": "0.13.14",
   "source": "src/index.ts",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -20,16 +20,15 @@
   },
   "dependencies": {
     "@opentelemetry/api": "^1.4.0",
-    "@urql/core": "^3.0.1",
-    "@urql/exchange-multipart-fetch": "^1.0.1",
-    "cross-fetch": "^3.0.6",
+    "@urql/core": "^4.0.10",
+    "cross-fetch": "^3.1.5",
     "gql-query-builder": "^3.7.2",
     "graphql": "~16.6.0",
-    "graphql-ws": "^5.5.5",
-    "isomorphic-ws": "^4.0.1",
+    "graphql-ws": "^5.13.1",
+    "isomorphic-ws": "^5.0.0",
     "lodash.clonedeep": "^4.5.0",
     "lodash.isequal": "^4.5.0",
-    "ws": "^8.11.0"
+    "ws": "^8.13.0"
   },
   "devDependencies": {
     "@types/lodash.clonedeep": "^4.5.6",

diff --git a/packages/api-client-core/spec/support.spec.ts b/packages/api-client-core/spec/support.spec.ts
@@ -16,6 +16,8 @@ describe("support utilities", () => {
           {
             operation: null as any,
             data: { foo: { bar: "baz" } },
+            stale: false,
+            hasNext: false,
           },
           ["foo", "bar"]
         )
@@ -29,6 +31,8 @@ describe("support utilities", () => {
             operation: null as any,
             data: null,
             error: new CombinedError({ networkError: new Error("foobar") }),
+            stale: false,
+            hasNext: false,
           },
 
           ["foo", "bar"]
@@ -43,6 +47,8 @@ describe("support utilities", () => {
             operation: null as any,
             data: null,
             error: new CombinedError({ networkError: new Error("foobar") }),
+            stale: false,
+            hasNext: false,
           },
 
           ["foo", "bar"]
@@ -60,6 +66,8 @@ describe("support utilities", () => {
             data: null,
             // @ts-expect-error an array of network errors doesn't match urql's types, but we've observed it at runtime
             error: new CombinedError({ networkError: [new Error("foo"), new Error("foo")] }),
+            stale: false,
+            hasNext: false,
           },
 
           ["foo", "bar"]
@@ -77,6 +85,8 @@ describe("support utilities", () => {
             operation: null as any,
             data: null,
             error: new CombinedError({ graphQLErrors: [new Error("foo")] }),
+            stale: false,
+            hasNext: false,
           },
 
           ["foo", "bar"]
@@ -91,6 +101,8 @@ describe("support utilities", () => {
             operation: null as any,
             data: null,
             error: new CombinedError({ graphQLErrors: [new Error("foo"), "bar"] }),
+            stale: false,
+            hasNext: false,
           },
 
           ["foo", "bar"]
@@ -108,6 +120,8 @@ describe("support utilities", () => {
             operation: null as any,
             data: null,
             error: new CombinedError({ graphQLErrors: [new GraphQLError("inner graphql error")] }),
+            stale: false,
+            hasNext: false,
           },
 
           ["foo", "bar"]
@@ -122,6 +136,8 @@ describe("support utilities", () => {
             operation: null as any,
             data: null,
             error: new CombinedError({ response: { whatever: true } }),
+            stale: false,
+            hasNext: false,
           },
 
           ["foo", "bar"]
@@ -138,6 +154,8 @@ describe("support utilities", () => {
             operation: null as any,
             data: null,
             error: new CombinedError({ graphQLErrors: [new GraphQLError("inner graphql error")] }),
+            stale: false,
+            hasNext: false,
           },
           ["foo", "bar"]
         )
@@ -150,6 +168,8 @@ describe("support utilities", () => {
           operation: null as any,
           data: undefined,
           error: undefined,
+          stale: false,
+          hasNext: false,
         },
         ["foo", "bar"]
       );
@@ -194,6 +214,8 @@ describe("support utilities", () => {
           {
             operation: null as any,
             data: { createWidget: { success: true, errors: null, widget: { bar: "baz" } } },
+            stale: false,
+            hasNext: false,
           },
           ["createWidget"]
         )
@@ -212,6 +234,8 @@ describe("support utilities", () => {
                 widget: null,
               },
             },
+            stale: false,
+            hasNext: false,
           },
 
           ["createWidget"]
@@ -231,6 +255,8 @@ describe("support utilities", () => {
                 widget: null,
               },
             },
+            stale: false,
+            hasNext: false,
           },
 
           ["createWidget"]
@@ -266,6 +292,8 @@ describe("support utilities", () => {
                 widget: null,
               },
             },
+            stale: false,
+            hasNext: false,
           },
           ["createWidget"]
         );
@@ -302,6 +330,8 @@ describe("support utilities", () => {
                 widget: null,
               },
             },
+            stale: false,
+            hasNext: false,
           },
           ["createWidget"]
         );

diff --git a/packages/api-client-core/src/GadgetConnection.ts b/packages/api-client-core/src/GadgetConnection.ts
@@ -1,6 +1,5 @@
 import type { ClientOptions, RequestPolicy } from "@urql/core";
-import { Client, cacheExchange, dedupExchange, subscriptionExchange } from "@urql/core";
-import { multipartFetchExchange } from "@urql/exchange-multipart-fetch";
+import { Client, cacheExchange, fetchExchange, subscriptionExchange } from "@urql/core";
 import fetchPolyfill from "cross-fetch";
 import type { ExecutionResult } from "graphql";
 import type { Sink, Client as SubscriptionClient, ClientOptions as SubscriptionClientOptions } from "graphql-ws";
@@ -100,7 +99,7 @@ export class GadgetConnection {
     } else {
       this._fetchImplementation = fetchPolyfill;
     }
-    this.websocketImplementation = options.websocketImplementation ?? WebSocket;
+    this.websocketImplementation = options.websocketImplementation ?? globalThis?.WebSocket ?? WebSocket;
     this.websocketsEndpoint = options.websocketsEndpoint ?? options.endpoint + "/batch";
     this.websocketsEndpoint = this.websocketsEndpoint.replace(/^http/, "ws");
     this.environment = options.environment ?? "Development";
@@ -214,10 +213,11 @@ export class GadgetConnection {
           requestPolicy: "network-only", // skip any cached data during transactions
           exchanges: [
             subscriptionExchange({
-              forwardSubscription(operation) {
+              forwardSubscription(request) {
+                const input = { ...request, query: request.query || "" };
                 return {
                   subscribe: (sink) => {
-                    const dispose = subscriptionClient!.subscribe(operation, sink as Sink<ExecutionResult>);
+                    const dispose = subscriptionClient!.subscribe(input, sink as Sink<ExecutionResult>);
                     return {
                       unsubscribe: dispose,
                     };
@@ -328,20 +328,21 @@ export class GadgetConnection {
   }
 
   private newBaseClient() {
-    const exchanges = [dedupExchange];
+    const exchanges = [];
 
     // apply urql's default caching behaviour when client side (but skip it server side)
     if (typeof window != "undefined") {
       exchanges.push(cacheExchange);
     }
 
     exchanges.push(
-      multipartFetchExchange,
+      fetchExchange,
       subscriptionExchange({
-        forwardSubscription: (operation) => {
+        forwardSubscription: (request) => {
           return {
             subscribe: (sink) => {
-              const dispose = this.baseSubscriptionClient.subscribe(operation, sink as Sink<ExecutionResult>);
+              const input = { ...request, query: request.query || "" };
+              const dispose = this.baseSubscriptionClient.subscribe(input, sink as Sink<ExecutionResult>);
               return {
                 unsubscribe: dispose,
               };

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -19,9 +19,9 @@
     "prerelease": "gitpkg publish"
   },
   "dependencies": {
-    "@gadgetinc/api-client-core": "^0.13.10",
+    "@gadgetinc/api-client-core": "^0.13.14",
     "deep-equal": "^2.2.0",
-    "urql": "^3.0.3"
+    "urql": "^4.0.4"
   },
   "devDependencies": {
     "@gadgetinc/api-client-core": "workspace:*",
@@ -30,7 +30,7 @@
     "@types/lodash": "^4.14.191",
     "@types/react": "^18.2.9",
     "@types/react-dom": "^18.2.4",
-    "@urql/core": "^3.0.1",
+    "@urql/core": "^4.0.10",
     "conditional-type-checks": "^1.0.6",
     "graphql": "16.5.0",
     "lodash": "^4.17.21",

diff --git a/packages/react/spec/useAction.spec.tsx b/packages/react/spec/useAction.spec.tsx
@@ -121,6 +121,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -173,6 +175,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -216,6 +220,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -254,6 +260,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -289,6 +297,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -336,6 +346,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -364,6 +376,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {

diff --git a/packages/react/spec/useBulkAction.spec.ts b/packages/react/spec/useBulkAction.spec.ts
@@ -84,6 +84,8 @@ describe("useBulkAction", () => {
           ],
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -132,6 +134,8 @@ describe("useBulkAction", () => {
           widgets: null,
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -169,6 +173,8 @@ describe("useBulkAction", () => {
           ],
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {

diff --git a/packages/react/spec/useFindBy.spec.ts b/packages/react/spec/useFindBy.spec.ts
@@ -58,6 +58,8 @@ describe("useFindBy", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     expect(result.current[0].data!.id).toEqual("123");
@@ -87,6 +89,8 @@ describe("useFindBy", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     expect(result.current[0].data).toBeFalsy();
@@ -115,6 +119,8 @@ describe("useFindBy", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     const data = result.current[0].data;