nebel/hasura-rest-hands-on
1
0
Fork 0
mirror of https://github.com/kou029w/hasura-rest-hands-on.git synced 2025-01-18 16:08:14 +00:00
Code Issues Projects Releases Wiki Activity

use vite and composition api

Browse source
This commit is contained in:
Nebel 2022-02-28 14:31:41 +09:00
parent 5c9c50a4b4
commit 1cd14fe1d5
8 changed files with 346 additions and 7985 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
docs/create-vue-app.md
View file

@ -10,10 +10,6 @@
{{#include ../frontend/src/App.vue}} {{#include ../frontend/src/App.vue}}
``` ```
![](https://lh3.googleusercontent.com/Z6UJraog11NnBg8lhyrAcdWRhfTEjTbOMv2kRLGTDzJF-d28Bn4MN7W-kymVztsbMa5SGXx8qS-NQoKF9o_pu2UlI9FJyS4AljIEOcJMULEsic-jk5TbOHtBF0eCerbGaQAcxb45qw=w1280)
![](https://lh3.googleusercontent.com/WYpxLUGM52BZ0m5cQ_ZsEjfljdwLbaFkN47XTKp0Z9BPsDPhVImcR3rt9oWop-59ABCF2ubfsQOw2yyZAoT1GIkcjnZ4DCReg5Qn22pyOVT6DblipYIg3S0OZekcCziKxX9Fc6x_BA=w1280)
Hasuraのコンソールにアクセスすると、実際にデータが更新されていることを確認できます。 Hasuraのコンソールにアクセスすると、実際にデータが更新されていることを確認できます。
![](https://lh3.googleusercontent.com/twteosRUkmMlBoa8PXU3UXC9umek-TzQ1kwOWZIShW7fKvW_4tVtG7B3Ue-olldhxh05x1JTFtt_Oxn2nLxcDPEGBv32bkE2zjpqL7heEjV54jkDgYqOm1tEq02qvnKoqu5yaSKRZA=w800) ![](https://lh3.googleusercontent.com/twteosRUkmMlBoa8PXU3UXC9umek-TzQ1kwOWZIShW7fKvW_4tVtG7B3Ue-olldhxh05x1JTFtt_Oxn2nLxcDPEGBv32bkE2zjpqL7heEjV54jkDgYqOm1tEq02qvnKoqu5yaSKRZA=w800)

3
frontend/babel.config.js
View file

@ -1,3 +0,0 @@
module.exports = {
presets: ["@vue/cli-plugin-babel/preset"],
};

4
frontend/codesandbox.json
View file

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

1
frontend/public/index.html → frontend/index.html
View file

@ -4,6 +4,7 @@
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width" /> <meta name="viewport" content="width=device-width" />
<title>vue3-hasura-rest</title> <title>vue3-hasura-rest</title>
<script type="module" src="/src/main.js"></script>
</head> </head>
<body> <body>
<div id="app"></div> <div id="app"></div>

15
frontend/package.json
View file

@ -3,18 +3,17 @@
"version": "1.0.0", "version": "1.0.0",
"private": true, "private": true,
"scripts": { "scripts": {
"serve": "vue-cli-service serve", "dev": "vite",
"build": "vue-cli-service build" "build": "vite build"
}, },
"dependencies": { "dependencies": {
"@vueup/vue-quill": "^1.0.0-beta.7", "@vueup/vue-quill": "^1.0.0-beta.8",
"axios": "^0.21.1", "axios": "^0.26.0",
"lodash.debounce": "^4.0.8", "lodash.debounce": "^4.0.8",
"vue": "^3.1.5" "vue": "^3.2.31"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "^4.5.13", "@vitejs/plugin-vue": "^2.2.2",
"@vue/cli-service": "^4.5.13", "vite": "^2.8.4"
"@vue/compiler-sfc": "^3.1.5"
} }
} }

38
frontend/src/App.vue
View file

@ -1,13 +1,5 @@
<template>
<QuillEditor
ref="editor"
:content="{ ops: [{ insert: '読み込み中…' }] }"
@update:content="update"
toolbar="full"
/>
</template>
<script> <script>
import { ref, onMounted } from "vue";
import { QuillEditor } from "@vueup/vue-quill"; import { QuillEditor } from "@vueup/vue-quill";
import "@vueup/vue-quill/dist/vue-quill.snow.css"; import "@vueup/vue-quill/dist/vue-quill.snow.css";
import axios from "axios"; import axios from "axios";
@ -17,19 +9,29 @@ import debounce from "lodash.debounce";
const endpoint = "https://memo-demo.hasura.app/api/rest/page/1"; const endpoint = "https://memo-demo.hasura.app/api/rest/page/1";
export default { export default {
name: "App",
components: { QuillEditor }, components: { QuillEditor },
beforeMount() { setup() {
this.update = debounce(async (content) => { const editor = ref();
onMounted(async () => {
const res = await axios.get(endpoint);
const content = res.data.page?.content;
editor.value.setContents(content);
console.log("content", content);
});
const update = debounce(async (content) => {
await axios.put(endpoint, { content }); await axios.put(endpoint, { content });
console.log("updated", content); console.log("updated", content);
}, 1000); }, 1000);
}, return { editor, update };
async mounted() {
const res = await axios.get(endpoint);
const content = res.data.page?.content;
this.$refs.editor.setContents(content);
console.log("content", content);
}, },
}; };
</script> </script>
<template>
<QuillEditor
ref="editor"
:content="{ ops: [{ insert: '読み込み中…' }] }"
@update:content="update"
toolbar="full"
/>
</template>

13
frontend/vite.config.js Normal file
View file

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

8253
frontend/yarn.lock
View file

File diff suppressed because it is too large Load diff