Preview in Faust outside of the Template Hierarchy system

preview.js

import { gql, useQuery } from '@apollo/client';
import { getApolloAuthClient, useAuth } from '@faustwp/core';
import { useRouter } from 'next/router';

function AuthenticatedView(props) {
  const {
    query: { typeName, p },
  } = useRouter();
  const client = getApolloAuthClient();
  const postType = typeName.toLowerCase();

  // Get preview data using the "typeName" from the preview URl as the post type
  const { data } = useQuery(
    gql`
  query GetPreviewData($id: ID!) {
    ${postType}(id: $id, idType: DATABASE_ID, asPreview: true) {
      title
      content
    }
  }
`,
    {
      variables: { id: p },
      client,
    },
  );

  // Todo: Show different components based on different "postType"
  return (
    <>
      <>{data?.[postType]?.title}</>
      <div dangerouslySetInnerHTML={{ __html: data?.[postType]?.content }} />
    </>
  );
}

export default function Preview(props) {
  const { isAuthenticated } = useAuth({
    shouldRedirect: true,
  });

  const { query, isReady } = useRouter();

  if (!isReady || isAuthenticated !== true) {
    return <>Loading...</>;
  }

  if (!query.p && !query.typeName) {
    return <>Invalid preview URL</>;
  }

  return <AuthenticatedView props={{ ...props }} />;
}