Nested Queries using manual unPublishedPreview

I have been working through refactoring a Gatsby site to utilize unPublished Previews with the updated gatsby-source-prismic plugin (previously used the older gatsby-source-prisimic-graphql). I am having trouble getting all the content to show on a page that has multiple nested queries. When I am viewing a duplicate page that is published and not using preview, all the content shows as expected but when I try to preview the unpublished version all of the content isn't showing. It seems that nested queries only return the data from the first query and nothing more.

Here is an example of a query I am referring to:

export const query = graphql`
  query MarketQuery($uid: String!, $lang: String) {
    prismicMarket(uid: { eq: $uid }, lang: { eq: $lang }) {
      uid
      data {
        meta_title
        meta_description
        name
        hero_copy {
          text
        }
        hero_image {
          alt
          copyright
          url
        }
        services_header
        services_copy {
          text
          raw
        }
        featured_service_1 {
          uid
          document {
            ... on PrismicServiceArea {
              id
              uid
              data {
                thumbnail {
                  alt
                  copyright
                  url
                }
                name {
                  text
                }
                hero {
                  document {
                    ... on PrismicServiceHero {
                      id
                      data {
                        heading {
                          text
                        }
                        image {
                          alt
                          copyright
                          url
                          thumbnails {
                            IndustryFeaturedServicesImage {
                              url
                            }
                          }
                        }
                        text {
                          raw
                        }
                        body {
                          ... on PrismicServiceHeroBodyMarketHero {
                            id
                            primary {
                              market {
                                document {
                                  ... on PrismicMarket {
                                    id
                                    uid
                                  }
                                }
                              }
                              heading1 {
                                text
                              }
                              image1 {
                                alt
                                copyright
                                url
                                thumbnails {
                                  IndustryFeaturedServicesImage {
                                    url
                                  }
                                }
                              }
                              text1 {
                                text
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        featured_service_2 {
          uid
          document {
            ... on PrismicServiceArea {
              id
              uid
              data {
                thumbnail {
                  alt
                  copyright
                  url
                }
                name {
                  text
                }
                hero {
                  document {
                    ... on PrismicServiceHero {
                      id
                      data {
                        heading {
                          text
                        }
                        image {
                          alt
                          copyright
                          url
                          thumbnails {
                            IndustryFeaturedServicesImage {
                              url
                            }
                          }
                        }
                        text {
                          raw
                        }
                        body {
                          ... on PrismicServiceHeroBodyMarketHero {
                            id
                            primary {
                              market {
                                document {
                                  ... on PrismicMarket {
                                    id
                                    uid
                                  }
                                }
                              }
                              text1 {
                                text
                              }
                              heading1 {
                                text
                              }
                              image1 {
                                alt
                                copyright
                                url
                                thumbnails {
                                  IndustryFeaturedServicesImage {
                                    url
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
        featured_project_eyebrow_text
        featured_project {
          uid
          document {
            ... on PrismicPublication {
              id
              uid
              data {
                title
                summary {
                  raw
                }
                image {
                  alt
                  copyright
                  url
                }
                body {
                  ... on PrismicPublicationBodyProjectProofData {
                    id
                    primary {
                      stat_1_value
                      stat_2_value
                      stat_2_context
                      stat_2_source
                      stat_1_context
                      stat_1_source
                      stat_3_value
                      stat_3_context
                      stat_3_source
                    }
                  }
                }
              }
            }
          }
        }
        services {
          service {
            document {
              ... on PrismicServiceArea {
                id
                uid
                data {
                  name {
                    text
                  }
                  thumbnail {
                    alt
                    copyright
                    url
                  }
                  hero {
                    document {
                      ... on PrismicServiceHero {
                        id
                        data {
                          body {
                            ... on PrismicServiceHeroBodyMarketHero {
                              id
                              slice_type
                              primary {
                                market {
                                  document {
                                    ... on PrismicMarket {
                                      id
                                      uid
                                    }
                                  }
                                }
                                image1 {
                                  alt
                                  copyright
                                  url
                                  thumbnails {
                                    IndustryServiceAreaThumbnail {
                                      url
                                      copyright
                                      alt
                                    }
                                  }
                                }
                              }
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    allPrismicHomePageGeneral {
      edges {
        node {
          data {
            about_eyebrow
            about_header
            about_copy {
              raw
            }
            careers_eyebrow
            careers_header
            careers_copy {
              raw
            }
            careers_background {
              alt
              copyright
              url
            }
            careers_image {
              alt
              copyright
              url
            }
          }
        }
      }
    }
    allPrismicPublication(sort: { fields: last_publication_date, order: DESC }, limit: 3) {
      edges {
        node {
          id
          uid
          data {
            title
            type
            image {
              alt
              copyright
              url
            }
            summary {
              raw
            }
          }
        }
      }
    }
  }
`;

In this query, prismicMarket is the first query, and the two additional nested ones are allPrismicHomePageGeneral, and allPrismicPublication. When using unPublished Previews and I console log data, the only data being returned is from the prismicMarket query and nothing shows for the other two, which is causing issues with rendering the page using unPublished Previews.

Hi @maddy, thanks for sharing all the details of your issue.

Unpublished previews in Gatsby have some limitations since Gatsby sites are completely static. It means we don't have access to Gatsby's GraphQL data and its API during a client-side preview.

During an unpublished preview, your page will select a React component to display based on the previewed document and will pass just that document to the data prop. The original data prop, which includes your allPrismicPublication and allPrismicHomePageGeneral fields, cannot be included since we aren't on that page.

What I recommend instead is to move your allPrismicPublication and allPrismicHomePageGeneral queries within your template component using Gatsby's useStaticQuery. This means the data will become part of the template, which will be included during an unpublished preview.

Hope that makes sense. If it's unclear how to do that, you can post your whole template file (or send in a private message) and I can help you restructure it.

For other users who may come across this issue, here's the solution: Move static data from your queries into your component using Gatsby's useStaticQuery hook.

gatsby-source-prismic's preview system is able to retain your page's static data alongside your preview data when previewing published documents. If your page's query includes data from multiple document types, like allPrismicHomePageGeneral and allPrismicPublication in the example above, it will still be available during a preiew.

While previewing unpublished documents, however, the plugin is on the site's 404 page, which does not have the original query's data. Instead, only the previewed document is available, which is just the prismicMarket document in the example above.

To get around this limitation, queries that don't include variables, such as allPrismicHomePageGeneral and allPrismicPublication, can be moved inside the page's component. This can be done using Gatsby's useStaticQuery hook. By moving the query inside the component, it will be available during an unpublished preview since the data is encapsulated within the rendered component.