Can't preview relationship items' changes

Developing with Prismic
,
1

Hi,
I'm using gatsby and I've setup Prismic previews. My custom type has a group of relationship_field which itself has a group of relationship_field . I can preview unpublished changes correctly on the main document, but not for its children.

This is my graphql query:

export const BibliographyPageQuery = graphql`
  query BibliographyPage {
    prismicBibliography {
      _previewable
      data {
        main_text {
          richText
        }
        sections {
          section {
            uid
            document {
              ... on PrismicBibliographySection {
                _previewable
                data {
                  title
                  intro_text
                  items {
                    item {
                      document {
                        ... on PrismicBibliographyItem {
                          _previewable
                          data {
                            display_text {
                              richText
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
  }
`

This is my gatsby-browser.tsx :

<PrismicPreviewProvider
      repositoryConfigs={[
        {
          repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
          linkResolver,
          componentResolver: {
            bibliography: BibliographyPage,
            bibliography_section: BibliographyPage,
            bibliography_item: BibliographyPage,
          },
        },
      ]}
    >
      {element}
    </PrismicPreviewProvider>

This is part of my BibliographyPage.tsx

const BibliographyPage = ({ data }: PageProps<Queries.BibliographyPageQuery>) => {
  const title = data?.prismicBibliography?.data?.title ?? "Outcomes"
  const sections = data?.prismicBibliography?.data?.sections ?? []
  return (
    <Page title={title}>
      <ProseBlock>
        <PrismicRichText
          field={data.prismicBibliography?.data.main_text.richText}
        />
      </ProseBlock>
      <div className="mt-4">
        {sections.map((section) => {
          const sectionData = (
            section.section?.document as BibliographySectionDocument
          ).data
          return (
            <BibliographySection
              key={sectionData._previewable}
              document={sectionData}
            />
          )
        })}
      </div>
    </Page>
  )
}

export default withPrismicPreview(BibliographyPage, {
  repositoryName: process.env.GATSBY_PRISMIC_REPO_NAME,
  linkResolver: linkResolver,
})

How I've setup the preview on prismic

I'm using gitlab pages to deploy so I've setup the preview the following way:
Name: Previews
Domain for your Application: [myGitlabPagesURL]
Preview Route: /bibliography

What am I doing wrong?
All unsaved changes I make to bibliography type are viewed correctly, but not the ones if its children (bibliography_section and bibliography_item)

Thanks!

2

Ok I figured it out! For anyone that runs into this, this is how you do it.

If you want to preview changes from a document that has relationships to other custom types, you need to create a release and add all the documents to that release.

Then you preview the release and it will display the changes from all the documents.

1 Like