Implementing Decoupled Preview
Before You Begin
Make sure a preview site and client secret is properly configured on your Drupal instance.
- Log in to your Drupal instance.
- Navigate to Configuration > SimpleOAuth > Clients
- Create a new consumer or use the default. Copy the UUID of the consumer you would like to use.
- Click Edit on the consumer you are using and add a new secret. Note this value down as well.
- We now have a client that can use our preview site. To configure the preview site, navigate to Structure > Preview Sites. Consult Configuring a Preview Site for more information.
- Set the URL to point to http(s)://{YOUR_SITE_URL}/api/preview replacing
{YOUR_SITE_URL}
with the URL of your frontend site, orlocalhost:3000
for testing preview locally. - Set a secret for the Preview Site and note this value down.
Now you have all of the credentials needed to make authenticated requests to the Drupal instance, including the ability to preview content!
See Setting Environment Variables for more information on how to set these variables in your local development environment or on the Pantheon Dashboard.
Using getPreview
Now that we are set up, we can implement the getPreview
helper, which can be
found in the lib
directory of the next-drupal-starter
. This helper takes in
two arguments, the current server context as well as the name of the node to be
previewed.
// Import some helpers
import { getPreview } from '../../lib/get-preview';
import { isMultiLanguage } from '../../lib/isMultiLanguage';
import {
getCurrentLocaleStore,
globalDrupalStateStores,
} from '../../lib/stores';
// your React component here
export async function getStaticProps(context) {
// Returns a boolean if the site is multilingual
const multilanguage = isMultilanguage(context.locales);
// Sets our current language. If preview, use the previewLang,
// otherwise use the current locale.
const lang = context.preview
? context.previewData.previewLang
: context.locale;
// set the store based on the language
const store = getCurrentLocaleStore(lang, globalDrupalStateStores);
// gets preview data from the Drupal instance, or in the case of a revision,
// sets the proper jsonapi param to fetch the revision from Drupal.
context.preview && getPreview(context, 'node--article');
// this variable will depend on your route
const slug = `/articles/${context.params.slug[0]}`;
// Now we can use the store to get the data we need to render our component
const article = await store.getObjectByPath('node--article', {
path: `${multiLanguage ? lang : ''}${slug}`,
});
// From here, you can do anything else needed before
// returning the data to the component.
return {
props: { article },
revalidate: 60,
};
}
See the
articles page from the next-drupal-starter
for a full example on using the getPreview
helper.
Clearing Current Preview
If you'd like to view another revision or edit, you may need to clear the current previewData cookie. This can be done by going to {YOUR_SITE_URL}/api/clear-preview. On successful clear, you will be redirected to the homepage.
Limitations
Content that is saved as a draft can not be previewed. Currently, preview content must be published or a published revision.