使用SvelteKit和Supadase对DOM进行实时更新

Question

我正在将SvelteKit与Suabase一起使用。每当提交表单时，我都希望看到DOM实时更新。但是，需要刷新才能看到更改。每当向表中插入新行时，我将如何实时更新DOM？

<script>
import { supabase } from '$lib/supabaseClient'
const getData = async function() {
const { data, error } = await supabase
.from('scores')
.select('*')
return data
}
let newRowName = '';
let newRowScore = 0;
const postData = async function(nameVal, scoreVal) {
const { data, error } = await supabase
.from('scores')
.insert([{ name: nameVal, score: scoreVal }])
}
</script>
{#await getData()}
<p>Waiting...</p>
{:then data}
{#each data as singleData}
<p>{singleData.name}: {singleData.score}</p>
{/each}
{:catch error}
<p>Error occured</p>
{/await}
<form on:submit|preventDefault="{() => postData(newRowName, newRowScore)}">
<label for="name">Name:</label>
<input type="text" id='name' bind:value='{newRowName}' required />
<label for="score">Score:</label>
<input type="number" id='score' bind:value='{newRowScore}' required />
<button>Add row</button>
</form>

Answer 1

hilo！

当数据更改时，唯一的方法是使用supabase realtime，但我不知道如何100%重新加载DOM，但我会尝试使用goto(当前路由(。我没有可访问的计算机，所以我不能确认这会重新加载DOM，尽管我认为它应该重新加载。

这是一种可以使用我刚才所说的解决方法：

(async () => {const mySubscription = supabase
.from('scores')
.on('insert', (payload) => {
goto(current route)
})
.subscribe()})()

这意味着，如果有人在表中插入，它会重新加载，我认为这不好，但我想你可以在post函数中使用goto((：

const postData = async function(nameVal, scoreVal) {
const { data, error } = await supabase
.from('scores')
.insert([{ name: nameVal, score: scoreVal }])
if (data) goto(route)
}

只要goto((确实重新加载了DOM，它就解决了用户必须手动重新加载页面的问题，但…页面是重新加载的，而不是更新的

Answer 2

如果您只关心通过当前页面插入的行，那么您可能只需要更新本地状态。

大致如下：

// Local state, so it can be updated
let rows = null;
const getData = async function() {
const { data, error } = await supabase
.from('scores')
.select('*');
// Update local state only
rows = data;
}
// ...
const postData = async function(nameVal, scoreVal) {
const { data, error } = await supabase
.from('scores')
.insert([{ name: nameVal, score: scoreVal }])
// Assuming that data will be the row
rows = [...rows, data];
}

{#await getData()}
<p>Waiting...</p>
{:then _}
{#each rows as row}
<p>{row.name}: {row.score}</p>
{/each}
{:catch error}
<p>Error occured</p>
{/await}