Run test API in browser to support codeflow

package.json

@@ -13,8 +13,7 @@
     "lint": "eslint \"src/**/*.ts*\"",
     "release": "np",
     "start": "vite --open --mode ssr",
-    "qwik": "qwik",
-    "api": "node ./api/main.js"
+    "qwik": "qwik"
   },
   "main": "./lib/index.qwik.cjs",
   "qwik": "./lib/index.qwik.mjs",
@@ -62,15 +61,13 @@
     "@types/eslint": "8.4.6",
     "@types/node": "latest",
     "@typescript-eslint/eslint-plugin": "5.40.1",
-    "@typescript-eslint/parser": "5.40.0",
+    "@typescript-eslint/parser": "^5.40.1",
     "@urql/exchange-auth": "^1.0.0",
+    "@urql/exchange-execute": "^2.0.0",
     "@urql/exchange-graphcache": "^5.0.2",
     "cookie": "^0.5.0",
-    "cors": "^2.8.5",
     "eslint": "8.25.0",
     "eslint-plugin-qwik": "latest",
-    "express": "^4.18.2",
-    "express-graphql": "^0.12.0",
     "graphql": "^16.6.0",
     "node-fetch": "3.2.10",
     "np": "7.6.2",

src/example/api.ts

@@ -0,0 +1,51 @@
+import { buildSchema } from 'graphql';
+
+// Create local schema
+export const schema = buildSchema(`
+  type Film {
+    id: String!
+    title: String!
+  }
+
+  input AddFilmInput {
+    title: String!
+  }
+
+  input UpdateFilmInput {
+    id: String!
+    title: String!
+  }
+
+  type Query {
+    film(id: String!): Film
+  }
+
+  type Mutation {
+    addFilm(input: AddFilmInput!): Film!
+    updateFilm(input: UpdateFilmInput!): Film!
+  }
+`);
+
+// Create local state
+const data = ['Shrek', 'The Matrix', 'The Lord of the Rings', 'Something else'];
+
+// Create root value with resolvers
+export const rootValue = {
+  film: ({ id }: { id: string }) => {
+    return {
+      title: data[parseInt(id) % data.length],
+      id,
+    };
+  },
+  addFilm: ({ input }: { input: { title: string } }) => {
+    const { title } = input;
+    const id = data.length;
+    data.push(title);
+    return { title, id };
+  },
+  updateFilm: async ({ input }: { input: { title: string; id: string } }) => {
+    const { title, id } = input;
+    data[parseInt(id, 10)] = title;
+    return { title, id };
+  },
+};

src/example/client.ts

@@ -1,13 +1,10 @@
-import {
-  createClient,
-  dedupExchange,
-  fetchExchange,
-  makeOperation,
-} from '@urql/core';
+import { createClient, dedupExchange, makeOperation } from '@urql/core';
 import { authExchange } from '@urql/exchange-auth';
+import { executeExchange } from '@urql/exchange-execute';
 import { cacheExchange } from '@urql/exchange-graphcache';
 import { qwikExchange } from '../exchange/qwik-exchange';
 import { ClientFactory, UrqlAuthTokens } from '../types';
+import { rootValue, schema } from './api';
 
 export const clientFactory: ClientFactory = ({ authTokens, qwikStore }) => {
   const auth = authExchange<UrqlAuthTokens>({
@@ -61,7 +58,9 @@ export const clientFactory: ClientFactory = ({ authTokens, qwikStore }) => {
       dedupExchange,
       cacheExchange(),
       auth,
-      fetchExchange,
+
+      // Replace with fetchExchange for live requests
+      executeExchange({ schema, rootValue }),
     ],
   });
 };