Estoy usando SvelteKit con Supabase. Cada vez que se envía el formulario, me gustaría ver la actualización en vivo de DOM. Sin embargo, se necesita una actualización para ver los cambios. ¿Cómo actualizaría en vivo el DOM cada vez que se inserta una nueva fila en la tabla?
<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>hilo!
La única forma de hacer algo cuando se cambian los datos es usando supabase en tiempo real, sin embargo, no estoy al 100% de cómo se recargaría el DOM, pero intentaría usar goto ( ruta actual ) . No tengo una computadora accesible, así que no puedo confirmar que eso recargaría el DOM, aunque creo que debería hacerlo.
Esta es una forma en que podría resolverse usando lo que acabo de decir:
(async () => {const mySubscription = supabase .from('scores') .on('insert', (payload) => { goto(current route) }) .subscribe()})()Aunque eso significaría que si alguien inserta en la tabla, se recargará, lo que supongo que no es bueno, pero supongo que podría usar goto () en la función de publicación como tal:
const postData = async function(nameVal, scoreVal) { const { data, error } = await supabase .from('scores') .insert([{ name: nameVal, score: scoreVal }]) if (data) goto(route) }Siempre que goto() realmente recargue el DOM, resuelve el problema de que el usuario tendría que recargar la página manualmente pero... la página se recarga, no se actualiza
Si solo le importan las filas que ha insertado usted mismo a través de la página actual, probablemente pueda actualizar el estado local.
Algo parecido a esto:
// 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}