feat: support HTTP and Socket.io in the urql and relay examples (#937)

* feat: support HTTP and Socket.io in the urql and relay examples

* feat: cover all todo example apps with integration tests on both SSE and Socket.io

* remove patches

* chore: add yoga example

* chore: add yoga to list of ignored bob packages

Author: n1ru4l

bob.config.js

@@ -7,6 +7,7 @@ module.exports = {
     "@n1ru4l/todo-example-server",
     "@n1ru4l/todo-example-server-helix",
     "@n1ru4l/todo-example-server-ws",
+    "@n1ru4l/todo-example-server-yoga",
     "@n1ru4l/end2end-tests",
   ], // ignored packages
   base: "origin/main",

packages/socket-io-graphql-server/README.md

@@ -6,7 +6,7 @@ A layer for serving a GraphQL schema via a socket.io server. Supports Queries, M
 
 **Note:** Use [`@n1ru4l/socket-io-graphql-client`](https://github.com/n1ru4l/graphql-live-queries/tree/main/packages/socket-io-graphql-client) for executing operations against the server.
 
-For a full setup check out the [todo-example-server](https://github.com/n1ru4l/graphql-live-queries/tree/main/packages/todo-example/server).
+For a full setup check out the [todo-example-server-socket-io](https://github.com/n1ru4l/graphql-live-queries/tree/main/packages/todo-example/server-socket-io).
 
 ## Install Instructions
 

packages/todo-example/client-apollo/package.json

@@ -19,7 +19,6 @@
     "@types/classnames": "2.3.0",
     "@types/react-dom": "17.0.17",
     "@vitejs/plugin-react-refresh": "1.3.6",
-    "graphiql": "1.4.8",
     "classnames": "2.3.1",
     "react": "17.0.2",
     "react-dom": "17.0.2",
@@ -33,46 +32,5 @@
     "generate:types": "graphql-codegen --config codegen.yml",
     "ts:check": "tsc --noEmit"
   },
-  "type": "module",
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
-  "typings": "dist/typings/index.d.ts",
-  "typescript": {
-    "definition": "dist/typings/index.d.ts"
-  },
-  "exports": {
-    ".": {
-      "require": {
-        "types": "./dist/typings/index.d.ts",
-        "default": "./dist/cjs/index.js"
-      },
-      "import": {
-        "types": "./dist/typings/index.d.ts",
-        "default": "./dist/esm/index.js"
-      },
-      "default": {
-        "types": "./dist/typings/index.d.ts",
-        "default": "./dist/esm/index.js"
-      }
-    },
-    "./*": {
-      "require": {
-        "types": "./dist/typings/*.d.ts",
-        "default": "./dist/cjs/*.js"
-      },
-      "import": {
-        "types": "./dist/typings/*.d.ts",
-        "default": "./dist/esm/*.js"
-      },
-      "default": {
-        "types": "./dist/typings/*.d.ts",
-        "default": "./dist/esm/*.js"
-      }
-    },
-    "./package.json": "./package.json"
-  },
-  "publishConfig": {
-    "directory": "dist",
-    "access": "public"
-  }
+  "type": "commonjs"
 }

packages/todo-example/client-apollo/src/GraphiQLWidget.css

@@ -0,0 +1,81 @@
+import {
+  ApolloLink,
+  Operation,
+  FetchResult,
+  Observable,
+  ApolloClient,
+  InMemoryCache,
+  gql,
+} from "@apollo/client/core";
+import { split } from "@apollo/client/link/core";
+import { HttpLink } from "@apollo/client/link/http";
+import { isLiveQueryOperationDefinitionNode } from "@n1ru4l/graphql-live-query";
+import { print, getOperationAST } from "graphql";
+
+type SSELinkOptions = EventSourceInit & { uri: string };
+
+class SSELink extends ApolloLink {
+  constructor(private options: SSELinkOptions) {
+    super();
+  }
+
+  public request(operation: Operation): Observable<FetchResult> {
+    const url = new URL(this.options.uri);
+    url.searchParams.append("query", print(operation.query));
+    url.searchParams.append(
+      "extensions",
+      JSON.stringify(operation.operationName)
+    );
+    url.searchParams.append("variables", JSON.stringify(operation.variables));
+    if (operation.extensions) {
+      url.searchParams.append(
+        "extensions",
+        JSON.stringify(operation.extensions)
+      );
+    }
+
+    return new Observable((sink) => {
+      const eventsource = new EventSource(url.toString(), this.options);
+      eventsource.onmessage = function (event) {
+        const data = JSON.parse(event.data);
+        sink.next(data);
+        if (eventsource.readyState === 2) {
+          sink.complete();
+        }
+      };
+      eventsource.onerror = function (error) {
+        sink.error(error);
+      };
+      return () => eventsource.close();
+    });
+  }
+}
+
+export const createHTTPApolloLink = (uri: string) => {
+  const sseLink = new SSELink({
+    uri,
+  });
+
+  const httpLink = new HttpLink({
+    uri,
+  });
+
+  const link = split(
+    ({ query, operationName, variables }) => {
+      const definition = getOperationAST(query, operationName);
+      const isSubscription =
+        definition?.kind === "OperationDefinition" &&
+        definition.operation === "subscription";
+
+      const isLiveQuery =
+        !!definition &&
+        isLiveQueryOperationDefinitionNode(definition, variables);
+
+      return isSubscription || isLiveQuery;
+    },
+    sseLink,
+    httpLink
+  );
+
+  return link;
+};

packages/todo-example/client-apollo/src/GraphiQLWidget.tsx

@@ -1,4 +1,7 @@
-import { SocketIOGraphQLClient } from "@n1ru4l/socket-io-graphql-client";
+import {
+  createSocketIOGraphQLClient,
+  SocketIOGraphQLClient,
+} from "@n1ru4l/socket-io-graphql-client";
 import { applyAsyncIterableIteratorToSink } from "@n1ru4l/push-pull-async-iterable-iterator";
 import { applyLiveQueryJSONPatch } from "@n1ru4l/graphql-live-query-patch-json-patch";
 import {
@@ -10,6 +13,7 @@ import {
   FetchResult,
 } from "@apollo/client";
 import { print } from "graphql";
+import { io } from "socket.io-client";
 
 class SocketIOGraphQLApolloLink extends ApolloLink {
   private networkLayer: SocketIOGraphQLClient<FetchResult>;
@@ -34,10 +38,11 @@ class SocketIOGraphQLApolloLink extends ApolloLink {
   }
 }
 
-export const createApolloClient = (
-  networkInterface: SocketIOGraphQLClient<FetchResult>
-) =>
-  new ApolloClient({
-    link: new SocketIOGraphQLApolloLink(networkInterface),
-    cache: new InMemoryCache(),
-  });
+export const createSocketIOApolloLink = () => {
+  let host =
+    new URLSearchParams(window.location.search).get("host") ?? undefined;
+  const socket = host ? io(host) : io();
+  const networkInterface = createSocketIOGraphQLClient<FetchResult>(socket);
+
+  return new SocketIOGraphQLApolloLink(networkInterface);
+};

packages/todo-example/client-apollo/src/apollo-link/create-http-apollo-link.ts

@@ -1,54 +1,65 @@
 import React from "react";
 import ReactDOM from "react-dom";
-import { io } from "socket.io-client";
 import "todomvc-app-css/index.css";
-import { ApolloProvider, FetchResult } from "@apollo/client";
-import { createSocketIOGraphQLClient } from "@n1ru4l/socket-io-graphql-client";
-import type { FetcherResult } from "graphiql";
-import type { GraphiQLWidget as GraphiQLWidgetType } from "./GraphiQLWidget";
-
-import { createApolloClient } from "./createApolloClient";
+import {
+  ApolloClient,
+  ApolloLink,
+  ApolloProvider,
+  InMemoryCache,
+  NormalizedCacheObject,
+} from "@apollo/client";
 import { TodoApplication } from "./TodoApplication";
 
-let host = new URLSearchParams(window.location.search).get("host") ?? undefined;
-const socket = host ? io(host) : io();
-const networkInterface = createSocketIOGraphQLClient<FetchResult>(socket);
-const apolloClient = createApolloClient(networkInterface);
-
-// we only want GraphiQL in our development environment!
-let GraphiQLWidget = (): React.ReactElement | null => null;
-if (process.env.NODE_ENV === "development") {
-  GraphiQLWidget = () => {
-    const [Component, setComponent] = React.useState<
-      typeof GraphiQLWidgetType | null
-    >(null);
+const createApolloClient = (link: ApolloLink) =>
+  new ApolloClient({
+    link,
+    cache: new InMemoryCache(),
+  });
 
-    React.useEffect(() => {
-      import("./GraphiQLWidget").then(({ GraphiQLWidget }) => {
-        setComponent(() => GraphiQLWidget);
-      });
-    }, []);
+const Root = (): React.ReactElement | null => {
+  const [client, setClient] =
+    React.useState<ApolloClient<NormalizedCacheObject> | null>(null);
 
-    return Component ? (
-      <Component
-        fetcher={({ query: operation, variables, operationName }) =>
-          networkInterface.execute({
-            operation,
-            variables,
-            operationName,
-          }) as AsyncIterableIterator<FetcherResult>
+  React.useEffect(() => {
+    const params = new URLSearchParams(window.location.search);
+    if (params.get("sse")) {
+      let host = params.get("host") ?? undefined;
+      import("./apollo-link/create-http-apollo-link").then(
+        async ({ createHTTPApolloLink }) => {
+          setClient(
+            createApolloClient(
+              createHTTPApolloLink(
+                (host ??
+                  `${window.location.protocol}//${window.location.host}`) +
+                  "/graphql"
+              )
+            )
+          );
+        }
+      );
+    } else {
+      import("./apollo-link/create-socket-io-apollo-link").then(
+        async ({ createSocketIOApolloLink }) => {
+          setClient(createApolloClient(createSocketIOApolloLink()));
         }
-      />
-    ) : null;
-  };
-}
+      );
+    }
+  }, []);
 
-ReactDOM.render(
-  <React.StrictMode>
-    <ApolloProvider client={apolloClient}>
+  if (client === null) {
+    return null;
+  }
+
+  return (
+    <ApolloProvider client={client}>
       <TodoApplication />
-      <GraphiQLWidget />
     </ApolloProvider>
+  );
+};
+
+ReactDOM.render(
+  <React.StrictMode>
+    <Root />
   </React.StrictMode>,
   document.getElementById("root")
 );

packages/todo-example/client-apollo/src/createApolloClient.tsx renamed to packages/todo-example/client-apollo/src/apollo-link/create-socket-io-apollo-link.ts

@@ -21,6 +21,9 @@ export default defineConfig({
         target: backendAddress,
         ws: true,
       },
+      "/graphql": {
+        target: backendAddress,
+      },
     },
   },
 });