Skip to content

Instantly share code, notes, and snippets.

@lightstrike
Last active August 31, 2018 00:42
Show Gist options
  • Save lightstrike/bb28e056b4df0f36248fa71c0cba157f to your computer and use it in GitHub Desktop.
Save lightstrike/bb28e056b4df0f36248fa71c0cba157f to your computer and use it in GitHub Desktop.
Example WordPress GatsbyJS Preview Page
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
}
}
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment