How to prevent page reload on action / query

I use lazy loading, defining preload function, deferStream, and I can see visibly the data added in real time to the page but it forcefully refreshes the page
How do I stop this? I didn't think server actions were meant to do this anyways

const addMenuItemToDatabase = action(async (formData: FormData) => {
  "use server";
  ...
return reload({
      revalidate: queryMenuItems.keyFor(formData.get("userId")!.toString()),
    });
});

const addMenuItemToDatabase = action(async (formData: FormData) => {
  "use server";
  ...
return reload({
      revalidate: queryMenuItems.keyFor(formData.get("userId")!.toString()),
    });
});

const addMenuItemToDatabase = action(async (formData: FormData) => {
  "use server";
  ...
return reload({
      revalidate: queryMenuItems.keyFor(formData.get("userId")!.toString()),
    });
});

const addMenuItemToDatabase = action(async (formData: FormData) => {
  "use server";
  ...
return reload({
      revalidate: queryMenuItems.keyFor(formData.get("userId")!.toString()),
    });
});

export const route = {
  preload() {
    return queryMenuItems(useSessionContext().userData.id);
  },
} satisfies RouteDefinition;

export const route = {
  preload() {
    return queryMenuItems(useSessionContext().userData.id);
  },
} satisfies RouteDefinition;

export const route = {
  preload() {
    return queryMenuItems(useSessionContext().userData.id);
  },
} satisfies RouteDefinition;

export const route = {
  preload() {
    return queryMenuItems(useSessionContext().userData.id);
  },
} satisfies RouteDefinition;

and then a simple server query

How to prevent page reload on action / query

Similar Threads

Similar Threads

Similar Threads