Live Preview doesn't take into consideration hooks

[vixalien]

Link to reproduction

No response

Describe the Bug

I have a collection named Posts where I have a hook like the following:

// ... Posts collection
{
  hooks: {
    afterRead: [populateAuthors],
  },
}

// populateAuthors hook
import type { User } from "payload/auth";
import type { CollectionAfterReadHook } from "payload/types";

export const populateAuthors: CollectionAfterReadHook = async ({
  doc,
  req: { payload },
}) => {
  if (doc?.authors) {
    const ids = doc.authors
      .map((author: User) => (typeof author === "object" ? author?.id : author))
      .filter((id: string) => typeof id == "string");

    const authorDocs = await payload.find<"users">({
      collection: "users",
      where: { id: { in: ids } },
    });

    doc.populatedAuthors = authorDocs.docs.map((authorDoc) => ({
      id: authorDoc.id,
      name: authorDoc.name,
    }));
  }

  return doc;
};

however, when I turn on live preview, all the data will be there except the populatedAuthors key, because it is populated by a hook, and that hook works after read, and it seems useLivePreview from @payloadcms/live-preview-react doesn't execute the hooks (or at least cache their results).

To Reproduce

Create an afterRead hook.

The useLivePreview function doesn't execute the hooks, so the authors never get updated and is returned as null. It would be useful to cache the result of the previous run and merge it with the result from useLivePreview, or at least simulate the hook being re-run after each edit to avoid some network+database requests.

Payload Version

3.0.0-beta.18

Adapters and Plugins

@payloadcms/live-preview-react