Alternative for Svelte 5 store initialization in load()

[WitnessMee]

I am creating a frontend for the openai api in Svelte 5. It's basically a simple version of LibreChat.

Currenlty I am using a store that contains the messages of a conversation. I set the store in the load() of my +page.ts. As I understand it, I should not be setting the store in a load() so I am looking for an alternative method.

Here is some more information:

message-store.svelte.ts:

export const messageStore: { messages: Message[] } = $state({ messages: [] });

The store is set in the load of routes/c/[slug]/+page.ts

export const load: PageLoad = async ({ params, fetch }) => {
  const response = await fetch(`/api/conversations/${params.slug}/messages`);
  messageStore.messages = await response.json();
}

Then routes/c/[slug]/+page.svelte contains <Home> and that contains a <SideBar> with a list of the conversations and <ChatInterface> that shows the messages.

When i click another conversation it triggers a state change params.slug and thus messageStore.messages are also updated.
Inside <ChatInterface> I show all messages for a conversation. When the user asks a new questions, it adds the new message to the messageStore and calls addMessage (the backend writes to a sqlite db and i don't await it):

messageStore.messages.push(newMessage);
addMessage(newMessage);

const addMessage = (message: Message) => {
    fetch(`/api/conversations/${conversationId}/messages`, {
      method: "POST",
      headers: {
        "Content-Type": "application/json",
      },
      body: JSON.stringify({ message }),
    });
  };

When chatGPT answers, I receive an EventStream and then I create a new message in the messageStore for the first item of the stream, then add content for that message for each item in the event stream in the store. When the event stream is done i call addMessage.

All of this works but I feel like there is room for improvement here.

There is another implementation that also worked for me.
I dont use a store and in routes/c/[slug]/+page.ts I still fetch but return:

...  
const messages = await response.json();
 return {
    conversationId,
    messages,
 };

Then I pass the data.messages property to <Home> and to <ChatInterface>.
And in ChatInterface.svelte i do:

let {
    conversationId,
    messagesHistory,
  }: { conversationId?: number; messagesHistory: Message[] } = $props();
  
let messages: Message[] = $state([]);

onMount(() => {
  messages = messagesHistory;
});

$effect(() => {
  if (
    !messages.length ||
    !conversationId ||
    messages[0].conversation_id === conversationId
  )
    return;

  messages = messagesHistory;
});

And also of course I also changed messageStore.messages to messages

Is that better? I know $effect should also be avoided when possible. I do use the if to avoid an update for every state change.
I also tried just using messagesHistory prop to add and display messages, but that stops working after 3 mutations. Not sure why 3, but I know what props should not be mutated. I can make the prop $bindable but that makes no sense because the parent doesn't need updates on messages. I can also not use $derived because I cannot update a derived variable.

I also have experience in react and in react I would just do this:

const MessageList: React.FC<MessageListProps> = ({ messagesHistory }) => {
  const [messages, setMessages] = useState<Message[]>([]);

  useEffect(() => {
    setMessages(messagesHistory);
  }, [messagesHistory]);

That seems more elegant because the useEffect is only called when messageHistory is changed. Which is exactly the right time because it means the user clicked on another conversation.

I have just started my journey with Svelte 5 and I am loving it so far and I feel there must be a solution that is at least as elegant as that. Either with a store or another way.

[brunnerh]

You should not use global state as soon as your application has some server component (e.g. SSR) and separate users. The state will be shared between users on the server which can lead to data leaks.

So you generally should return data directly from load functions.

The additional onMount should be skippable; $effect callbacks run on mount, so usually a single $effect to update the local state would be enough. The if statement seems a bit redundant, the page also should only receive messages relevant to the conversation. (The ID from the URL can be accessed via $page.params and does not need to be passed by load.)

You should not need to manually synchronize local state variables unless you change them locally for some reason. In this example, if you add messages via a form action with enhance, that would automatically invalidate the data, thus re-invoke load functions and cause data on the page to be updated top-down. One reason you might want a local copy would be for optimistic updates. Data can also be manually invalidated if you have some external event and want to reload the messages.

Very simplified example of a page showing messages:

// +page.server.ts
import type { Actions } from '@sveltejs/kit';
import type { PageServerLoad } from './$types';
import { api } from './api';

export const load = (async ({ params }) => {
  const id = +params.id;
  return { messages: await api.getMessages(id) };
}) satisfies PageServerLoad;

export const actions: Actions = {
  async add({ params, request }) {
    const data = await request.formData();

    const message = data.get('message') as string;
    const id = +params.id!;

    await api.addMessage(id, message);

    return {}; // could e.g. add message for `form` prop here
  }
}

<!-- +page.svelte -->
<script lang="ts">
    import { enhance } from '$app/forms';

    let { data } = $props();
</script>

{#each data.messages as message}
    <div>{message}</div>
{/each}

<form action="?/add" method="post" use:enhance>
  <textarea name="message"></textarea> <br>
  <button>Add</button>
</form>

[WitnessMee]

Thank you, I now have several options that are better than my current implantation. 👍