UrqlUseSubscription (#60)

teamwalnut · Jun 20, 2019 · ba3007b · ba3007b
1 parent 98f0200
commit ba3007b
Show file tree

Hide file tree

Showing 21 changed files with 343 additions and 419 deletions.
diff --git a/__tests__/__snapshots__/UrqlClient_test.bs.js.snap b/__tests__/__snapshots__/UrqlClient_test.bs.js.snap
@@ -17,6 +17,7 @@ Client {
   "operations$": [Function],
   "reexecuteOperation": [Function],
   "results$": [Function],
+  "suspense": false,
   "url": "https://localhost:3000",
 }
 `;
@@ -42,6 +43,7 @@ Client {
   "operations$": [Function],
   "reexecuteOperation": [Function],
   "results$": [Function],
+  "suspense": false,
   "url": "https://localhost:3000",
 }
 `;
@@ -67,6 +69,7 @@ Client {
   "operations$": [Function],
   "reexecuteOperation": [Function],
   "results$": [Function],
+  "suspense": false,
   "url": "https://localhost:3000",
 }
 `;
@@ -88,6 +91,7 @@ Client {
   "operations$": [Function],
   "reexecuteOperation": [Function],
   "results$": [Function],
+  "suspense": false,
   "url": "https://localhost:3000",
 }
 `;
diff --git a/examples/5-subscription/bsconfig.json b/examples/5-subscription/bsconfig.json
@@ -1,8 +1,9 @@
 {
   "name": "5-subscription",
   "reason": {
-    "react-jsx": 2
+    "react-jsx": 3
   },
+  "bsc-flags": ["-bs-super-errors"],
   "sources": [
     {
       "dir": "src/app",
@@ -12,7 +13,7 @@
   ],
   "package-specs": [
     {
-      "module": "commonjs",
+      "module": "es6",
       "in-source": true
     }
   ],

diff --git a/examples/5-subscription/package.json b/examples/5-subscription/package.json
@@ -8,18 +8,19 @@
   "scripts": {
     "start": "bsb -make-world -w",
     "clean": "bsb -clean-world",
+    "build": "bsb -make-world",
     "webpack": "webpack-dev-server --hot",
     "server": "node src/server/index.js",
     "start:demo": "run-p server webpack"
   },
   "dependencies": {
     "bs-css": "^8.0.2",
-    "reason-react": ">=0.3.4",
+    "reason-react": "0.7.0",
     "reason-urql": "link:../../"
   },
   "devDependencies": {
     "apollo-server-express": "^2.4.8",
-    "bs-platform": "^5.0.3",
+    "bs-platform": "^5.0.4",
     "cors": "^2.8.5",
     "express": "^4.16.4",
     "faker": "^4.1.0",

diff --git a/examples/5-subscription/public/index.html b/examples/5-subscription/public/index.html
@@ -8,14 +8,6 @@
         margin: 0;
       }
     </style>
-    <link
-      href="https://fonts.googleapis.com/css?family=PT+Serif+Caption"
-      rel="stylesheet"
-    />
-    <link
-      href="https://fonts.googleapis.com/css?family=Marck+Script"
-      rel="stylesheet"
-    />
   </head>
   <body>
     <div id="root"></div>

diff --git a/examples/5-subscription/src/app/App.re b/examples/5-subscription/src/app/App.re
@@ -1,35 +1,11 @@
-let component = ReasonReact.statelessComponent("App");
-
-module Styles = {
-  open Css;
-
-  let page =
-    style([
-      display(flexBox),
-      flexDirection(column),
-      position(absolute),
-      top(px(0)),
-      bottom(px(0)),
-      left(px(0)),
-      right(px(0)),
-      padding(px(20)),
-    ]);
-
-  let side =
-    style([
-      display(flexBox),
-      flexDirection(column),
-      alignItems(center),
-      flexBasis(pct(50.)),
-      firstChild([justifyContent(flexEnd)]),
-    ]);
-};
-
-let make = _children => {
-  ...component,
-  render: _self =>
-    <div className=Styles.page>
-      <section className=Styles.side> <Logo /> </section>
-      <section className=Styles.side> <Messages /> </section>
-    </div>,
-};
+[@react.component]
+let make = () =>
+  <div className=AppStyles.page>
+    <svg
+      viewBox="0 0 1000 1000"
+      height="1000"
+      width="1000"
+      style={ReactDOMRe.Style.make(~border="1px solid blue", ())}>
+      <Circles />
+    </svg>
+  </div>;
diff --git a/examples/5-subscription/src/app/AppStyles.re b/examples/5-subscription/src/app/AppStyles.re
@@ -0,0 +1,15 @@
+open Css;
+
+let page =
+  style([
+    display(flexBox),
+    flexDirection(column),
+    alignItems(center),
+    justifyContent(center),
+    position(absolute),
+    top(px(0)),
+    bottom(px(0)),
+    left(px(0)),
+    right(px(0)),
+    padding(px(20)),
+  ]);
diff --git a/examples/5-subscription/src/app/Circles.re b/examples/5-subscription/src/app/Circles.re
@@ -0,0 +1,58 @@
+open ReasonUrql;
+open Hooks;
+
+module SubscribeRandomInt = [%graphql
+  {|
+  subscription subscribeNumbers {
+    newNumber @bsDecoder(fn: "string_of_int")
+  }
+|}
+];
+
+let handler = (~prevSubscriptions, ~subscription) => {
+  switch (prevSubscriptions) {
+  | Some(subs) => Array.append(subs, [|subscription|])
+  | None => [|subscription|]
+  };
+};
+
+[@bs.scope "Math"] [@bs.val] external random: unit => float = "random";
+[@bs.scope "Math"] [@bs.val] external floor: float => int = "floor";
+[@bs.send] external toString: (int, int) => string = "toString";
+
+let getRandomInt = (max: int) => {
+  floor(random() *. float_of_int(max));
+};
+
+let getRandomHex = () => {
+  let encode = random() *. float_of_int(16777215) |> floor;
+  let hex = encode->toString(16);
+  {j|#$hex|j};
+};
+
+[@react.component]
+let make = () => {
+  let {response} =
+    useSubscriptionWithHandler(~request=SubscribeRandomInt.make(), ~handler);
+
+  switch (response) {
+  | Fetching => <text> "Loading"->React.string </text>
+  | Data(d) =>
+    Array.mapi(
+      (index, datum) =>
+        <circle
+          cx={
+            datum##newNumber;
+          }
+          cy={index === 0 ? datum##newNumber : d[index - 1]##newNumber}
+          stroke={getRandomHex()}
+          fill="none"
+          r={getRandomInt(30) |> string_of_int}
+        />,
+      d,
+    )
+    |> React.array
+  | Error(_e) => <text> "Error"->React.string </text>
+  | NotFound => <text> "Not Found"->React.string </text>
+  };
+};
diff --git a/examples/5-subscription/src/app/Logo.re b/examples/5-subscription/src/app/Logo.re
diff --git a/examples/5-subscription/src/app/Messages.re b/examples/5-subscription/src/app/Messages.re
diff --git a/examples/5-subscription/src/server/schema.js b/examples/5-subscription/src/server/schema.js
@@ -66,8 +66,8 @@ function getRandomInt(max) {
   return Math.floor(Math.random() * Math.floor(max));
 }
 
-setInterval(() =>
+setInterval(() => {
   pubsub.publish("newNumber", {
     newNumber: getRandomInt(1000)
-  })
-);
+  });
+}, 2000);
diff --git a/examples/5-subscription/webpack.config.js b/examples/5-subscription/webpack.config.js
@@ -8,6 +8,9 @@ module.exports = {
     publicPath: "/public/",
     filename: "index.js"
   },
+  resolve: {
+    modules: [path.resolve(__dirname, "../../node_modules"), "node_modules"]
+  },
   devServer: {
     open: true,
     contentBase: path.resolve(__dirname, "public")