feat: support multi client (#22)

* feat: support multi client

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.

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`,
           });
         });
       }

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": [

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>

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>

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>

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>

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>

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>

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>

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"), [

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) => {

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": [

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>

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>

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>

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>

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>