Release 0.10.0 of the NPM packages include BREAKING CHANGES. Existing users of Faust.js will need to make the following changes:

Step 1 - Update the WPE Headless Plugin

Ensure that you are on version 0.6.0 or later of the WPE Headless Plugin.

Step 2 - Update preview.tsx file

If you started from the next/getting-started example, replace the contents of src/pages/preview.tsx with the following:

import { PageComponent } from './[...pageUri]';
import { PostComponent } from './posts/[postSlug]';
import { client } from 'client';

export default function Preview() {
  const { usePreview } = client.auth;
  const result = usePreview();

  if (client.useIsLoading() || !result) {
    return <p>loading...</p>;
  }

  if (result.type === 'page') {
    if (!result.page) {
      return <>Not Found</>;
    }

    return <PageComponent page={result.page} />;
  }

  if (!result.post) {
    return <>Not Found</>;
  }

  return <PostComponent post={result.post} />;
}

Step 3 - Create next.config.js file

In the root of your project, alongside package.json, create a next.config.js file with the following contents:

const { withFaust } = require('@faustjs/next');

/**
 * @type {import('next').NextConfig}
 **/
module.exports = withFaust();

If you already have an existing next.config.js file, you can place it within the first argument of the withFaust function, like so:

const { withFaust } = require('@faustjs/next');

/**
 * @type {import('next').NextConfig}
 **/
module.exports = withFaust({
    // Your Next.js config here
});

Step 4 - Update gqty.config.js file

In the root of your project, alongside package.json, replace the gqty.config.js file with the following:

require('dotenv').config();

/**
 * @type {import("@gqty/cli").GQtyConfig}
 */
const config = {
  react: false,
  scalarTypes: { DateTime: 'string' },
  introspection: {
    endpoint: `${process.env.NEXT_PUBLIC_WORDPRESS_URL}/graphql`,
    headers: {},
  },
  destination: './src/client/index.ts',
  subscriptions: false,
  javascriptOutput: false,
};

console.log(`Using "${config.introspection.endpoint}" to generate schema...`);

module.exports = config;

Release package/core/0.9.0

Release 0.9.0 of the NPM packages include BREAKING CHANGES. Existing users of Faust.js will need to update their faust.config.js file to use ESM syntax, opposed to CJS syntax.

For example, users will need to replace their current faust.config.js file:

const { headlessConfig } = require('@faustjs/core');

if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
  console.error(
    'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env file?',
  );
}

/**
 * @type {import("@faustjs/core").HeadlessConfig}
 */
module.exports = headlessConfig({
  wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
  apiClientSecret: process.env.WP_HEADLESS_SECRET,
});

With the following code:

import { headlessConfig } from '@faustjs/core';

if (!process.env.NEXT_PUBLIC_WORDPRESS_URL) {
  console.error(
    'You must provide a NEXT_PUBLIC_WORDPRESS_URL environment variable, did you forget to load your .env file?',
  );
}

/**
 * @type {import("@faustjs/core").HeadlessConfig}
 */
export default headlessConfig({
  wpUrl: process.env.NEXT_PUBLIC_WORDPRESS_URL,
  apiClientSecret: process.env.WP_HEADLESS_SECRET,
});

In the first release of our headless framework for WordPress, we make previews simple.

What's in the release:

• Headless Plugin for WordPress
  • Supports an OAuth flow for authentication
• @wpengine/headless
  • Authorization handler to support the plugin OAuth flow
  • React hooks for retrieving posts via GQL
  • Next.js SSR support for retrieving data from GQL

Tryout Previews and give us feedback via discussions!