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 · May 16, 2023 · b9d3483 · b9d3483
1 parent 66c0ebd
commit b9d3483
Show file tree

Hide file tree

Showing 15 changed files with 142 additions and 87 deletions.
diff --git a/packages/api-client-core/package.json b/packages/api-client-core/package.json
@@ -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.7",
+    "cross-fetch": "^3.1.5",
     "gql-query-builder": "^3.7.2",
     "graphql": "^16.5.0",
     "graphql-ws": "^5.5.5",
-    "isomorphic-ws": "^4.0.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";
@@ -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
@@ -21,7 +21,7 @@
   "dependencies": {
     "@gadgetinc/api-client-core": "^0.13.4",
     "deep-equal": "^2.2.0",
-    "urql": "^3.0.3"
+    "urql": "^4.0.2"
   },
   "devDependencies": {
     "@testing-library/react": "^13.4.0",

diff --git a/packages/react/spec/useAction.spec.ts b/packages/react/spec/useAction.spec.ts
@@ -86,6 +86,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -138,6 +140,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -181,6 +185,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -219,6 +225,8 @@ describe("useAction", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     await act(async () => {
@@ -254,6 +262,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;

diff --git a/packages/react/spec/useFindMany.spec.ts b/packages/react/spec/useFindMany.spec.ts
@@ -57,6 +57,8 @@ describe("useFindMany", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     expect(result.current[0].data![0].id).toEqual("123");
@@ -96,6 +98,8 @@ describe("useFindMany", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     expect(result.current[0].data![0].id).toEqual("123");
@@ -130,6 +134,8 @@ describe("useFindMany", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     expect(result.current[0].data![0].id).toEqual("def");
@@ -161,6 +167,8 @@ describe("useFindMany", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     expect(result.current[0].data!.length).toEqual(0);
@@ -192,6 +200,8 @@ describe("useFindMany", () => {
           },
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     const beforeObject = result.current[0];

diff --git a/packages/react/spec/useFindOne.spec.ts b/packages/react/spec/useFindOne.spec.ts
@@ -51,6 +51,8 @@ describe("useFindOne", () => {
           email: "test@test.com",
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     expect(result.current[0].data!.id).toEqual("123");
@@ -72,6 +74,8 @@ describe("useFindOne", () => {
       data: {
         user: null,
       },
+      stale: false,
+      hasNext: false,
     });
 
     expect(result.current[0].data).toBeFalsy();
@@ -98,6 +102,8 @@ describe("useFindOne", () => {
           email: "test@test.com",
         },
       },
+      stale: false,
+      hasNext: false,
     });
 
     const beforeObject = result.current[0];