SvelteKit Form actions and update UI

I am a beginner with SvelteKit and trying to build a todo app. This question focuses on the following problem I have, but also asking if it's the correct logic to do data fetching and UI update.

My form is this:

 <form
      action="?/create"
      method="POST"
      class="flex flex-col gap-5 justify-center items-center w-2/3 mx-auto"
      use:enhance
    >
      <div class="w-2/3">
        <label class="block text-sm text-gray-500" for="todo"> Title </label>
        <input
          class="border border-gray-300 w-full rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:border-gray-500 transition duration-100 ease-linear p-1 text-gray-700"
          type="text"
          name="title"
          bind:value={title}
        />
      </div>
      <div class="w-2/3">
        <label class="block text-sm text-gray-500" for="todo">
          Description
        </label>
        <textarea
          rows="4"
          class="w-full border border-gray-300 rounded-md shadow-sm hover:border-gray-400 focus:outline-none focus:border-gray-500 transition duration-100 ease-linear p-1 text-gray-700"
          name="desc"
          bind:value={desc}
        />
      </div>
      <div>
        <button
          class="bg-blue-500 text-white px-8 py-2 rounded-md font-semibold text-lg hover:bg-blue-600 transition duration-100 shadow-xl"
        >
          Create
        </button>
      </div>
    </form>

On the +page.server.js I catch the form action like so:

export const actions = {
  create: async ({ cookies, request }) => {
    const data = await request.formData();
    if (data.get("title").length === 0) {
      return fail(400, {
        error: true,
        message: "Title can't be empty",
      });
    }
    if (data.get("desc").length === 0) {
      return fail(400, {
        error: true,
        message: "Description can't be empty",
      });
    }
    const todo = {
      title: data.get("title"),
      description: data.get("desc"),
    };
    try {
      const newTodos = await createTodo(todo);
      todosStore.set(newTodos);
    } catch (err) {
      return fail(422, {
        description: "Something went wrong",
      });
    }
  },
};

The createTodo function is the following:

export const createTodo = async (todo) => {
  try {
    const todoRes = await db.collection("ToDo").insertOne({
      todo,
    });
    const newTodos = await getTodos();
    return newTodos;
  } catch (err) {
    console.log(err);
  }
};

I then subscribe to the todosStore on my page.svelte file and render a list of todos like this:

 import { todosStore } from "../stores/todoStore.js";

 let todos = $todosStore;

 <ToDoList {todos} />

While I do send the POST request to the backend and my new todo is correctly added to the database and the function also does its work, I do not see the change on my UI.

What is the problem with my code? Also is this the correct way to apply this kind of logic in SvelteKit apps?

Thank you.

You cannot/should not use stores on the server.

The data will not be magically transferred, any store reference on the server is a completely separate instance from the client.

Your action should return the todo-object, which will then be passed to the form property of the +page.svelte component. If you need to imperatively interact with the returned data as in this case, you can add a parameter to enhance to intercept the return data and e.g. fire an event that an item has been added or add the item to a global store.

Example:

<form use:enhance={onSubmit}>

const onSubmit = () => {
    return ({ result, update }) => {
        if (result.type === "success") {
            const todo = result.data;
            console.log("New todo", todo);
        }
        else {
            update();
        }
    }
}

An alternative to this would be using data loading. On form submission the data property of the page will automatically reload, so if you have a load function that gets all items from the DB and the page data is passed to the list component, it will update automatically.