GraphQL Compose: Preview

A module for extending the permissions of Drupal's preview functionality, to be used with GraphQL Compose.

TL;DR

• Works with GraphQL Compose
• Enable module.
• Add permissions.
• Query data with tokens.

Permissions

• Go to /admin/people/permissions and search for GraphQL Compose: Preview
• Enable the View preview entities permission for each role that can use tokenised preview links.

GraphQL Query

This module introduces the preview query, which takes an optional token argument, which returns a NodeUnion type.

{
  preview(id: "da02328a-b605-421e-8077-f2ff344c5d49", token: "ABC123FB9dsOKU") {
    ... on NodePage {
      title
      status
    }
  }
}

Route Query

This module allows tokenised preview URLs.

Example:

• Edit a node, click Preview
• URL is a uuid path: /node/preview/da02328a-b605-421e-8077-f2ff344c5d49/full
• Add the unique token to that URL: /node/preview/da02328a-b605-421e-8077-f2ff344c5d49/full?token=ABC123FB9dsOKU

You'll now have full access to that preview.

This can be used in conjunction with GraphQL Compose's route query:

route(path: "/node/preview/da02328a-b605-421e-8077-f2ff344c5d49/full?token=ABC123FB9dsOKU") {
  ... on RouteInternal {
    entity {
      ... on NodePage {
        title
        status
      }
    }
  }
}

Embedded field on preview display

This module also introduces a preview_token field formatter to the Drupal node UI, which can be used to add a preview display to your interface.

This can render a tokenised link to the preview route, and an iframe formatter to embed your frontend app.

How you ultimately implement this is up to your frontend application.

Example:

• Go to /admin/structure/types/manage/page/display
• Drag Preview with Token to the top of the list.
• Configure the formatter to your liking.
• Optionally set the ENV GRAPHQL_COMPOSE_PREVIEW_URL to set the URL for the preview links.