Example WordPress GatsbyJS Preview Page

preview.js

import React, { Component } from "react";
import PropTypes from "prop-types";
import Helmet from "react-helmet";

class PreviewPage extends Component {
  constructor() {
    super();
    this.state = {
      post: {
        title: {
          rendered: "Loading..."
        },
        content: {
          rendered: "Loading..."
        }
      }
    };
  }

  componentDidMount() {
    const searchParams = new URLSearchParams(window.location.search);
    const authCheck = searchParams.get("auth");
    if (authCheck) {
      const apiPreviewUrl = this.props.data.site.siteMetadata.apiPreviewUrl;
      const postId = searchParams.get("id");
      let dataURL = `${apiPreviewUrl}${postId}?auth=true`;
      fetch(dataURL)
        .then(res => res.json())
        .then(res => {
          this.setState({
            post: res
          });
        });
    }
  }

  render() {
    const post = this.state.post;

    return (
      <div className="container" role="document">
        <Helmet
          title={post.title.rendered}
          meta={[
            {
              name: "robots",
              content: "noindex"
            }
          ]}
        />
        <h2>PREVIEW</h2>
        <hr />
        <h1 dangerouslySetInnerHTML={{ __html: post.title.rendered }} />
        <div
          dangerouslySetInnerHTML={{ __html: post.content.rendered }}
          className="content"
        />
      </div>
    );
  }
}

export default PreviewPage;

export const query = graphql`
  query previewQuery {
    site {
      id
      siteMetadata {
        apiPreviewUrl
      }
    }
  }
`;