Preview isn't working for frontpage

[MKlblangenois]

Description

When I try to reach the frontpage preview, I got my default page template, without data in props.
Other page and single works fine.

Steps to reproduce

1. Go to your WordPress frontpage edition
2. Click on preview link

Additional context

Result with console.log of preview.tsx props:

Expected result:

@faustwp/core Version

3.0.1

@faustwp/cli Version

3.0.1

FaustWP Plugin Version

1.3.1

WordPress Version

6.5.4

Additional environment details

• graphql: ^16.6.0
• PHP Version: 8.2
• Hosting: local and One.com

Please confirm that you have searched existing issues in the repo.

• Yes

[theodesp]

Hello @MKlblangenois. Is your front-page template containing the $asPreview: Boolean = false in the query? if not then the preview support will not be working there.

[MKlblangenois]

Hi @theodesp, yes, the template as the $asPreview, like other template :

Component.query = gql`
	query GetFrontPageData($asPreview: Boolean) {
		...RootLayoutFragment

		page(id: "/", idType: URI, asPreview: $asPreview) {
			content
			...FeaturedImageFragment

			editorBlocks(flat: false) {
				...BlocksFragment
			}

                         ...

[theodesp]

Thanks @MKlblangenois . Does your reading settings in WordPress point to a specific page?

I was able to preview the front-page using by pointing to the HOME pages as a static page. This preview uses the page.js template instead of the front-page.js template.

I'm not sure if its possible to trigger a preview on a HOME page otherwise. The seed query does not resolve to page content when I use page(id: "/", idType: URI, asPreview: $asPreview) { on the front-page template and when the reading settings are set to latest-posts. Unless there is a way that I'm not aware of.

[MKlblangenois]

Hi @theodesp, thanks for your following.

My front-page is already set in reading settings like that:

The problem here is that the preview of HOME use page.js template and not the front-page.js template. So, with that, the front-page preview doesn't take my GraphQL query from FrontPage.query, but from Page.query, and the problem is the front-page has a different query, using custom field and not only the blocks from Gutenberg.

[theodesp]

Hello @MKlblangenois. I think this happens because the preview on a HOME page resolves to a page.js when you try to preview it.
The seedNode data of the page that is assigned as front-page is

{
    "__typename": "Page",
    "uri": "http://localhost:3000/?preview=true&previewPathname=/&p=2&page_id=2&typeName=Page",
    "id": "cG9zdDo3Mg==",
    "databaseId": 72,
    "isContentNode": true,
    "slug": "2-autosave-v1",
    "contentType": {
        "__typename": "ContentNodeToContentTypeConnectionEdge",
        "node": {
            "__typename": "ContentType",
            "name": "page"
        }
    },
    "template": {
        "__typename": "DefaultTemplate",
        "templateName": "Default"
    },
    "isFrontPage": false,
    "isPostsPage": false
}

as you can see since the "isFrontPage": false, then the template resolved will be a page.js instead of the front-page.js. I'm not sure if thats the intended behavior here since the previewPathname URI points to the index page "/".

You might be able to add a custom hook to change the order of the possible templates list but I haven't tested that theory yet.

// config
addFilter(
    hookName: 'possibleTemplatesList',
    namespace: string,
    callback: (
      possibleTemplates: string[],
      context: { seedNode: SeedNode },
    ) => string[],
    priority?: number | undefined,
  ): void;

[felipesnts]

Hi @MKlblangenois, were you able to find a solution to this? I am also stuck with the same issue.

[MKlblangenois]

Hi @theodesp, thanks for the lead, it actually works by manually adding the model. I just have a quick question that I didn't see in the docs. Is it possible to use an async function in the filter callback? I would like to retrieve the contentNode via the ID provided by the seedNode using GraphQL request, but the TS schema does not seem to go in this direction and doing so returns me a Promise

Hi @felipesnts ! Yes, I was able to find a solution using addFilter. This is the way I do it:

// # faust.config.js

import { ExtendPossibleTemplateList } from "./plugins/possibleTemplateList";

// ...

export default setConfig({
	templates,
	plugins: [new ExtendPossibleTemplateList()],
	// ...
});

// # ./plugins/possibleTemplateList.ts

import { FaustHooks, FaustPlugin } from "@faustwp/core";

export class ExtendPossibleTemplateList implements FaustPlugin {
	apply(hooks: FaustHooks) {
		const { addFilter } = hooks;

		addFilter(
			"possibleTemplatesList",
			"nextpress",
			(possibleTemplates, { seedNode }) => {
				if (
					seedNode &&
					seedNode?.slug &&
					seedNode?.slug?.includes("autosave")
				) {
					if (!seedNode?.uri) return possibleTemplates;

					try {
						const seedNodeURI = new URL(seedNode.uri);
						const previewPath =
							seedNodeURI.searchParams.get("previewPathname");

						if (previewPath === "/") {
							// Add front-page template
							possibleTemplates.unshift("front-page");
						}
					} catch (e) {
						console.error(e);
					}
				}

				return possibleTemplates;
			}
		);
	}
}

Note

This only work if you haven't i18n setup. It only works by checking if previewPathname is "/" (equal to isFrontPage on WordPress)

[alex-reid]

I had the same issue. Here is the solution that worked for me:

Interim Solution: I've managed to get around this by adding a page template for the home page and then just redirecting it to my 'front-page' template. I did seem to have a secondary problem where the template would load twice, once without data before the preview loaded properly. I resolved this by adding in a preview check at the top of the 'front-page' template.

export default function Component(props) {
  if (props.asPreview && !props.data) return null;
  const { title: siteTitle, description: siteDescription } =
    props.data.generalSettings;

  const menuItems = props.data.primaryMenuItems.nodes;
  const { globalContentSettings } = props.data;
  const { homePageBlocks } = props.data.page;

The if (props.asPreview && !props.data) return null; just returns an empty page if it fails, then it picks up with the proper template once the query resolves properly