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 `` and/or `` 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. + ## `` 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 = []; 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 @@ +

+ Messages +

+ + + +

+ Messages +

+ + + \ 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 @@ +

+ Messages +

+ + + executing + + +

+ Messages +

+ + + \ 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 @@ +

+ Messages +

+ + Hello + + + +

+ Messages +

+ + + \ 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 @@ +

+ Messages +

+ + Hello + + + +

+ Messages +

+ + + executing + + \ 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 @@ +

+ Messages +

+ + Hello + + + +

+ Messages +

+ + Hello(Alt) + + + \ 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" }); + } +} + + +

Messages

+ ${results.data && results.data.addMessage} + ${results.fetching ? "executing" : ""} + +
+ + +

Messages

+ ${results.data && results.data.addMessage} + ${results.fetching ? "executing" : ""} + + 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 @@ + + + + + + Simple Example + + + + + + + + \ 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 @@ +
+
+

+ Alt client +

+
+
\ 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 @@ +
+ + Hello world! + +
+
+

+ Alt client +

+
+
\ 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 @@ +
+ + Hello world! + +
+
+

+ Alt client +

+
+ + Hello world!(Alt) + +
+
\ 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 @@ +
+
+
+

+ Alt client +

+
+
+
\ 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 @@ +
+
+
+

+ Alt client +

+
+
+
+ \ 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 @@ +
+ + Hello world! + +
+
+

+ Alt client +

+
+
+
+