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");

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");

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.

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

Github Repo

Server Action Code:

Post Page Code:

Issue:

Similar Threads

Similar Threads

Similar Threads