I’m definitely very new to this so apologies if it’s a simple answer.
// treatment.js
import { writable } from 'svelte/store';
export const treatment_uuid = writable('');
export const treatment_name = writable('');
export const error = writable('');
// +page.server.js
import { supabase } from '$lib/supabaseClient';
import { treatment_uuid, treatment_name, error } from '$stores/treatment';
export async function load({ params }) {
console.log('Params:', params);
const { data, error: fetchError } = await supabase
.from('treatments')
.select('*')
.eq('name', params.name)
.single();
if (fetchError) {
console.log('Error fetching data:', fetchError.message);
error.set(fetchError.message);
return { props: {} };
}
console.log('Data fetched from Supabase:', data);
treatment_uuid.set(data.uuid);
treatment_name.set(data.name);
console.log('Returning treatment_uuid:', data.uuid);
console.log('Returning treatment_name:', data.name);
return {
props: {}
};
}
<!-- +page.svelte -->
<script>
import { treatment_uuid, treatment_name, error } from '$stores/treatment';
import { get } from 'svelte/store';
console.log('Received props:', {
treatment_uuid: get(treatment_uuid),
treatment_name: get(treatment_name),
error: get(error)
});
</script>
<main>
<h1>Treatment Details</h1>
{#if $error}
<p>Error: {$error}</p>
{:else}
<p>Treatment UUID: {$treatment_uuid}</p>
<p>Treatment Name: {$treatment_name}</p>
{/if}
</main>
This is the output I get and it shows the data for a second then goes to:
Params: { name: 'HIL-214' }
Data fetched from Supabase: { uuid: 'd2397937-7a10-461c-a476-a7627965d2c1', name: 'HIL-214' }
Returning treatment_uuid: d2397937-7a10-461c-a476-a7627965d2c1
Returning treatment_name: HIL-214
Received props: {
treatment_uuid: 'd2397937-7a10-461c-a476-a7627965d2c1',
treatment_name: 'HIL-214',
error: ''
}
Treatment Details
Treatment UUID: (for a second the right UUID is here then blank)
Treatment Name: (for a second the right name is here then blank)
Tried different methods to pass the data into it and most just have '' or undefined. This is the first the data has actually shown up even if just temporarily.
user3565485 is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
SvelteKit uses server-side rendering on first load. You only set data on the server (via +page.server.js) so the stores only have data there; when the client takes over and hydrates the page, the client-side stores are empty and replace the server-side rendered data.
You generally should avoid global state like this (any export of values from modules is global). All users share the same instance of the global state on the server, if the stores e.g. are not reset every time, you could leak data between users.
Return data via the data returned from the load function.
If you need the data in deeper components, there already is a page store you can use ($page.data).
Other kinds of data can be transferred via contexts or regular props.