Prismic preview does not render slices

[anton (Anton Kouliavtsev)]

Hi,

I got a Prismic preview running with Gatsby and Netlify.

I have learned that this does not work with Prismic Slices. When I hit the preview button, I briefly see the slices on how they are in production mode. After the preview overlay disappears, the content slices are not visible (not rendered in the DOM).

Here is the CMS set up:

After I hit preview I get redirect to this URL:
https://keen-northcutt-1ffbf3.netlify.app/

Briefly Quote of the day and Team slices are visible, but then they get hidden.

gatsby-config.js

  plugins: [
    {
      resolve: "gatsby-source-prismic-graphql",
      options: {
        repositoryName: "stoked-prismic-starter",
        accessToken: `${process.env.API_KEY}`,
        previews: true,
        path: "/preview",
        pages: [
          {
            type: "Post",
            match: "/post/:uid",
            component: require.resolve("./src/templates/post.js"),
          },
        ],
      },
    },
  ],

index.js

import React from "react"
import { Link, graphql } from "gatsby"
import { RichText } from "prismic-reactjs"
import { linkResolver } from "../utils/linkResolver"

export default function Home({ data }) {
  const doc = data?.prismic?.allHomes.edges.slice(0, 1).pop()
  const posts = data?.prismic?.allPosts.edges
  const slices = doc.node.body

  if (!doc) return <div>no data</div>

  return (
    <>
      <h1>{RichText.asText(doc.node.title)}</h1>
      <RichText render={doc.node.description} />

      <hr />

      <h1>Posts</h1>

      <ul>
        {posts.map(item => {
          return (
            <li key={item.node._meta.id}>
              <Link to={linkResolver(item.node._meta)}>
                {RichText.asText(item.node.title)}
              </Link>
            </li>
          )
        })}
      </ul>

      <hr />

      <Slices slices={slices} />
    </>
  )
}

const Slices = ({ slices }) => {
  return slices.map((slice, index) => {
    const res = (() => {
      switch (slice.__typename) {
        case "PRISMIC_HomeBodyTeam":
          return (
            <section key={slice + index}>
              <h1>{RichText.asText(slice.primary.team_section)}</h1>

              {slice.fields.map(item => {
                return (
                  <div>
                    <h2>{RichText.asText(item?.first_and_lastname)}</h2>
                    <p>{RichText.asText(item?.position)}</p>
                    <img
                      src={item?.portrait?.url}
                      alt={RichText.asText(item?.first_and_lastname)}
                      width="160"
                    />
                  </div>
                )
              })}
              <hr />
            </section>
          )
        case "PRISMIC_HomeBodyQuote":
          return (
            <section key={slice + index}>
              <h1>Quote of the day</h1>

              <img
                src={slice?.primary?.portrait_author?.url}
                alt={RichText.asText(slice?.primary?.name_of_the_author)}
                width="160"
              />
              <blockquote>
                <p>{RichText.asText(slice?.primary?.quote)}</p>
                <cite>
                  {RichText.asText(slice?.primary?.name_of_the_author)}
                </cite>
              </blockquote>
              <hr />
            </section>
          )

        default:
          return
      }
    })()
    return res
  })
}

export const query = graphql`
  query GET_HOME_PAGE {
    prismic {
      allHomes {
        edges {
          node {
            title
            description
            body {
              __typename
              ... on PRISMIC_HomeBodyQuote {
                primary {
                  quote
                  name_of_the_author
                  portrait_author
                }
              }
              ... on PRISMIC_HomeBodyTeam {
                primary {
                  team_section
                }
                fields {
                  first_and_lastname
                  position
                  portrait
                }
              }
            }
          }
        }
      }
      allPosts {
        edges {
          node {
            title
            _meta {
              id
              uid
              lang
              type
            }
          }
        }
      }
    }
  }
`

Could it be that I missed some config somewhere?

[anton (Anton Kouliavtsev)]

So this is the end result:

[anton (Anton Kouliavtsev)]

While I would expect all the content blocks to render:

[Levi (Levi Gable)]

Hi @anton, I’m sorry that you’re having trouble with this. I’m not sure what the issue might be, so I’d like to take a closer look at your project files to see if I can figure out why this is happening. Can you send me your project code? Either a zip file of your project or a link to Github will work. If you don’t want to post this publicly, you can send it to me in a DM.

[anton (Anton Kouliavtsev)]

Hi @Levi,

Here is the repo that I have used to learn more about Prismic with Gatsby:

kouliavtsev/gatsby-prismic-starter

Thank you for helping out, very appreciated.

[Levi (Levi Gable)]

Hi @anton, I took a look at your project and figured out why this isn’t working. The problem here is that you’re looping over the Slice zone and rendering your slices depending on the slice.__typename. But this is different when it comes from the Prismic GraphQL API (which it does when running a preview).

Instead, you should render your slices based on the slice.type. First, you’ll need to add the type to your GraphQL query:

...
node {
  title
  description
  body {
    ... on PRISMIC_HomeBodyQuote {
      type
      primary {
        quote
        name_of_the_author
        portrait_author
      }
    }
    ... on PRISMIC_HomeBodyTeam {
      type
      primary {
        team_section
      }
      fields {
        first_and_lastname
        position
        portrait
      }
    }
  }
}

Then you switch over the type:

switch (slice.type) {
  case "team":
    return (
      <section key={'slice' + index}>
        <h1>Team HTML</h1>
      </section>
    )
  case "quote":
    return (
      <section key={'slice' + index}>
        <h1>Quote HTML</h1>
      </section>
    )

  default:
    return null
}

Make these changes and it should work!

[anton (Anton Kouliavtsev)]

Thank you, it works awesome now!

Looking forward to build some awesome projects using Prismic.