feat: add devtools plugin by default

BREAKING CHANGE: Make graphql a peerDependency

package.json

@@ -7,12 +7,12 @@
     "url": "https://github.com/marko-js/urql/issues"
   },
   "dependencies": {
-    "graphql": "^15.6.1",
-    "make-fetch-happen": "^9.1.0",
-    "node-fetch": "^2.6.5",
-    "urql": "^2.0.5"
+    "@urql/core": "^3.0.4",
+    "@urql/devtools": "^2.0.3",
+    "make-fetch-happen": "^11.0.1"
   },
   "devDependencies": {
+    "@bluesialia/express-graphql": "^0.14.5",
     "@commitlint/cli": "^13.2.1",
     "@commitlint/config-conventional": "^13.2.0",
     "@marko/compiler": "^5.16.1",
@@ -23,7 +23,7 @@
     "@types/express": "^4.17.13",
     "@types/istanbul-lib-instrument": "^1.7.4",
     "@types/jsdom": "^16.2.13",
-    "@types/make-fetch-happen": "^9.0.1",
+    "@types/make-fetch-happen": "^10.0.0",
     "@types/mocha": "^9.0.0",
     "@types/node": "^16.11.6",
     "@typescript-eslint/eslint-plugin": "^5.2.0",
@@ -35,9 +35,9 @@
     "eslint-config-prettier": "^8.3.0",
     "eslint-formatter-codeframe": "^7.32.1",
     "express": "^4.17.1",
-    "express-graphql": "0.12.0",
     "fast-glob": "^3.2.7",
     "fixpack": "^4.0.0",
+    "graphql": "^16.6.0",
     "husky": "^7.0.4",
     "istanbul-lib-instrument": "^5.0.4",
     "jsdom": "^18.0.0",
@@ -69,6 +69,9 @@
   "license": "MIT",
   "main": "dist/index.js",
   "module": "dist/index.mjs",
+  "peerDependencies": {
+    "graphql": "^0.11.0 || ^0.12.0 || ^0.13.0 || ^14.0.0 || ^15.0.0 || ^16.0.0"
+  },
   "publishConfig": {
     "access": "public"
   },

src/__tests__/start.ts

@@ -6,7 +6,7 @@ import express from "express";
 import markoExpress from "@marko/express";
 import { wait } from "./queue";
 import build from "./build";
-import { graphqlHTTP } from "express-graphql";
+import { graphqlHTTP } from "@bluesialia/express-graphql";
 import { buildSchema } from "graphql";
 
 // Construct a schema, using GraphQL schema language

src/client/index.ts

@@ -7,25 +7,34 @@ import {
 } from "@urql/core";
 import lookup from "./lookup";
 
+type Fetch = typeof fetch;
+
 export function createClient({
   isServer,
   fetch,
 }: {
   isServer: boolean;
-  fetch?: (resource: RequestInfo, options?: RequestInit) => Promise<Response>;
+  fetch?: Fetch;
 }) {
   // The `ssrExchange` must be initialized with `isClient` and `initialState`
-  const ssr = ssrExchange({
-    isClient: !isServer,
-  });
+  const ssr = ssrExchange({ isClient: !isServer });
+  let exchanges = [
+    dedupExchange,
+    cacheExchange,
+    ssr, // Add `ssr` in front of the `fetchExchange`
+    fetchExchange,
+  ];
+
+  if (typeof window === "object" && process.env.NODE_ENV !== "production") {
+    exchanges = [
+      // eslint-disable-next-line @typescript-eslint/no-var-requires
+      require("@urql/devtools").devtoolsExchange,
+      ...exchanges,
+    ];
+  }
 
   const client = internalCreate({
-    exchanges: [
-      dedupExchange,
-      cacheExchange,
-      ssr, // Add `ssr` in front of the `fetchExchange`
-      fetchExchange,
-    ],
+    exchanges,
     fetch,
     ...lookup.config,
   });

src/components/gql-query/__tests__/__snapshots__/request-policy/renders.expected/loading.3.html

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

src/components/gql-query/__tests__/__snapshots__/request-policy/renders.expected/loading.4.html

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

src/components/gql-query/impl/server.marko

@@ -1,4 +1,4 @@
-import fetch from "node-fetch";
+import fetch from "make-fetch-happen";
 import { createClient } from "../../../client";
 $ {
   let store =