Live preview with Craft CMS & Next.js

import { apollo } from '@/config/apollo'
import { ENTRIES_DATA } from '@/gql/entries';

export default async (req, res) => {
    // Check the token and source uid
    if (!req.query.token || !req.query.sourceUid) {
      return res.status(401).json({ message: 'Invalid preview request' })
    }

    // Fetch the headless CMS to check if the provided `uid` exists
    const entry = await apollo(ENTRIES_DATA, { uid: req.query.sourceUid })

    // If the uid doesn't exist prevent preview mode from being enabled
    if (!entry) {
      return res.status(404).json({ message: 'Page not found' })
    }

    // Enable Preview Mode by setting cookies
    res.setPreviewData({
        uid: req.query.sourceUid,
        token: req.query.token
    })

    // Redirect to the path from the fetched entry
    if (entry.data.entry.uri == '__home__') {
        res.redirect("/?uid="+req.query.sourceUid+"&token="+req.query.token)
    } else {
        res.redirect("/" + entry.data.entry.uri + "?uid="+req.query.sourceUid+"&token="+req.query.token)
    }
}

import { gql } from '@apollo/client'

export const ENTRIES_DATA = gql`
    query ($uid: [String!]) {
        entry(uid: $uid, limit: 1) {
            title
            uri
            url
            slug
            uid
        }
    }
`;

import { apollo } from '@/config/apollo'
import { ENTRY_DATA } from '@/gql/entry';

function Page(props) {
    return (
        <div>
            <h1>{props.data.entry.title}</h1>
            <p>My amazing websites goes here...</p>
        </div>
    )
}

// note this also works with getServerSideProps
export async function getStaticProps(context) {
    if (context.preview && context.previewData.crafttoken) {
        // Preview mode is active, pass appropiate params e.g. uid and token.
        var { data, errors } = await apollo(ENTRY_DATA, { uid: parseInt(context.previewData.sourceId) }, context.previewData.crafttoken)
    } else {
        // No preview mode, return live content.
        var { data, errors } = await apollo(ENTRY_DATA)
    }
    // return a 404 if no page is found
    if (errors.length > 0) return { notFound: true }
    // return page props e.g. page data and preview data (could be useful to have in the template)
    return { props: { data, preview: context.preview ? context.previewData : [] }  }
}

export default Page;

import { gql } from '@apollo/client'

export const ENTRY_DATA = gql`
    query ($slug: [String!], $uid: [String]) {
        entry(section: "pages", slug: $slug, uid: $uid, limit: 1) {
            id
            title
            slug
            ... on pages_page_Entry {
                customFieldGoesHere
            }
        }
    }
`;

import { ApolloClient, InMemoryCache } from '@apollo/client';

async function apollo(gqlQuery, gqlParams, previewToken = false) {
    // setup the Apollo client
    const client = new ApolloClient({
        // if the craft token exists then append it to the URL used to make queries
        // Craft uses this to load draft/revision data
        uri: previewToken ? process.env.NEXT_PUBLIC_CMS_ENDPOINT+"?crafttoken="+previewToken : process.env.NEXT_PUBLIC_CMS_ENDPOINT,
        cache: new InMemoryCache()
    });

    return await client.query({
        // the GQL query
        query: gqlQuery,
        // pass through query params e.g. { slug: "boop", uid: "2dff-344d-dfdd...", token: "..." }
        variables: gqlParams,
        // display errors from GraphQL (useful for debugging)
        errorPolicy: 'all'
    }).then(data => {
        return { 
            // return the data or NULL if no data is returned
            data: (typeof(data.data) != "undefined") ? data.data : null , 
            // return any errors
            errors: (data.errors) ? data.errors : [] 
        }
    });
}

export { apollo }