The Previews Feature Now Works With Gatsby

The Great Growth of Gatsby

We know, we know, the internet loves Gatsby. The past 18 months have seen Gatsby become a developer favorite, with its market share increasing by over 7000% in the past 5 months alone.

Based on React and relatively easy to adopt, Gatsby is fast, secure, and allows anyone with a solid JavaScript background to quickly get up to speed. Designed to work out of the box, the great developer experience has been a major reason why the internet has spent the last several months drooling over it.

The Prismic community certainly hasn't been immune to the craze, and we've seen more and more of our users adopt Gatsby. We are always happy to respond to our community and make sure that their technologies of choice work with our product, but Gatsby presented us with a very particular problem.

Why we needed a Gatsby plugin

Gatsby being a static site generator is great for speed and security, but it caused us a real headache when it came to one of our most popular features - Previews. Dynamically generating pages (like Previews) from a static site was impossible. Without some sort of fix, you’d have to be very sure of every update that you wanted to make to your content (or incredibly patient).

The challenge for us has been to make sure that our users can choose Gatsby without losing any of the features or functionality of Prismic. We aim to make Prismic as flexible and adaptable as possible and to allow users to choose whichever technologies, frameworks, or languages they prefer. So we sent our developers to work and, with a little (OK, a lot) of help, they have emerged from the darkness with a solution.

We have to say a big thank you to Birkir Gudjonsson, the Technical Director at Ueno, who used some of his Gatsby expertise to make the plugin even better than we had originally planned.

The value of Previews

Our Previews feature is one of our most popular and aims to make the lives of content producers so much easier. Once a piece of content has been saved in the writing room the user can select the preview button and generate a shareable URL where they can see exactly what new content or updates will actually look like on their website or apps.

Share links to your unpublished pages

Not only does this mean that a user can make sure their page looks just right before publishing, but it also means that they can easily share their work with others, get feedback, and make changes before making anything go live. The fact that you can share previews through a link also means that colleagues or contributors without access to Prismic are still able to see exactly what the finished product will look like before the content is published.

As often as you want - even different preview sessions simultaneously

Previews are also unlimited and automatically update, not only can users generate a preview as often as they want, but they can also simultaneously generate previews for different pieces of content - and that is a particular challenge with Gatsby. We know that a lot of other solutions have developed a workaround for displaying previews in Gatsby, but not one where you can simultaneously generate as many previews as you want for all of your content.

That automatically refresh

Links automatically refresh to reflect any changes that have been saved, meaning that you don't have to keep resending a link to the preview every time you make changes.

Seeing how your content looks locally allows you the freedom to experiment with new content blocks, slices, or components without the fear that you will break something or set an ugly new design loose on the world.

So, whilst we were happy to see Prismic users adopting Gatsby, we knew that we couldn't offer them a product where one of our most useful features was unusable.

How we fixed it

The Gatsby plugin was designed to offer a transparent way to access Previews with very few changes in the code.

When you build your website, we managed to find a way to retrieve the GraphQL queries made on the component level and expose them in the components' context so they can be read and re-used on the client side by the plugin.

In addition to that, we create a new page on /preview by default to automatically set the preview cookie based on the query parameters and attempt to find the correct page to redirect to with your linkResolver.

Once you run your application, In the background, the plugin takes your original Gatsby Graphql query, extracts the prismic subquery and uses it to make a Graphql request to Prismic with a preview reference.

Once data is received, it will update the data prop with merged data from Prismic Previews and re-render the component.

import React from 'react'
import { RichText } from 'prismic-reactjs'
import { linkResolver } from '../utils/linkResolver'
import { graphql } from 'gatsby';
import { CTABanner, FeaturedItems, NumberedItems, Separator, TextBlock } from '../components/slices'

import Layout from '../components/layouts'

export const query = graphql`{
  prismic{
    allHomepages(uid:null){
      edges{
        node{
          _meta{
            uid
            id
            type
          }
          title
          banner_image
          banner_text
        }
      }
    }
  }
}`

export default ({ data }) => {
  const doc = data.prismic.allHomepages.edges.slice(0,1).pop();
  if(!doc) return null;
  
  return(
    <Layout>
      <header className="homepage-header">
      <div className="l-wrapper">
        <div className="homepage-header-title">
          {RichText.render(doc.node.title, linkResolver)}
        </div>
      </div>
    </header>

    <section className="homepage-banner">
      <img className="homepage-banner-image" src={doc.node.banner_image.url} alt={doc.node.banner_image.alt} />
      <div className="homepage-banner-box-wrapper">
        <div className="homepage-banner-box">
        {RichText.render(doc.node.banner_text, linkResolver)}
        </div>
      </div>
    </section>
    </Layout>
  )
}

So there you have it

We know how important previews are to our users and the plugin will make sure that content producers can check the end product regardless of which technology their developers have chosen.

A lot of our community like using Gatsby and this number is likely to grow, so it was important to us that we were able to find a solution that allowed them to use the technology that they prefer without sacrificing any of our features - particularly one that plays such an important role in making great content.

If you already have a repo using Gatsby you can try this out right now - you can check out Birkir's github for all the details that you need. If you aren't a Prismic user or if you are a little unsure of things, next week we will be publishing a detailed walkthrough on integrating Gastby and Prismic with this new plugin.

We’re pretty pleased with this one, just don’t talk to our developers about it for a few days...they need a bit of time to recover.