SolidJS•7mo ago

Server Action Updates Load Function Server-Side but Stays Stale Client-Side

Hi everyone, I'm facing an issue with a server action and post page in my project and could really use some assistance. Github Repo Form: https://github.com/RockITFuel/solidstart/blob/main/src/components/AddPostDialog.tsx Page: https://github.com/RockITFuel/solidstart/blob/main/src/routes/posts.tsx Server Action Code:

const addPost = action(async (formData: FormData) => {
  "use server";
  console.log("formData: ", formData.get("title"));
  //   await new Promise((resolve, reject) => setTimeout(resolve, 1000));

  const data = createPost.safeParse(formDataToObject(formData));
  if (data.success === false) {
    console.log("error: ", data.error.errors);
    return redirect("/posts");
  }

  console.log("data: ", data);
  const user = await getUser();
  console.log("user: ", user, {
    ...data.data,
    authorId: user.id,
  });
  try {
    const post = await db.post.create({
      data: {
        ...data.data,
        authorId: user.id,
      },
    });
    console.log("post: ", post);
  } catch (error) {
    console.log("error: ", error);
  }

  revalidate(getPosts.key);
  throw reload();
}, "addPost");

const addPost = action(async (formData: FormData) => {
  "use server";
  console.log("formData: ", formData.get("title"));
  //   await new Promise((resolve, reject) => setTimeout(resolve, 1000));

  const data = createPost.safeParse(formDataToObject(formData));
  if (data.success === false) {
    console.log("error: ", data.error.errors);
    return redirect("/posts");
  }

  console.log("data: ", data);
  const user = await getUser();
  console.log("user: ", user, {
    ...data.data,
    authorId: user.id,
  });
  try {
    const post = await db.post.create({
      data: {
        ...data.data,
        authorId: user.id,
      },
    });
    console.log("post: ", post);
  } catch (error) {
    console.log("error: ", error);
  }

  revalidate(getPosts.key);
  throw reload();
}, "addPost");

Post Page Code:

export const route = {
  load: () => getPosts(),
} satisfies RouteDefinition;

export default function Posts() {
  const posts = createAsync(() => getPosts());

  return (
    <>
      <AddPostDialog />
      <pre>{JSON.stringify(posts()?.[0], null, 2)}</pre>
    </>
  );
}

export const getPosts = cache(async () => {
  "use server";
  console.count("getPosts");
  const user = await getUser();

  const posts = await db.post.findMany({
    orderBy: { createdAt: "desc" },
    include: { author: true },
  });
  console.log("last post: ", posts[0].title);

  return posts;
}, "posts");

export const route = {
  load: () => getPosts(),
} satisfies RouteDefinition;

export default function Posts() {
  const posts = createAsync(() => getPosts());

  return (
    <>
      <AddPostDialog />
      <pre>{JSON.stringify(posts()?.[0], null, 2)}</pre>
    </>
  );
}

export const getPosts = cache(async () => {
  "use server";
  console.count("getPosts");
  const user = await getUser();

  const posts = await db.post.findMany({
    orderBy: { createdAt: "desc" },
    include: { author: true },
  });
  console.log("last post: ", posts[0].title);

  return posts;
}, "posts");

Issue: So far on the server, it's reloading the data correctly with the newly added post, but it's not updating the client-side state. Any ideas on how to resolve this issue? Thanks in advance for your help!

GitHub

solidstart/src/components/AddPostDialog.tsx at main · RockITFuel/so...

Contribute to RockITFuel/solidstart development by creating an account on GitHub.

GitHub

solidstart/src/routes/posts.tsx at main · RockITFuel/solidstart

Contribute to RockITFuel/solidstart development by creating an account on GitHub.

4 Replies

Brendonovich•7mo ago

what is 'the client side state', and what do you want it to update to? just confused since you already said it's reloading the data correctly

LukaOP•7mo ago

On the server its printing out the data correctly in the console, but on the client there is no update, only after a reload The redirect work if i go to a different page then the form, but i want the form to be inside a dialog on the same page as the table data I have to manualy reload the page at the end to refresh the client data

LukaOP•7mo ago

Reload just doesn't reload the page data? https://docs.solidjs.com/solid-router/reference/data-apis/response-helpers

Gaming

Programming

Server Action Updates Load Function Server-Side but Stays Stale Client-Side