feat: allow passing cacheExchange and other fixes

README.md

@@ -224,6 +224,25 @@ The graphql query to perform.
 
 The cache policy to use with this mutation request.
 
+#### `cacheExchange`
+
+Replace `cacheExchange` from `@urql/core` with provided one.
+
+```MARKO
+import { cacheExchange } from '@urql/exchange-graphcache';
+
+<gql-client
+  ...input
+  cacheExchange=cacheExchange({
+    resolvers: {
+      Todo: {
+        updatedAt: parent => new Date(parent.updatedAt),
+      },
+    },
+  })
+/>
+```
+
 #### `name`
 
 The name of cooresponding Urql client.

package.json

@@ -27,6 +27,7 @@
     "@types/node": "^20.10.4",
     "@typescript-eslint/eslint-plugin": "^6.14.0",
     "@typescript-eslint/parser": "^6.14.0",
+    "@urql/exchange-graphcache": "^7.1.0",
     "convert-source-map": "^2.0.0",
     "esbuild": "^0.19.9",
     "eslint": "^8.55.0",

src/__tests__/start.ts

@@ -15,9 +15,15 @@ import "./alias-virtual-modules";
 const schema = buildSchema(`
   type Query {
     hello(name: String): String
+    todo(id: String): Todo
     messages: [String]
   }
 
+  type Todo {
+    id: String
+    name: String
+  }
+
   type Mutation {
     addMessage(text: String): String
     doError: String
@@ -32,6 +38,13 @@ const createRoot = (contentPostfix = "", delay = 0) => {
       await new Promise((r) => setTimeout(r, delay));
       return `Hello ${name}!${contentPostfix}`;
     },
+    todo: async ({ id }: { id: string }) => {
+      await new Promise((r) => setTimeout(r, delay));
+      return {
+        id,
+        name: "Todo " + id + contentPostfix,
+      };
+    },
     messages: async () => {
       await new Promise((r) => setTimeout(r, delay));
       return messages;

src/components/gql-client/marko-tag.json

@@ -47,5 +47,12 @@
         "description": "Default cache policy for requests."
       }
     ]
+  },
+  "@cacheExchange": {
+    "autocomplete": [
+      {
+        "description": "Replace default cache exchange."
+      }
+    ]
   }
 }

src/components/gql-query/__tests__/__snapshots__/use-graphcache-exchange/renders.expected/loading.0.html

@@ -0,0 +1,5 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>

src/components/gql-query/__tests__/__snapshots__/use-graphcache-exchange/renders.expected/loading.1.html

@@ -0,0 +1,16 @@
+<div>
+  <noscript
+    id="GENERATED-0"
+  />
+</div>
+<div
+  id="GENERATED-1"
+  style="display:none"
+>
+  <span>
+    Todo John
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>

src/components/gql-query/__tests__/__snapshots__/use-graphcache-exchange/renders.expected/loading.2.html

@@ -0,0 +1,12 @@
+<div>
+  <span>
+    Todo John
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>

src/components/gql-query/__tests__/__snapshots__/use-graphcache-exchange/renders.expected/loading.3.html

@@ -0,0 +1,12 @@
+<div>
+  <span>
+    Todo John from custom resolver
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>

src/components/gql-query/__tests__/__snapshots__/use-graphcache-exchange/renders.expected/step-0.0.html

@@ -0,0 +1,15 @@
+<div>
+  <span>
+    Stale
+  </span>
+  <span>
+    Todo John from custom resolver
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>

src/components/gql-query/__tests__/__snapshots__/use-graphcache-exchange/renders.expected/step-0.1.html

@@ -0,0 +1,12 @@
+<div>
+  <span>
+    Todo Jake from custom resolver
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>

src/components/gql-query/__tests__/__snapshots__/use-graphcache-exchange/renders.expected/step-1.0.html

@@ -0,0 +1,12 @@
+<div>
+  <span>
+    Todo John from custom resolver
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>

src/components/gql-query/__tests__/__snapshots__/use-graphcache-exchange/renders.expected/step-2.0.html

@@ -0,0 +1,12 @@
+<div>
+  <span>
+    Todo Jake from custom resolver
+  </span>
+  <button>
+    Toggle
+  </button>
+</div>
+<div
+  id="GENERATED-0"
+  style="display:none"
+/>

src/components/gql-query/__tests__/fixtures/use-graphcache-exchange/components/app.marko

@@ -0,0 +1,38 @@
+import { gql } from "../../../../../../index";
+import { cacheExchange } from '@urql/exchange-graphcache';
+
+static const QUERY = gql`
+  query($id: String) {
+    todo(id: $id) {
+      id
+      name
+    }
+  }
+`;
+class {
+  onCreate() {
+    this.state = { id: "John" }
+  }
+  handleClick() {
+    this.state.id = this.state.id === "John" ? "Jake" : "John"
+  }
+}
+
+<gql-client url=input.graphqlURL cacheExchange=cacheExchange({
+  resolvers: {
+    Todo: {
+      name: (parent) => {
+        return `${parent.name} from custom resolver`;
+      }
+    },
+  },
+}) />
+<gql-query query=QUERY variables={ id: state.id }>
+  <@then|{ data, fetching, error }|>
+    <if(fetching)>
+      <span>Stale</span>
+    </if>
+    <span>${data?.todo.name}</span>
+    <button on-click("handleClick")>Toggle</button>
+  </@then>
+</gql-query>

src/components/gql-query/__tests__/fixtures/use-graphcache-exchange/index.marko

@@ -0,0 +1,12 @@
+<!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>
+  <app ...input />
+</body>
+</html>

src/components/gql-query/__tests__/server.test.ts

@@ -86,3 +86,12 @@ describe(
     async (page) => await page.click("text=Toggle"),
   ]),
 );
+
+describe(
+  "use-graphcache-exchange",
+  fixture(path.join(__dirname, "fixtures/use-graphcache-exchange"), [
+    async (page) => await page.click("text=Toggle"),
+    async (page) => await page.click("text=Toggle"),
+    async (page) => await page.click("text=Toggle"),
+  ]),
+);

src/node_modules/@internal/client/browser.ts

@@ -6,6 +6,7 @@ import {
   ssrExchange,
   type ClientOptions,
   type Client,
+  type Exchange,
 } from "@urql/core";
 
 import { devtoolsExchange } from "@internal/client/devtools";
@@ -32,14 +33,15 @@ export function configureClient(
       ...params: [...Parameters<typeof fetch>, typeof fetch]
     ) => ReturnType<typeof fetch>;
     name?: string;
+    cacheExchange?: Exchange;
   },
   _out: any,
 ) {
   const clientProvider: ClientProvider = {};
   clientProvider.ssr = ssrExchange({ isClient: true });
   let exchanges = [
+    config.cacheExchange ?? cacheExchange,
     dedupExchange,
-    cacheExchange,
     clientProvider.ssr,
     fetchExchange,
   ];

src/node_modules/@internal/client/node.ts

@@ -43,8 +43,8 @@ export function configureClient(
   out: any,
 ) {
   let exchanges = [
-    dedupExchange,
     cacheExchange,
+    dedupExchange,
     ssrExchange({ isClient: false }),
     fetchExchange,
   ];