Live preview content with Gatsby js Wordpress and Netlify

• Add a Netlify Function to the Gatsby Site.
• Implement a Gatsby SSR (Server-Side Rendering) Preview Page.
• Customize the WordPress CMS to Complement the Preview Feature.

Gatsby works

1. Install a package.

npm install gatsby-plugin-netlify

// In your gatsby-config.js
plugins: [`gatsby-plugin-netlify`]

[[plugins]]
package = "@netlify/plugin-gatsby"

2. Set up Netlify functions on GatsbyJS

const { ApolloClient, InMemoryCache, gql, HttpLink } = require('@apollo/client')
const fetch = require('cross-fetch')
// Execute the query
exports.handler = async function (event) {
    const { queryStringParameters } = event
    const pageId = queryStringParameters?.pageId
    // Set up an HttpLink with fetch
    const httpLink = new HttpLink({
        uri: process.env.WPGRAPHQL_URL,
        fetch: fetch,
        headers: {
            Authorization: `Bearer ${process.env.PREVIEW_SECRET}`
        }
    })

    // Set up Apollo Client
    const client = new ApolloClient({
        link: httpLink,
        cache: new InMemoryCache()
    })

    // GraphQL query
    const query = gql`
        {
            page(idType: DATABASE_ID, id: ${pageId}) {
                databaseId
                title
                slug
                content
            }
        }
    `
    try {
        const response = await client.query({ query })
        return {
            statusCode: 200,
            body: JSON.stringify(response.data),
            headers: {
                'Content-Type': 'application/json'
            }
        }
    } catch (error) {
        return {
            statusCode: 500,
            body: JSON.stringify(error)
        }
    }
}

3.Render the preview page using GatsbyJS SSR API

// expose query and headers in order to provide the correct request context
const Preview = ({ serverData }) => (
  <>
    {serverData?.content && (
      <div>
        <h1>
          <span dangerouslySetInnerHTML={{ __html: serverData?.title }} />
        </h1>
        <div dangerouslySetInnerHTML={{ __html: serverData?.content }}
        />
      </div>
    )}
  </>
)

export default Preview
export async function getServerData({ query }) {
  // get the page/post ID from the url
  // preview page URL will look like this: https://mysite/preview?p=789&&page_id=13&preview=true...

  const pageId = query.p || query.preview_id
    const res = await fetch(
        `https://mysite/.netlify/functions/preview?pageId=${pageId}`
    )
    const result = await res.json()
    return {
        props: result
    }
}

WordPress works

1. Generate JWT token for authenticated users on WordPress

1. Download this - https://github.com/wp-graphql/wp-graphql-jwt-authentication WordPress plugin either by cloning the repo in plugins directory or uploading the zip file via WordPress.
2. After the above step, you should be able to see the plugin in your plugins section. Don't activate the plugin now.
3. Add define('GRAPHQL_JWT_AUTH_SECRET_KEY', 'secret_token'); to your wp-config.php file which is present in the /var/www/html folder. This secret key is used by the plugin to generate tokens to access non-public posts. Ensure the secret token is some random long string that should only be accessible to the WordPress server.
   It's recommended that you use something like the WordPress Salt generator https://api.wordpress.org/secret-key/1.1/salt/ to generate a Secret.
4. Activate the plugin, and query the following, you should replace username and password with actual your username and password.

mutation LoginUser {
  login(
    input: {
      clientMutationId: "uniqueId"
      username: "your_login"
      password: "your password"
    }
  ) {
    authToken
    user {
      id
      name
    }
  }
}

# BEGIN WordPress
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteRule ^index\.php$ - [L]
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
SetEnvIf Authorization "(.*)" HTTP_AUTHORIZATION=$1
RewriteRule . /index.php [L]
</IfModule>
# END WordPress

Note: Usually, the JWT token resets every 300 seconds, and you need to get a new one. Instead of doing this often, I changed the settings in wp-graphql-jwt-authentication to make the token last for one year. This saves time, but remember, longer-lasting tokens can be less secure. It's best to keep token life short, like 300 seconds, for safety, unless you're sure about what you're doing.

public static function get_token_expiration() {

		if ( ! isset( self::$expiration ) ) {

			/**
			 * Set the expiration time, default is 300 seconds.
			 */
			$expiration = 31536000;

			/**
			 * Determine the expiration value. Default is 5 minutes, but is filterable to be configured as needed
			 *
			 * @param string $expiration The timestamp for when the token should expire
			 */
			self::$expiration = self::get_token_issued() + apply_filters( 'graphql_jwt_auth_expire', $expiration );
		}

		return ! empty( self::$expiration ) ? self::$expiration : null;
}

2. Custom preview button URL

$frontend_url = 'https://mysite.com';

// Filter for the preview button
add_filter('preview_post_link', function ($preview_link) use ($frontend_url) {
    return str_replace(home_url(), $frontend_url, $preview_link);
});

// Filter for the view page button
add_filter('page_link', function ($link, $post_id) use ($frontend_url) {
    return str_replace(home_url(), $frontend_url, $link);
}, 10, 2);

// Filter for the preview button and change to custom URL
add_filter('preview_post_link', 'custom_preview_page_link', 10, 2);
function custom_preview_page_link($link, $post_id) {
    if (is_preview()) {
        // If it's a preview, change the URL to use 'preview' slug
        $link = home_url('/preview') . '?' . $_SERVER['QUERY_STRING'];
    }
    return $link;
}

1. Locate the 'View Page' and 'Preview' buttons within WordPress.
2. Change their URLs from the WordPress site to the frontend site.
3. Modify the URL of the 'Preview' button to follow this format: https://mysite.com/preview?queryString...

Sumary: