docs/README.md

@@ -19,7 +19,7 @@
 構成としては下記の通りです。
 
 - [Hasura Cloud](https://cloud.hasura.io/) - すぐに利用可能なHasuraの環境
-- [StackBlitz](https://stackblitz.com/) - フロントエンドのオンライン開発環境
+- [StackBlitz](https://stackblitz.com/) (あるいは、[CodeSandbox](https://codesandbox.io/)) - フロントエンドのオンライン開発環境
 - [Vue 3](https://vuejs.org/) - プログレッシブWebフレームワーク
 - [Quill](https://quilljs.com/) - リッチテキストエディター
 

docs/create-vue-app.md

@@ -1,8 +1,9 @@
 # Vueアプリケーションの作成
 
-次のリンクにアクセスすると、StackBlitzでVueアプリケーションを作成できます
-
 [![Edit on StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/fork/github/kou029w/hasura-rest-hands-on/tree/main/frontend?terminal=dev&file=src/App.vue)
+[![Edit on CodeSandbox](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/kou029w/hasura-rest-hands-on/tree/main/frontend?file=/src/App.vue)
+
+いずれかのリンクにアクセスし、Vueアプリケーションを作成します。
 
 ```vue
 <!-- src/App.vue -->
@@ -15,7 +16,7 @@
 
 ```js
 // src/App.vue
-{{#include ../frontend/src/App.vue:13:15}}
+{{#include ../frontend/src/App.vue:14:16}}
 ```
 
 このエンドポイントURLを自分の作成したプロジェクトのものに書き換えると完成です。

frontend/package-lock.json

@@ -10,7 +10,8 @@
       "dependencies": {
         "@vitejs/plugin-vue": "^4.0.0",
         "@vueup/vue-quill": "^1.1.0",
-        "@vueuse/core": "^9.13.0",
+        "axios": "^1.3.4",
+        "lodash.debounce": "^4.0.8",
         "vite": "^4.1.4",
         "vue": "^3.2.47"
       }
@@ -356,11 +357,6 @@
         "node": ">=12"
       }
     },
-    "node_modules/@types/web-bluetooth": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
-    },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-vue/-/plugin-vue-4.0.0.tgz",
@@ -487,87 +483,19 @@
         "vue": "^3.2.41"
       }
     },
-    "node_modules/@vueuse/core": {
+    "node_modules/asynckit": {
-      "version": "9.13.0",
+      "version": "0.4.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-9.13.0.tgz",
+      "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha512-pujnclbeHWxxPRqXWmdkKV5OX4Wk4YeK7wusHqRwU0Q7EFusHoqNA/aPhB6KCh9hEqJkLAJo7bb0Lh9b+OIVzw==",
+      "integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
+    },
+    "node_modules/axios": {
+      "version": "1.3.4",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.3.4.tgz",
+      "integrity": "sha512-toYm+Bsyl6VC5wSkfkbbNB6ROv7KY93PEBBL6xyDczaIHasAiv4wPqQ/c4RjoQzipxRD2W5g21cOqQulZ7rHwQ==",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.16",
+        "follow-redirects": "^1.15.0",
-        "@vueuse/metadata": "9.13.0",
+        "form-data": "^4.0.0",
-        "@vueuse/shared": "9.13.0",
+        "proxy-from-env": "^1.1.0"
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/core/node_modules/vue-demi": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@vueuse/metadata": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-9.13.0.tgz",
-      "integrity": "sha512-gdU7TKNAUVlXXLbaF+ZCfte8BjRJQWPCa2J55+7/h+yDtzw3vOoGQDRXzI6pyKyo6bXFT5/QoPE4hAknExjRLQ==",
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared": {
-      "version": "9.13.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-9.13.0.tgz",
-      "integrity": "sha512-UrnhU+Cnufu4S6JLCPZnkWh0WwZGUp72ktOF2DFptMlOs3TOdVv8xJN53zhHGARmVOsz5KqOls09+J1NR6sBKw==",
-      "dependencies": {
-        "vue-demi": "*"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      }
-    },
-    "node_modules/@vueuse/shared/node_modules/vue-demi": {
-      "version": "0.13.11",
-      "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
-      "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
-      "hasInstallScript": true,
-      "bin": {
-        "vue-demi-fix": "bin/vue-demi-fix.js",
-        "vue-demi-switch": "bin/vue-demi-switch.js"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/antfu"
-      },
-      "peerDependencies": {
-        "@vue/composition-api": "^1.0.0-rc.1",
-        "vue": "^3.0.0-0 || ^2.6.0"
-      },
-      "peerDependenciesMeta": {
-        "@vue/composition-api": {
-          "optional": true
-        }
       }
     },
     "node_modules/call-bind": {
@@ -590,6 +518,17 @@
         "node": ">=0.8"
       }
     },
+    "node_modules/combined-stream": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
+      "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
+      "dependencies": {
+        "delayed-stream": "~1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.8"
+      }
+    },
     "node_modules/csstype": {
       "version": "2.6.21",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.21.tgz",
@@ -626,6 +565,14 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/delayed-stream": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
+      "integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.16.17",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.16.17.tgz",
@@ -682,6 +629,38 @@
       "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.2.0.tgz",
       "integrity": "sha512-xJuoT5+L99XlZ8twedaRf6Ax2TgQVxvgZOYoPKqZufmJib0tL2tegPBOZb1pVNgIhlqDlA0eO0c3wBvQcmzx4w=="
     },
+    "node_modules/follow-redirects": {
+      "version": "1.15.1",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.1.tgz",
+      "integrity": "sha512-yLAMQs+k0b2m7cVxpS1VKJVvoz7SS9Td1zss3XRwXj+ZDH00RJgnuLx7E44wx02kQLrdM3aOOy+FpzS7+8OizA==",
+      "funding": [
+        {
+          "type": "individual",
+          "url": "https://github.com/sponsors/RubenVerborgh"
+        }
+      ],
+      "engines": {
+        "node": ">=4.0"
+      },
+      "peerDependenciesMeta": {
+        "debug": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/fsevents": {
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@@ -828,6 +807,11 @@
       "resolved": "https://registry.npmjs.org/lodash.clonedeep/-/lodash.clonedeep-4.5.0.tgz",
       "integrity": "sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ=="
     },
+    "node_modules/lodash.debounce": {
+      "version": "4.0.8",
+      "resolved": "https://registry.npmjs.org/lodash.debounce/-/lodash.debounce-4.0.8.tgz",
+      "integrity": "sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow=="
+    },
     "node_modules/lodash.isequal": {
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/lodash.isequal/-/lodash.isequal-4.5.0.tgz",
@@ -841,6 +825,25 @@
         "sourcemap-codec": "^1.4.8"
       }
     },
+    "node_modules/mime-db": {
+      "version": "1.52.0",
+      "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
+      "integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
+    "node_modules/mime-types": {
+      "version": "2.1.35",
+      "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
+      "integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
+      "dependencies": {
+        "mime-db": "1.52.0"
+      },
+      "engines": {
+        "node": ">= 0.6"
+      }
+    },
     "node_modules/nanoid": {
       "version": "3.3.4",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz",
@@ -913,6 +916,11 @@
         "node": "^10 || ^12 || >=14"
       }
     },
+    "node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
     "node_modules/quill": {
       "version": "1.3.7",
       "resolved": "https://registry.npmjs.org/quill/-/quill-1.3.7.tgz",

frontend/package.json

@@ -9,7 +9,8 @@
   "dependencies": {
     "@vitejs/plugin-vue": "^4.0.0",
     "@vueup/vue-quill": "^1.1.0",
-    "@vueuse/core": "^9.13.0",
+    "axios": "^1.3.4",
+    "lodash.debounce": "^4.0.8",
     "vite": "^4.1.4",
     "vue": "^3.2.47"
   }

frontend/sandbox.config.json

@@ -0,0 +1,3 @@
+{
+  "template": "nuxt"
+}

frontend/src/App.vue

@@ -1,8 +1,9 @@
 <script setup>
-import { onMounted, ref } from "vue";
+import { ref, onMounted } from "vue";
-import { useDebounceFn } from "@vueuse/core";
+import { QuillEditor } from "@vueup/vue-quill";
-import { Delta, QuillEditor } from "@vueup/vue-quill";
 import "@vueup/vue-quill/dist/vue-quill.snow.css";
+import axios from "axios";
+import debounce from "lodash.debounce";
 
 const id =
   window.localStorage.getItem("id") ??
@@ -14,40 +15,34 @@ window.localStorage.setItem("id", id);
 // `memo-demo` の部分をHasura Cloudプロジェクト名に書き換えてください
 const endpoint = `https://memo-demo.hasura.app/api/rest/page/${id}`;
 
-const content = ref(new Delta([{ insert: "読み込み中…" }]));
+const editor = ref();
-const defaultContent = new Delta([
+const initialContent = {
-  { insert: "メモ帳\n", attributes: { header: 1 } },
+  ops: [
-  { insert: "こんにちは!\n" },
+    { insert: "メモ帳\n", attributes: { header: 1 } },
-  { insert: "これは「Hasuraで作るREST API」のデモ用Webアプリです。\n" },
+    { insert: "こんにちは!\n" },
-  {
+    { insert: "これは「Hasuraで作るREST API」のデモ用Webアプリです。\n" },
-    insert:
+    {
-      "ここに入力した内容は自動的にHasuraに送信されデータベースに保存されます。\n",
+      insert:
-    attributes: { link: endpoint },
+        "ここに入力した内容は自動的にHasuraに送信されデータベースに保存されます。\n",
-  },
+      attributes: { link: endpoint },
-]);
+    },
+  ],
+};
 
 onMounted(async () => {
   console.log("endpoint", endpoint);
-  const res = await fetch(endpoint);
+  const res = await axios.get(endpoint);
-  const data = await res.json();
+  const content = res.data.page?.content ?? initialContent;
-  content.value = new Delta(data.page?.content ?? defaultContent);
+  editor.value.setContents(content);
-  console.log("mounted", data);
+  console.log("content", content);
 });
 
-const updateContent = useDebounceFn(async (content) => {
+const update = debounce(async (content) => {
-  const res = await fetch(endpoint, {
+  await axios.put(endpoint, { content });
-    method: "PUT",
+  console.log("updated", content);
-    body: JSON.stringify({ content }),
+}, 1000);
-  });
-  const data = await res.json();
-  console.log("updated", data);
-}, 250);
 </script>
 
 <template>
-  <QuillEditor
+  <QuillEditor ref="editor" @update:content="update" toolbar="full" />
-    toolbar="full"
-    :content="content"
-    @update:content="updateContent"
-  />
 </template>

frontend/vite.config.js

@@ -3,4 +3,11 @@ import vue from "@vitejs/plugin-vue";
 
 export default defineConfig({
   plugins: [vue()],
+  ...(process.env.CODESANDBOX_SSE === "true" && {
+    server: {
+      hmr: {
+        port: 443,
+      },
+    },
+  }),
 });