fix: handle uncaught errors, support timeout attr (#13)

marko-js · Jul 26, 2023 · 5479d3a · 5479d3a
1 parent 7e4d800
commit 5479d3a
Show file tree

Hide file tree

Showing 26 changed files with 302 additions and 11 deletions.
diff --git a/README.md b/README.md
@@ -147,6 +147,10 @@ Any variables to pass to the query.
 
 The cache policy to use with this query request.
 
+#### `timeout`
+
+A time in milliseconds after which the query will be aborted and resolve to a timeout error.
+
 #### `@then|results, revalidate|`
 
 The content to display on query completion. The results object consists of:

diff --git a/...nts/gql-query/__tests__/__snapshots__/client-only-timeout/renders.expected/loading.0.html b/...nts/gql-query/__tests__/__snapshots__/client-only-timeout/renders.expected/loading.0.html
diff --git a/...nts/gql-query/__tests__/__snapshots__/client-only-timeout/renders.expected/loading.1.html b/...nts/gql-query/__tests__/__snapshots__/client-only-timeout/renders.expected/loading.1.html
@@ -0,0 +1 @@
+<div />
diff --git a/...nts/gql-query/__tests__/__snapshots__/client-only-timeout/renders.expected/loading.2.html b/...nts/gql-query/__tests__/__snapshots__/client-only-timeout/renders.expected/loading.2.html
@@ -0,0 +1,5 @@
+<div>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
diff --git a/...ents/gql-query/__tests__/__snapshots__/isomorphic-timeout/renders.expected/loading.0.html b/...ents/gql-query/__tests__/__snapshots__/isomorphic-timeout/renders.expected/loading.0.html
@@ -0,0 +1,5 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
diff --git a/...ents/gql-query/__tests__/__snapshots__/isomorphic-timeout/renders.expected/loading.1.html b/...ents/gql-query/__tests__/__snapshots__/isomorphic-timeout/renders.expected/loading.1.html
@@ -0,0 +1,13 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
diff --git a/...ents/gql-query/__tests__/__snapshots__/isomorphic-timeout/renders.expected/loading.2.html b/...ents/gql-query/__tests__/__snapshots__/isomorphic-timeout/renders.expected/loading.2.html
@@ -0,0 +1,9 @@
+<div>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
diff --git a/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.0.html b/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.0.html
@@ -0,0 +1,5 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
diff --git a/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.1.html b/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.1.html
@@ -0,0 +1,13 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
diff --git a/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.2.html b/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.2.html
@@ -0,0 +1,9 @@
+<div>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
diff --git a/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.3.html b/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.3.html
@@ -0,0 +1,5 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
diff --git a/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.4.html b/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.4.html
@@ -0,0 +1,13 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
diff --git a/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.5.html b/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.5.html
@@ -0,0 +1,9 @@
+<div>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
diff --git a/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.6.html b/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.6.html
@@ -0,0 +1,13 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
diff --git a/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.7.html b/...nts/gql-query/__tests__/__snapshots__/server-only-timeout/renders.expected/loading.7.html
@@ -0,0 +1,9 @@
+<div>
+  <span>
+    TimeoutError: Timed out after 1ms
+  </span>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
diff --git a/src/components/gql-query/__tests__/fixtures/client-only-timeout/components/app.marko b/src/components/gql-query/__tests__/fixtures/client-only-timeout/components/app.marko
@@ -0,0 +1,21 @@
+import { gql } from "../../../../../../index";
+static const QUERY = gql`
+  query($name: String) {
+    hello(name: $name)
+  }
+`;
+
+class {
+  onCreate() {
+    this.state = { mounted: false }
+  }
+  onMount() {
+    this.state = { mounted: true }
+  }
+}
+
+<if(state.mounted)>
+  <gql-query query=QUERY variables={ name: "John" } timeout=1>
+    <@then|{ error }|><span>${error}</span></@then>
+  </gql-query>
+</if>
diff --git a/src/components/gql-query/__tests__/fixtures/client-only-timeout/index.marko b/src/components/gql-query/__tests__/fixtures/client-only-timeout/index.marko
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple Example</title>
+  <esbuild-assets/>
+</head>
+<body>
+  <gql-client url=input.graphqlURL />
+  <app />
+</body>
+</html>
diff --git a/src/components/gql-query/__tests__/fixtures/isomorphic-timeout/components/app.marko b/src/components/gql-query/__tests__/fixtures/isomorphic-timeout/components/app.marko
@@ -0,0 +1,11 @@
+import { gql } from "../../../../../../index";
+static const QUERY = gql`
+  query($name: String) {
+    hello(name: $name)
+  }
+`;
+class {}
+
+<gql-query query=QUERY variables={ name: "John" } timeout=1>
+  <@then|{ error }|><span>${error}</span></@then>
+</gql-query>
diff --git a/src/components/gql-query/__tests__/fixtures/isomorphic-timeout/index.marko b/src/components/gql-query/__tests__/fixtures/isomorphic-timeout/index.marko
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple Example</title>
+  <esbuild-assets/>
+</head>
+<body>
+  <gql-client url=input.graphqlURL />
+  <app />
+</body>
+</html>
diff --git a/src/components/gql-query/__tests__/fixtures/server-only-timeout/components/app.marko b/src/components/gql-query/__tests__/fixtures/server-only-timeout/components/app.marko
@@ -0,0 +1,10 @@
+import { gql } from "../../../../../../index";
+static const QUERY = gql`
+  query($name: String) {
+    hello(name: $name)
+  }
+`;
+
+<gql-query query=QUERY variables={ name: "John" } timeout=1>
+  <@then|{ error }|><span>${error}</span></@then>
+</gql-query>
diff --git a/src/components/gql-query/__tests__/fixtures/server-only-timeout/index.marko b/src/components/gql-query/__tests__/fixtures/server-only-timeout/index.marko
@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Simple Example</title>
+  <esbuild-assets/>
+</head>
+<body>
+  <gql-client url=input.graphqlURL />
+  <app />
+</body>
+</html>
diff --git a/src/components/gql-query/__tests__/server.test.ts b/src/components/gql-query/__tests__/server.test.ts
@@ -11,6 +11,11 @@ describe(
   fixture(path.join(__dirname, "fixtures/client-only-variables"))
 );
 
+describe(
+  "client-only-timeout",
+  fixture(path.join(__dirname, "fixtures/client-only-timeout"))
+);
+
 describe("isomorphic", fixture(path.join(__dirname, "fixtures/isomorphic")));
 describe(
   "isomorphic-placeholder",
@@ -20,6 +25,10 @@ describe(
   "isomorphic-variables",
   fixture(path.join(__dirname, "fixtures/isomorphic-variables"))
 );
+describe(
+  "isomorphic-timeout",
+  fixture(path.join(__dirname, "fixtures/isomorphic-timeout"))
+);
 
 describe("server-only", fixture(path.join(__dirname, "fixtures/server-only")));
 describe(
@@ -30,6 +39,10 @@ describe(
   "server-only-variables",
   fixture(path.join(__dirname, "fixtures/server-only-variables"))
 );
+describe(
+  "server-only-timeout",
+  fixture(path.join(__dirname, "fixtures/server-only-timeout"))
+);
 
 describe(
   "update-variables",

diff --git a/src/components/gql-query/components/gql-query-client/index.marko b/src/components/gql-query/components/gql-query-client/index.marko
@@ -2,31 +2,75 @@ import { pipe, subscribe } from "wonka";
 import { getClient, hydrateQuery } from "../../../../client";
 import readyLookup from "../../ready-lookup";
 class {
-  onCreate({ data, error, opKey }) {
-    this.state = { data, error, fetching: false };
+  onCreate(input) {
+    let { data, error, opKey } = input;
+    const state = { data, error, fetching: false };
     this.mounted = false;
 
-    if (typeof document !== "undefined" && opKey) {
-      hydrateQuery(opKey, data, error);
-      readyLookup[this.id]();
+    if (typeof document === "undefined") {
+      this.isSSR = true;
+
+      if (error) {
+        input.toJSON = () => ({
+          ...input,
+          error: {
+            _: true,
+            name: error.name,
+            message: error.message,
+          },
+        })
+      }
+    } else {
+      if (error && error._) {
+        state.error = new Error(error.message);
+        state.error.name = error.name;
+        error = state.error;
+      }
+
+      if (opKey) {
+        hydrateQuery(opKey, data, error);
+      }
+
+      const ready = readyLookup[this.id];
+      if (ready) {
+        this.isSSR = true;
+        ready();
+      } else {
+        this.isSSR = false;
+      }
     }
+
+    this.state = state;
   }
-  onInput(input) {
-    if (!input.opKey) {
-      this.once(this.mounted ? "update" : "mount", () => this.doQuery());
+  onInput() {
+    if (this.isSSR) {
+      this.isSSR = false;
+      return;
     }
+
+    this.once(this.mounted ? "update" : "mount", () => this.doQuery());
   }
   onMount() {
     this.mounted = true;
   }
   onDestroy() {
     this.stopQuery();
+    this.stopTimeout();
   }
   stopQuery() {
-    this.unsubscribe && this.unsubscribe();
-    this.unsubscribe = undefined;
+    if (this.unsubscribe) {
+      this.unsubscribe();
+      this.unsubscribe = undefined;
+    }
+  }
+  stopTimeout() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = undefined;
+    }
   }
   doQuery(options) {
+    this.stopTimeout();
     this.stopQuery();
     this.state.fetching = true;
     this.unsubscribe = pipe(
@@ -35,11 +79,29 @@ class {
         ...options,
       }),
       subscribe(({ data, error }) => {
+        this.stopTimeout();
         this.state.data = data;
         this.state.error = error;
         this.state.fetching = false;
       })
     ).unsubscribe;
+
+    let timeout = this.input.timeout;
+    if (timeout == null) {
+      timeout = 10000;
+    }
+
+    if (timeout > 0) {
+      this.timeoutId = setTimeout(() => {
+        this.stopQuery();
+        const err = new Error("Timed out after " + timeout + "ms");
+        err.code = "ERR_AWAIT_TIMEDOUT";
+        err.name = "TimeoutError";
+        this.state.data = undefined;
+        this.state.error = err;
+        this.state.fetching = false;
+      }, timeout);
+    }
   }
 }
 

diff --git a/src/components/gql-query/impl/browser.marko b/src/components/gql-query/impl/browser.marko
@@ -7,6 +7,7 @@ import readyLookup from "../ready-lookup";
     query=input.query
     variables=input.variables
     requestPolicy=input.requestPolicy
+    timeout=input.timeout
     then=input.then
     placeholder=input.placeholder
   />