From 0035cdc1f54e6743cd983336e0dc40666f31cf73 Mon Sep 17 00:00:00 2001
From: Bill Min <nmin@ebay.com>
Date: Thu, 9 May 2024 22:59:23 -0400
Subject: [PATCH] feat: support multi client (#22)

* feat: support multi client
---
 README.md                                     | 14 ++++++
 src/__tests__/start.ts                        | 32 ++++++++----
 src/components/gql-client/marko-tag.json      |  8 +++
 .../renders.expected/loading.0.html           | 16 ++++++
 .../renders.expected/step-0.0.html            | 18 +++++++
 .../renders.expected/step-0.1.html            | 18 +++++++
 .../renders.expected/step-1.0.html            | 20 ++++++++
 .../renders.expected/step-1.1.html            | 20 ++++++++
 .../components/app.marko                      | 29 +++++++++++
 .../run-mutation-multi-client/index.marko     | 14 ++++++
 .../gql-mutation/__tests__/server.test.ts     |  8 +++
 src/components/gql-mutation/index.marko       |  4 +-
 src/components/gql-mutation/marko-tag.json    |  8 +++
 .../renders.expected/loading.0.html           |  0
 .../renders.expected/loading.1.html           |  7 +++
 .../renders.expected/loading.2.html           | 11 +++++
 .../renders.expected/loading.3.html           | 15 ++++++
 .../renders.expected/loading.0.html           | 15 ++++++
 .../renders.expected/loading.1.html           | 23 +++++++++
 .../renders.expected/loading.2.html           | 19 +++++++
 .../renders.expected/loading.3.html           | 27 ++++++++++
 .../renders.expected/loading.4.html           | 23 +++++++++
 .../renders.expected/loading.0.html           | 15 ++++++
 .../renders.expected/loading.1.html           | 23 +++++++++
 .../renders.expected/loading.2.html           | 19 +++++++
 .../renders.expected/loading.3.html           | 27 ++++++++++
 .../renders.expected/loading.4.html           | 23 +++++++++
 .../renders.expected/loading.0.html           | 15 ++++++
 .../renders.expected/loading.1.html           | 26 ++++++++++
 .../renders.expected/loading.2.html           | 22 +++++++++
 .../renders.expected/loading.3.html           | 30 ++++++++++++
 .../renders.expected/loading.4.html           | 26 ++++++++++
 .../renders.expected/step-0.0.html            | 32 ++++++++++++
 .../renders.expected/step-0.1.html            | 29 +++++++++++
 .../renders.expected/step-0.2.html            | 26 ++++++++++
 .../renders.expected/step-1.0.html            | 26 ++++++++++
 .../renders.expected/step-2.0.html            | 26 ++++++++++
 .../components/app.marko                      | 29 +++++++++++
 .../client-only-multi-client/index.marko      | 14 ++++++
 .../components/app.marko                      | 20 ++++++++
 .../isomorphic-multi-client/index.marko       | 14 ++++++
 .../components/app.marko                      | 18 +++++++
 .../server-only-multi-client/index.marko      | 14 ++++++
 .../components/app.marko                      | 37 ++++++++++++++
 .../update-variables-multi-client/index.marko | 14 ++++++
 .../gql-query/__tests__/server.test.ts        | 21 ++++++++
 src/components/gql-query/marko-tag.json       |  8 +++
 src/node_modules/@internal/client/browser.ts  | 49 ++++++++++++++-----
 src/node_modules/@internal/client/node.ts     | 24 ++++++---
 .../@internal/gql-query/browser.marko         |  1 +
 .../components/gql-query-client/index.marko   |  6 +--
 .../@internal/gql-query/node.marko            |  3 +-
 src/types.d.ts                                | 14 ++++--
 53 files changed, 963 insertions(+), 37 deletions(-)
 create mode 100644 src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/loading.0.html
 create mode 100644 src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-0.0.html
 create mode 100644 src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-0.1.html
 create mode 100644 src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-1.0.html
 create mode 100644 src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-1.1.html
 create mode 100644 src/components/gql-mutation/__tests__/fixtures/run-mutation-multi-client/components/app.marko
 create mode 100644 src/components/gql-mutation/__tests__/fixtures/run-mutation-multi-client/index.marko
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.0.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.1.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.2.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.3.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.0.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.1.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.2.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.3.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.4.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.0.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.1.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.2.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.3.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.4.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.0.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.1.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.2.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.3.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.4.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.0.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.1.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.2.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-1.0.html
 create mode 100644 src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-2.0.html
 create mode 100644 src/components/gql-query/__tests__/fixtures/client-only-multi-client/components/app.marko
 create mode 100644 src/components/gql-query/__tests__/fixtures/client-only-multi-client/index.marko
 create mode 100644 src/components/gql-query/__tests__/fixtures/isomorphic-multi-client/components/app.marko
 create mode 100644 src/components/gql-query/__tests__/fixtures/isomorphic-multi-client/index.marko
 create mode 100644 src/components/gql-query/__tests__/fixtures/server-only-multi-client/components/app.marko
 create mode 100644 src/components/gql-query/__tests__/fixtures/server-only-multi-client/index.marko
 create mode 100644 src/components/gql-query/__tests__/fixtures/update-variables-multi-client/components/app.marko
 create mode 100644 src/components/gql-query/__tests__/fixtures/update-variables-multi-client/index.marko

diff --git a/README.md b/README.md
index daaccec..4e07b57 100644
--- a/README.md
+++ b/README.md
@@ -102,6 +102,12 @@ This central Client manages all of our GraphQL requests and results.
 
 The url of the GraphQL server.
 
+#### `name`
+
+The name of Urql client. This is required when setting up multiple clients.
+
+> Cooresponding `name` need to be set in `<gql-query>` and/or `<gql-mutation>` as well.
+
 #### `fetch`
 
 This attribute allows you to pass a custom `fetch` implementation.
@@ -167,6 +173,10 @@ The content to display on query completion. The results object consists of:
 
 The loading state placeholder to use on initial render.
 
+#### `name`
+
+The name of cooresponding Urql client.
+
 ## `<gql-mutation|mutate, results|>`
 
 This tag performs graphql mutations. The content is rendered immediately on mount and provides the `mutate` method that can be used to trigger the mutation. `mutate` takes the variables as first argument and options as second argument.
@@ -214,6 +224,10 @@ The graphql query to perform.
 
 The cache policy to use with this mutation request.
 
+#### `name`
+
+The name of cooresponding Urql client.
+
 # Code of Conduct
 
 This project adheres to the [eBay Code of Conduct](./.github/CODE_OF_CONDUCT.md). By participating in this project you agree to abide by its terms.
diff --git a/src/__tests__/start.ts b/src/__tests__/start.ts
index b903f42..56c8736 100644
--- a/src/__tests__/start.ts
+++ b/src/__tests__/start.ts
@@ -25,23 +25,27 @@ const schema = buildSchema(`
 `);
 
 // The root provides a resolver function for each API endpoint
-const createRoot = () => {
+const createRoot = (contentPostfix = "", delay = 0) => {
   const messages: Array<string> = [];
   return {
-    hello: ({ name = "world" }) => {
-      return `Hello ${name}!`;
+    hello: async ({ name = "world" }) => {
+      await new Promise((r) => setTimeout(r, delay));
+      return `Hello ${name}!${contentPostfix}`;
     },
-    messages: () => {
+    messages: async () => {
+      await new Promise((r) => setTimeout(r, delay));
       return messages;
     },
-    addMessage: ({ text }: { text: string }) => {
+    addMessage: async ({ text }: { text: string }) => {
+      await new Promise((r) => setTimeout(r, delay));
       if (text) {
-        messages.push(text);
+        messages.push(text + contentPostfix);
       }
-      return text;
+      return text + contentPostfix;
     },
-    doError: () => {
-      throw new Error("Oh No");
+    doError: async () => {
+      await new Promise((r) => setTimeout(r, delay));
+      throw new Error("Oh No" + contentPostfix);
     },
   };
 };
@@ -56,6 +60,13 @@ export async function start(dir: string) {
       rootValue: createRoot(),
     }),
   );
+  app.use(
+    "/graphqlAlt",
+    createHandler({
+      schema: schema,
+      rootValue: createRoot("(Alt)", 100),
+    }),
+  );
   app.use(throttleMiddleware());
   app.use(markoExpress());
 
@@ -88,6 +99,9 @@ export async function start(dir: string) {
             graphqlURL: `http://localhost:${
               (server.address() as AddressInfo).port
             }/graphql`,
+            graphqlURLAlt: `http://localhost:${
+              (server.address() as AddressInfo).port
+            }/graphqlAlt`,
           });
         });
       }
diff --git a/src/components/gql-client/marko-tag.json b/src/components/gql-client/marko-tag.json
index 6a016b3..0dd1c32 100644
--- a/src/components/gql-client/marko-tag.json
+++ b/src/components/gql-client/marko-tag.json
@@ -16,6 +16,14 @@
       }
     ]
   },
+  "@name": {
+    "type": "string",
+    "autocomplete": [
+      {
+        "description": "A unique name for the resource"
+      }
+    ]
+  },
   "@fetch": {
     "type": "function",
     "autocomplete": [
diff --git a/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/loading.0.html b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/loading.0.html
new file mode 100644
index 0000000..ded8baf
--- /dev/null
+++ b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/loading.0.html
@@ -0,0 +1,16 @@
+<h1>
+  Messages
+</h1>
+<span />
+<span />
+<button>
+  Add
+</button>
+<h1>
+  Messages
+</h1>
+<span />
+<span />
+<button>
+  Add(alt)
+</button>
\ No newline at end of file
diff --git a/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-0.0.html b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-0.0.html
new file mode 100644
index 0000000..2dbd794
--- /dev/null
+++ b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-0.0.html
@@ -0,0 +1,18 @@
+<h1>
+  Messages
+</h1>
+<span />
+<span>
+  executing
+</span>
+<button>
+  Add
+</button>
+<h1>
+  Messages
+</h1>
+<span />
+<span />
+<button>
+  Add(alt)
+</button>
\ No newline at end of file
diff --git a/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-0.1.html b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-0.1.html
new file mode 100644
index 0000000..4ffabcc
--- /dev/null
+++ b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-0.1.html
@@ -0,0 +1,18 @@
+<h1>
+  Messages
+</h1>
+<span>
+  Hello
+</span>
+<span />
+<button>
+  Add
+</button>
+<h1>
+  Messages
+</h1>
+<span />
+<span />
+<button>
+  Add(alt)
+</button>
\ No newline at end of file
diff --git a/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-1.0.html b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-1.0.html
new file mode 100644
index 0000000..b7edd9e
--- /dev/null
+++ b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-1.0.html
@@ -0,0 +1,20 @@
+<h1>
+  Messages
+</h1>
+<span>
+  Hello
+</span>
+<span />
+<button>
+  Add
+</button>
+<h1>
+  Messages
+</h1>
+<span />
+<span>
+  executing
+</span>
+<button>
+  Add(alt)
+</button>
\ No newline at end of file
diff --git a/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-1.1.html b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-1.1.html
new file mode 100644
index 0000000..7c3d128
--- /dev/null
+++ b/src/components/gql-mutation/__tests__/__snapshots__/run-mutation-multi-client/renders.expected/step-1.1.html
@@ -0,0 +1,20 @@
+<h1>
+  Messages
+</h1>
+<span>
+  Hello
+</span>
+<span />
+<button>
+  Add
+</button>
+<h1>
+  Messages
+</h1>
+<span>
+  Hello(Alt)
+</span>
+<span />
+<button>
+  Add(alt)
+</button>
\ No newline at end of file
diff --git a/src/components/gql-mutation/__tests__/fixtures/run-mutation-multi-client/components/app.marko b/src/components/gql-mutation/__tests__/fixtures/run-mutation-multi-client/components/app.marko
new file mode 100644
index 0000000..5e574cd
--- /dev/null
+++ b/src/components/gql-mutation/__tests__/fixtures/run-mutation-multi-client/components/app.marko
@@ -0,0 +1,29 @@
+import { gql } from "../../../../../../index";
+
+static const MUTATION = gql`
+  mutation addMessage(
+    $text: String!
+  ) {
+    addMessage(text: $text)
+  }
+`;
+
+class {
+  handleClick(mutate, e) {
+    mutate({ text: "Hello" });
+  }
+}
+
+<gql-mutation|mutate, results| mutation=MUTATION>
+  <h1>Messages</h1>
+  <span>${results.data && results.data.addMessage}</span>
+  <span>${results.fetching ? "executing" : ""}</span>
+  <button on-click("handleClick", mutate)>Add</button>
+</gql-mutation>
+
+<gql-mutation|mutate, results| mutation=MUTATION name="alt">
+  <h1>Messages</h1>
+  <span>${results.data && results.data.addMessage}</span>
+  <span>${results.fetching ? "executing" : ""}</span>
+  <button on-click("handleClick", mutate)>Add(alt)</button>
+</gql-mutation>
diff --git a/src/components/gql-mutation/__tests__/fixtures/run-mutation-multi-client/index.marko b/src/components/gql-mutation/__tests__/fixtures/run-mutation-multi-client/index.marko
new file mode 100644
index 0000000..8e9ea13
--- /dev/null
+++ b/src/components/gql-mutation/__tests__/fixtures/run-mutation-multi-client/index.marko
@@ -0,0 +1,14 @@
+<!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 />
+  <gql-client name="alt" url=input.graphqlURLAlt />
+  <app />
+</body>
+</html>
\ No newline at end of file
diff --git a/src/components/gql-mutation/__tests__/server.test.ts b/src/components/gql-mutation/__tests__/server.test.ts
index 333ac88..341abca 100644
--- a/src/components/gql-mutation/__tests__/server.test.ts
+++ b/src/components/gql-mutation/__tests__/server.test.ts
@@ -9,6 +9,14 @@ describe(
   ]),
 );
 
+describe(
+  "run-mutation-multi-client",
+  fixture(path.join(__dirname, "fixtures/run-mutation-multi-client"), [
+    async (page) => await page.click("text=Add"),
+    async (page) => await page.click("text=Add(alt)"),
+  ]),
+);
+
 describe(
   "mutation-with-query",
   fixture(path.join(__dirname, "fixtures/mutation-with-query"), [
diff --git a/src/components/gql-mutation/index.marko b/src/components/gql-mutation/index.marko
index 4b2e935..404bb70 100644
--- a/src/components/gql-mutation/index.marko
+++ b/src/components/gql-mutation/index.marko
@@ -4,12 +4,12 @@ class {
     this.state = { results: {}, fetching: false };
   }
 }
-$ const { renderBody, mutation, requestPolicy } = input;
+$ const { renderBody, mutation, requestPolicy, name } = input;
 
 <${renderBody}(
   (variables, options) => {
     component.setState("fetching", true);
-    return getClient()
+    return getClient(undefined, name)
       .mutation(mutation, variables, { requestPolicy, ...options })
       .toPromise()
       .then((results) => {
diff --git a/src/components/gql-mutation/marko-tag.json b/src/components/gql-mutation/marko-tag.json
index a0891d7..286299c 100644
--- a/src/components/gql-mutation/marko-tag.json
+++ b/src/components/gql-mutation/marko-tag.json
@@ -16,6 +16,14 @@
       }
     ]
   },
+  "@name": {
+    "type": "string",
+    "autocomplete": [
+      {
+        "description": "Name of the client that the mutation will be executed against"
+      }
+    ]
+  },
   "@requestPolicy": {
     "enum": ["cache-first", "cache-and-network", "network-only", "cache-only"],
     "autocomplete": [
diff --git a/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.0.html b/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.0.html
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.1.html b/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.1.html
new file mode 100644
index 0000000..1bc8388
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.1.html
@@ -0,0 +1,7 @@
+<div />
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div />
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.2.html b/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.2.html
new file mode 100644
index 0000000..b5a0988
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.2.html
@@ -0,0 +1,11 @@
+<div>
+  <span>
+    Hello world!
+  </span>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div />
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.3.html b/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.3.html
new file mode 100644
index 0000000..7662a58
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/client-only-multi-client/renders.expected/loading.3.html
@@ -0,0 +1,15 @@
+<div>
+  <span>
+    Hello world!
+  </span>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Hello world!(Alt)
+    </span>
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.0.html b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.0.html
new file mode 100644
index 0000000..9c039f7
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.0.html
@@ -0,0 +1,15 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-1"
+    />
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.1.html b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.1.html
new file mode 100644
index 0000000..1efd0b7
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.1.html
@@ -0,0 +1,23 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-1"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-2"
+  style="display:none"
+>
+  <span>
+    Hello world!
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.2.html b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.2.html
new file mode 100644
index 0000000..4a04135
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.2.html
@@ -0,0 +1,19 @@
+<div>
+  <span>
+    Hello world!
+  </span>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-0"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.3.html b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.3.html
new file mode 100644
index 0000000..82e8387
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.3.html
@@ -0,0 +1,27 @@
+<div>
+  <span>
+    Hello world!
+  </span>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-0"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
+<div
+  id="GENERATED-2"
+  style="display:none"
+>
+  <span>
+    Hello world!(Alt)
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.4.html b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.4.html
new file mode 100644
index 0000000..0e9ade5
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/isomorphic-multi-client/renders.expected/loading.4.html
@@ -0,0 +1,23 @@
+<div>
+  <span>
+    Hello world!
+  </span>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Hello world!(Alt)
+    </span>
+  </div>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.0.html b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.0.html
new file mode 100644
index 0000000..9c039f7
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.0.html
@@ -0,0 +1,15 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-1"
+    />
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.1.html b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.1.html
new file mode 100644
index 0000000..1efd0b7
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.1.html
@@ -0,0 +1,23 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-1"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-2"
+  style="display:none"
+>
+  <span>
+    Hello world!
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.2.html b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.2.html
new file mode 100644
index 0000000..4a04135
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.2.html
@@ -0,0 +1,19 @@
+<div>
+  <span>
+    Hello world!
+  </span>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-0"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.3.html b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.3.html
new file mode 100644
index 0000000..82e8387
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.3.html
@@ -0,0 +1,27 @@
+<div>
+  <span>
+    Hello world!
+  </span>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-0"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
+<div
+  id="GENERATED-2"
+  style="display:none"
+>
+  <span>
+    Hello world!(Alt)
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.4.html b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.4.html
new file mode 100644
index 0000000..0e9ade5
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/server-only-multi-client/renders.expected/loading.4.html
@@ -0,0 +1,23 @@
+<div>
+  <span>
+    Hello world!
+  </span>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Hello world!(Alt)
+    </span>
+  </div>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.0.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.0.html
new file mode 100644
index 0000000..9c039f7
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.0.html
@@ -0,0 +1,15 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-1"
+    />
+  </div>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.1.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.1.html
new file mode 100644
index 0000000..29a781c
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.1.html
@@ -0,0 +1,26 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-1"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-2"
+  style="display:none"
+>
+  <span>
+    Hello John!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.2.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.2.html
new file mode 100644
index 0000000..75808b1
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.2.html
@@ -0,0 +1,22 @@
+<div>
+  <span>
+    Hello John!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-0"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.3.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.3.html
new file mode 100644
index 0000000..5b1fcf5
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.3.html
@@ -0,0 +1,30 @@
+<div>
+  <span>
+    Hello John!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <noscript
+      id="GENERATED-0"
+    />
+  </div>
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
+<div
+  id="GENERATED-2"
+  style="display:none"
+>
+  <span>
+    Hello John!(Alt)
+  </span>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.4.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.4.html
new file mode 100644
index 0000000..43271a4
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/loading.4.html
@@ -0,0 +1,26 @@
+<div>
+  <span>
+    Hello John!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Hello John!(Alt)
+    </span>
+  </div>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.0.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.0.html
new file mode 100644
index 0000000..fba4f89
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.0.html
@@ -0,0 +1,32 @@
+<div>
+  <span>
+    Stale
+  </span>
+  <span>
+    Hello John!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Stale(alt)
+    </span>
+    <span>
+      Hello John!(Alt)
+    </span>
+  </div>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.1.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.1.html
new file mode 100644
index 0000000..2f52ed5
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.1.html
@@ -0,0 +1,29 @@
+<div>
+  <span>
+    Hello Jake!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Stale(alt)
+    </span>
+    <span>
+      Hello John!(Alt)
+    </span>
+  </div>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.2.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.2.html
new file mode 100644
index 0000000..95451b6
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-0.2.html
@@ -0,0 +1,26 @@
+<div>
+  <span>
+    Hello Jake!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Hello Jake!(Alt)
+    </span>
+  </div>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-1.0.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-1.0.html
new file mode 100644
index 0000000..43271a4
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-1.0.html
@@ -0,0 +1,26 @@
+<div>
+  <span>
+    Hello John!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Hello John!(Alt)
+    </span>
+  </div>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-2.0.html b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-2.0.html
new file mode 100644
index 0000000..95451b6
--- /dev/null
+++ b/src/components/gql-query/__tests__/__snapshots__/update-variables-multi-client/renders.expected/step-2.0.html
@@ -0,0 +1,26 @@
+<div>
+  <span>
+    Hello Jake!
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <div>
+    <span>
+      Hello Jake!(Alt)
+    </span>
+  </div>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>
+<div
+  id="GENERATED-1"
+  style="display:none"
+/>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/fixtures/client-only-multi-client/components/app.marko b/src/components/gql-query/__tests__/fixtures/client-only-multi-client/components/app.marko
new file mode 100644
index 0000000..3d17976
--- /dev/null
+++ b/src/components/gql-query/__tests__/fixtures/client-only-multi-client/components/app.marko
@@ -0,0 +1,29 @@
+import { gql } from "../../../../../../index";
+static const QUERY = gql`
+  {
+    hello
+  }
+`;
+
+class {
+  onCreate() {
+    this.state = { mounted: false }
+  }
+  onMount() {
+    this.state = { mounted: true }
+  }
+}
+
+<if(state.mounted)>
+  <gql-query query=QUERY>
+    <@then|{ data }|><span>${data.hello}</span></@then>
+  </gql-query>
+  <div>
+    <h3>
+      Alt client
+    </h3>
+    <gql-query name="alt" query=QUERY>
+      <@then|{ data }|><span>${data.hello}</span></@then>
+    </gql-query>
+  </div>
+</if>
diff --git a/src/components/gql-query/__tests__/fixtures/client-only-multi-client/index.marko b/src/components/gql-query/__tests__/fixtures/client-only-multi-client/index.marko
new file mode 100644
index 0000000..8e9ea13
--- /dev/null
+++ b/src/components/gql-query/__tests__/fixtures/client-only-multi-client/index.marko
@@ -0,0 +1,14 @@
+<!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 />
+  <gql-client name="alt" url=input.graphqlURLAlt />
+  <app />
+</body>
+</html>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/fixtures/isomorphic-multi-client/components/app.marko b/src/components/gql-query/__tests__/fixtures/isomorphic-multi-client/components/app.marko
new file mode 100644
index 0000000..5ec0942
--- /dev/null
+++ b/src/components/gql-query/__tests__/fixtures/isomorphic-multi-client/components/app.marko
@@ -0,0 +1,20 @@
+import { gql } from "../../../../../../index";
+static const QUERY = gql`
+  {
+    hello
+  }
+`;
+
+class {}
+
+<gql-query query=QUERY>
+  <@then|{ data }|><span>${data.hello}</span></@then>
+</gql-query>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <gql-query name="alt" query=QUERY>
+    <@then|{ data }|><span>${data.hello}</span></@then>
+  </gql-query>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/fixtures/isomorphic-multi-client/index.marko b/src/components/gql-query/__tests__/fixtures/isomorphic-multi-client/index.marko
new file mode 100644
index 0000000..8e9ea13
--- /dev/null
+++ b/src/components/gql-query/__tests__/fixtures/isomorphic-multi-client/index.marko
@@ -0,0 +1,14 @@
+<!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 />
+  <gql-client name="alt" url=input.graphqlURLAlt />
+  <app />
+</body>
+</html>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/fixtures/server-only-multi-client/components/app.marko b/src/components/gql-query/__tests__/fixtures/server-only-multi-client/components/app.marko
new file mode 100644
index 0000000..291c8e9
--- /dev/null
+++ b/src/components/gql-query/__tests__/fixtures/server-only-multi-client/components/app.marko
@@ -0,0 +1,18 @@
+import { gql } from "../../../../../../index";
+static const QUERY = gql`
+  {
+    hello
+  }
+`;
+
+<gql-query query=QUERY>
+  <@then|{ data }|><span>${data.hello}</span></@then>
+</gql-query>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <gql-query name="alt" query=QUERY>
+    <@then|{ data }|><span>${data.hello}</span></@then>
+  </gql-query>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/fixtures/server-only-multi-client/index.marko b/src/components/gql-query/__tests__/fixtures/server-only-multi-client/index.marko
new file mode 100644
index 0000000..8e9ea13
--- /dev/null
+++ b/src/components/gql-query/__tests__/fixtures/server-only-multi-client/index.marko
@@ -0,0 +1,14 @@
+<!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 />
+  <gql-client name="alt" url=input.graphqlURLAlt />
+  <app />
+</body>
+</html>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/fixtures/update-variables-multi-client/components/app.marko b/src/components/gql-query/__tests__/fixtures/update-variables-multi-client/components/app.marko
new file mode 100644
index 0000000..3adc0d7
--- /dev/null
+++ b/src/components/gql-query/__tests__/fixtures/update-variables-multi-client/components/app.marko
@@ -0,0 +1,37 @@
+import { gql } from "../../../../../../index";
+static const QUERY = gql`
+  query($name: String) {
+    hello(name: $name)
+  }
+`;
+class {
+  onCreate() {
+    this.state = { name: "John" }
+  }
+  handleClick() {
+    this.state.name = this.state.name === "John" ? "Jake" : "John"
+  }
+}
+
+<gql-query query=QUERY variables={ name: state.name }>
+  <@then|{ data, fetching }|>
+    <if(fetching)>
+      <span>Stale</span>
+    </if>
+    <span>${data.hello}</span>
+    <button on-click("handleClick")>Toggle</button>
+  </@then>
+</gql-query>
+<div>
+  <h3>
+    Alt client
+  </h3>
+  <gql-query name="alt" query=QUERY variables={ name: state.name }>
+    <@then|{ data, fetching }|>
+      <if(fetching)>
+        <span>Stale(alt)</span>
+      </if>
+      <span>${data.hello}</span>
+    </@then>
+  </gql-query>
+</div>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/fixtures/update-variables-multi-client/index.marko b/src/components/gql-query/__tests__/fixtures/update-variables-multi-client/index.marko
new file mode 100644
index 0000000..8e9ea13
--- /dev/null
+++ b/src/components/gql-query/__tests__/fixtures/update-variables-multi-client/index.marko
@@ -0,0 +1,14 @@
+<!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 />
+  <gql-client name="alt" url=input.graphqlURLAlt />
+  <app />
+</body>
+</html>
\ No newline at end of file
diff --git a/src/components/gql-query/__tests__/server.test.ts b/src/components/gql-query/__tests__/server.test.ts
index 6f747cb..45c4e27 100644
--- a/src/components/gql-query/__tests__/server.test.ts
+++ b/src/components/gql-query/__tests__/server.test.ts
@@ -2,6 +2,10 @@ import path from "path";
 import fixture from "../../../__tests__/fixture";
 
 describe("client-only", fixture(path.join(__dirname, "fixtures/client-only")));
+describe(
+  "client-only-multi-client",
+  fixture(path.join(__dirname, "fixtures/client-only-multi-client")),
+);
 describe(
   "client-only-placeholder",
   fixture(path.join(__dirname, "fixtures/client-only-placeholder")),
@@ -21,6 +25,10 @@ describe(
   "isomorphic-fetch-imp",
   fixture(path.join(__dirname, "fixtures/isomorphic-fetch-imp")),
 );
+describe(
+  "isomorphic-multi-client",
+  fixture(path.join(__dirname, "fixtures/isomorphic-multi-client")),
+);
 describe(
   "isomorphic-placeholder",
   fixture(path.join(__dirname, "fixtures/isomorphic-placeholder")),
@@ -35,6 +43,10 @@ describe(
 );
 
 describe("server-only", fixture(path.join(__dirname, "fixtures/server-only")));
+describe(
+  "server-only-multi-client",
+  fixture(path.join(__dirname, "fixtures/server-only-multi-client")),
+);
 describe(
   "server-only-placeholder",
   fixture(path.join(__dirname, "fixtures/server-only-placeholder")),
@@ -57,6 +69,15 @@ describe(
   ]),
 );
 
+describe(
+  "update-variables-multi-client",
+  fixture(path.join(__dirname, "fixtures/update-variables-multi-client"), [
+    async (page) => await page.click("text=Toggle"),
+    async (page) => await page.click("text=Toggle"),
+    async (page) => await page.click("text=Toggle"),
+  ]),
+);
+
 describe(
   "request-policy",
   fixture(path.join(__dirname, "fixtures/request-policy"), [
diff --git a/src/components/gql-query/marko-tag.json b/src/components/gql-query/marko-tag.json
index efabb74..6516830 100644
--- a/src/components/gql-query/marko-tag.json
+++ b/src/components/gql-query/marko-tag.json
@@ -16,6 +16,14 @@
       }
     ]
   },
+  "@name": {
+    "type": "string",
+    "autocomplete": [
+      {
+        "description": "Name of the client that the query will be executed against"
+      }
+    ]
+  },
   "@variables": {
     "type": "object",
     "autocomplete": [
diff --git a/src/node_modules/@internal/client/browser.ts b/src/node_modules/@internal/client/browser.ts
index c16afd2..90370e7 100644
--- a/src/node_modules/@internal/client/browser.ts
+++ b/src/node_modules/@internal/client/browser.ts
@@ -10,14 +10,20 @@ import {
 
 import { devtoolsExchange } from "@internal/client/devtools";
 
-let client: Client;
-let ssr: ReturnType<typeof ssrExchange>;
+const DEFAULT_CLIENT_NAME = "default";
+
+interface ClientProvider {
+  client?: Client;
+  ssr?: ReturnType<typeof ssrExchange>;
+}
+
+const clientProviderMap = new Map<string, ClientProvider>();
 
 export const readyLookup = {};
 
-export function getClient() {
-  assertConfigured();
-  return client;
+export function getClient(_out: any, name = DEFAULT_CLIENT_NAME) {
+  assertConfigured(name);
+  return clientProviderMap.get(name)!.client!;
 }
 
 export function configureClient(
@@ -25,10 +31,18 @@ export function configureClient(
     fetch?: (
       ...params: [...Parameters<typeof fetch>, typeof fetch]
     ) => ReturnType<typeof fetch>;
+    name?: string;
   },
+  _out: any,
 ) {
-  ssr = ssrExchange({ isClient: true });
-  let exchanges = [dedupExchange, cacheExchange, ssr, fetchExchange];
+  const clientProvider: ClientProvider = {};
+  clientProvider.ssr = ssrExchange({ isClient: true });
+  let exchanges = [
+    dedupExchange,
+    cacheExchange,
+    clientProvider.ssr,
+    fetchExchange,
+  ];
   if (process.env.NODE_ENV !== "production" && devtoolsExchange) {
     exchanges.push(devtoolsExchange);
   }
@@ -37,18 +51,25 @@ export function configureClient(
     exchanges = config.exchanges.concat(exchanges);
   }
 
-  client = createClient({
+  clientProvider.client = createClient({
     ...config,
     exchanges,
     fetch: config.fetch
       ? (...params: Parameters<typeof fetch>) => config.fetch!(...params, fetch)
       : fetch,
   });
+
+  clientProviderMap.set(config.name || DEFAULT_CLIENT_NAME, clientProvider);
 }
 
-export function hydrateQuery(opKey: string, data: any, error: any) {
-  assertConfigured();
-  ssr.restoreData({
+export function hydrateQuery(
+  opKey: string,
+  data: any,
+  error: any,
+  name = DEFAULT_CLIENT_NAME,
+) {
+  assertConfigured(name);
+  clientProviderMap.get(name)!.ssr!.restoreData({
     [opKey]: {
       data: data ? JSON.stringify(data) : undefined,
       error,
@@ -56,6 +77,8 @@ export function hydrateQuery(opKey: string, data: any, error: any) {
   });
 }
 
-function assertConfigured() {
-  if (!client) throw new Error("<gql-client> not configured.");
+function assertConfigured(name: string) {
+  const clientProvider = clientProviderMap.get(name);
+  if (!clientProvider?.client || !clientProvider.ssr)
+    throw new Error("<gql-client> not configured.");
 }
diff --git a/src/node_modules/@internal/client/node.ts b/src/node_modules/@internal/client/node.ts
index f7d3709..fcbfbd0 100644
--- a/src/node_modules/@internal/client/node.ts
+++ b/src/node_modules/@internal/client/node.ts
@@ -10,24 +10,27 @@ import {
   type Client,
 } from "@urql/core";
 
+const DEFAULT_CLIENT_NAME = "default";
+
 type FetchFn = (
   uriOrRequest: string | Request,
   opts?: FetchOptions,
 ) => ReturnType<typeof fetchImpl>;
 
-const kClient = Symbol("client");
+const kClientMap = Symbol("client_map");
 const { ca } = https.globalAgent.options;
 const strictSSL = process.env.NODE_TLS_REJECT_UNAUTHORIZED !== "0";
-function internalFetch(url, options) {
+
+function internalFetch(url: string | Request, options?: FetchOptions) {
   return fetchImpl(url, { ...options, ca, strictSSL });
 }
 
 export const readyLookup = {};
 
-export function getClient(out: any): Client {
-  const client = out.global[kClient];
+export function getClient(out: any, name = DEFAULT_CLIENT_NAME): Client {
+  const client = out.global[kClientMap]?.get(name);
   if (!client) throw new Error("<gql-client> not configured.");
-  return out.global[kClient];
+  return client;
 }
 
 export function configureClient(
@@ -35,6 +38,7 @@ export function configureClient(
     fetch?: (
       ...params: [...Parameters<FetchFn>, FetchFn]
     ) => ReturnType<FetchFn>;
+    name?: string;
   },
   out: any,
 ) {
@@ -49,7 +53,7 @@ export function configureClient(
     exchanges = config.exchanges.concat(exchanges);
   }
 
-  out.global[kClient] = createClient({
+  const client = createClient({
     ...config,
     exchanges,
     fetch: async (url, options: any) => {
@@ -81,6 +85,14 @@ export function configureClient(
       ) as any;
     },
   });
+
+  const name = config.name || DEFAULT_CLIENT_NAME;
+
+  if (out.global[kClientMap]) {
+    out.global[kClientMap].set(name, client);
+  } else {
+    out.global[kClientMap] = new Map([[name, client]]);
+  }
 }
 
 export function hydrateQuery() {
diff --git a/src/node_modules/@internal/gql-query/browser.marko b/src/node_modules/@internal/gql-query/browser.marko
index 2e0ed37..a2e90ae 100644
--- a/src/node_modules/@internal/gql-query/browser.marko
+++ b/src/node_modules/@internal/gql-query/browser.marko
@@ -5,6 +5,7 @@ import { readyLookup } from "@internal/client";
   <gql-query-client
     key="gqlc"
     query=input.query
+    name=input.name
     variables=input.variables
     requestPolicy=input.requestPolicy
     timeout=input.timeout
diff --git a/src/node_modules/@internal/gql-query/components/gql-query-client/index.marko b/src/node_modules/@internal/gql-query/components/gql-query-client/index.marko
index 2199d21..dda900a 100644
--- a/src/node_modules/@internal/gql-query/components/gql-query-client/index.marko
+++ b/src/node_modules/@internal/gql-query/components/gql-query-client/index.marko
@@ -2,12 +2,12 @@ import { pipe, subscribe } from "wonka";
 import { readyLookup, getClient, hydrateQuery } from "@internal/client";
 class {
   onCreate(input) {
-    let { data, error, opKey } = input;
+    let { data, error, opKey, name } = input;
     const state = { data, error, fetching: false };
 
     if (typeof document !== "undefined") {
       if (opKey) {
-        hydrateQuery(opKey, data, error);
+        hydrateQuery(opKey, data, error, name);
       } else if (error && error._) {
         state.error = new Error(error.message);
         state.error.name = error.name;
@@ -86,7 +86,7 @@ class {
     }
 
     this.unsubscribe = pipe(
-      getClient().query(this.input.query, this.input.variables, {
+      getClient(undefined, this.input.name).query(this.input.query, this.input.variables, {
         requestPolicy: this.input.requestPolicy,
         ...options,
       }),
diff --git a/src/node_modules/@internal/gql-query/node.marko b/src/node_modules/@internal/gql-query/node.marko
index efe403a..e6cc330 100644
--- a/src/node_modules/@internal/gql-query/node.marko
+++ b/src/node_modules/@internal/gql-query/node.marko
@@ -9,7 +9,7 @@ static function errorToJSON() {
 
 <component-def/>
 <div key="root" no-update>
-  <await(getClient(out).query(input.query, input.variables).toPromise())
+  <await(getClient(out, input.name).query(input.query, input.variables).toPromise())
     client-reorder
     timeout=input.timeout
     placeholder=input.placeholder
@@ -18,6 +18,7 @@ static function errorToJSON() {
       <if(componentDef._wrr)>
         <gql-query-client
           key="gqlc"
+          name=input.name
           data=data
           error=error
           opKey=operation.key
diff --git a/src/types.d.ts b/src/types.d.ts
index d16608c..c041dca 100644
--- a/src/types.d.ts
+++ b/src/types.d.ts
@@ -2,9 +2,17 @@ declare module "@internal/client" {
   import "marko";
   import type { Client, ClientOptions } from "@urql/core";
   export const readyLookup: Record<string, any>;
-  export function getClient(out: Marko.Out): Client;
-  export function configureClient(config: ClientOptions, out: Marko.Out): void;
-  export function hydrateQuery(opKey: string, data: any, error: any): void;
+  export function getClient(out?: Marko.Out, name?: string): Client;
+  export function configureClient(
+    config: ClientOptions & { fetch?: any; name?: string },
+    out: Marko.Out,
+  ): void;
+  export function hydrateQuery(
+    opKey: string,
+    data: any,
+    error: any,
+    name?: string,
+  ): void;
 }
 
 declare module "@internal/gql-query" {