Preview without WordpressTemplates (FaustWp 0.2.0)

[Julhol-droid]

Hello I want to implement the Preview Page without using the WordpressTemplate Component, as my project is not ready to use Templates yet. Is there a way to do so?. I tried to do so, by looking into the Wordpress Component and implementing the Preview Logic directly into my Preview page in Next js (pages/preview.tsx). The File looks like this, and says im Authenticated, but will not send the Header with the request. Additional when logging the getAccessToken() I always get undefined, although I should be authenticated, therefore there should be an accessToken.

pages/preview.tsx:

export default function Preview() {
  const [isAuthenticated, setIsAuthenticated] = useState<isAuthenticated>(null)
  const [templateNode, setTemplateNode] = useState<GetPreviewNodeQuery['contentNode']>(null)
  const [isLoading, setIsLoading] = useState(false)

  const router = useRouter()
  const id = router.query.page_id

  /**
   * Ensure we are authenticated.
   */
  useEffect(() => {
    void (async () => {
      const ensureAuthRes = await ensureAuthorization({
        redirectUri: window.location.href
      })

      if (ensureAuthRes !== true && ensureAuthRes?.redirect) {
        window.location.replace(ensureAuthRes.redirect)
        return
      }

      setIsAuthenticated(ensureAuthRes)
    })()
  }, [])

  useEffect(() => {
    if (isAuthenticated !== true) {
      return
    }

    void (async () => {
      const client = getApolloClient()

      if (!templateNode) {
        setIsLoading(true)
        let queryArgs: QueryOptions = {
          query: GetPreviewNodeDocument,
          variables: {
            id: id?.toString()
          },
          context: {
            headers: {
              Authorization: `bearer ${getAccessToken()}`
            }
          }
        }

        console.log('Query node with query args: ', queryArgs)

        const templateQueryRes = await client.query<GetPreviewNodeQuery>(queryArgs)

        setTemplateNode(templateQueryRes.data?.contentNode)

        setIsLoading(false)
      }
    })()
  }, [isAuthenticated])

  if (isLoading) {
    return <p>loading...</p>
  }

  if (templateNode === null) {
    return <p>Post not found. You are {isAuthenticated !== true && 'not'} authenticated</p>
  }

  const typeName = templateNode.__typename

  switch (typeName) {
    case 'Page': {
      return <PageComponent page={templateNode as GetPageQuery['page']} />
    }
    case 'Post': {
      return <PostPageComponent post={templateNode as GetPostQuery['post']} />
    }
    // Add custom post types here as needed
    default: {
      throw new Error(`Unknown post type: ${typeName}`)
    }
  }
}

Any Idea on that? Would be appreciated.

[theodesp]

Hey @Julhol-droid. You are right. Currently we do not support previews without using the Template System. I'm adding a ticket to explore this possibility and I will let you know for any updates.

Let me review the code that you posted though and see what is the problem.

[theodesp]

The browser cannot handle commonJs (require imports)

[theodesp]

What happens is that the browser uses the fetchAccessToken in @faustwp/core/dist/mjs/auth so they are two different modules.

[theodesp]

You might be able to use:
import { getAccessToken } from '@faustwp/core/dist/mjs/auth'; Which seems to work in the browser

[theodesp]

This is what I managed to do locally:

import {gql} from '@apollo/client';
import {useEffect, useState} from 'react';
import { useRouter } from 'next/router';
import { getAccessToken } from '@faustwp/core/dist/mjs/auth';
import {ensureAuthorization, getApolloClient} from '@faustwp/core';

export default function Preview() {
  const [isAuthenticated, setIsAuthenticated] = useState(null)
  const [isPreview, setIsPreview] = useState(false)
  const [templateNode, setTemplateNode] = useState(null)
  const [isLoading, setIsLoading] = useState(false)
  console.debug(getAccessToken());

  const router = useRouter()
  const id = router.query.page_id

  useEffect(() => {
    if (!window) {
      return;
    }

    setIsPreview(window.location.search.includes('preview=true'));
  }, []);

  /**
   * Ensure we are authenticated.
   */
  useEffect(() => {
    if (isPreview === null || isPreview === false) {
      return;
    }

    void (async () => {
      const ensureAuthRes = await ensureAuthorization({
        redirectUri: window.location.href,
      });

      if (ensureAuthRes !== true && ensureAuthRes?.redirect) {
        window.location.replace(ensureAuthRes.redirect);
      }

      setIsAuthenticated(ensureAuthRes);
    })();
  }, [isPreview]);

  useEffect(() => {
    // We don't know yet if this is a preview route or not
    if (isPreview === null) {
      return;
    }

    // This is a preview route, but we are not authenticated yet.
    if (isPreview === true && isAuthenticated !== true) {
      return;
    }

    void (async () => {
      const client = getApolloClient()

      if (!templateNode) {
        setIsLoading(true)
        let queryArgs = {
          query: gql`
            query GetContentNode {
            contentNode(id: "/posts/hello-world", idType: URI) {
              __typename
              contentTypeName
            }
          }
          `,
          variables: {
            id: id?.toString()
          },
          context: {
            headers: {
              Authorization: `bearer ${getAccessToken()}`
            }
          }
        }

        console.log('Query node with query args: ', queryArgs)

        const templateQueryRes = await client.query(queryArgs)
        console.log(templateQueryRes);

        setTemplateNode(templateQueryRes.data?.contentNode)

        setIsLoading(false)
      }
    })()
  }, [isAuthenticated, templateNode, isPreview, isAuthenticated])

  if (isLoading) {
    return <p>loading...</p>
  }

  if (!templateNode) {
    return <p>Post not found. You are {isAuthenticated !== true && 'not'} authenticated</p>
  }

  const typeName = templateNode.__typename

  switch (typeName) {
    case 'Page': {
      return <PageComponent page={templateNode} />
    }
    case 'Post': {
      return <PostPageComponent post={templateNode} />
    }
    // Add custom post types here as needed
    default: {
      throw new Error(`Unknown post type: ${typeName}`)
    }
  }
}

It fails when trying to render the Post component but all the other parts are working:

You may want to adjust the query for fetching the Post/Preview data.

[Julhol-droid]

Thank you very much this works 👍