next-sanity: `createPreviewSubscriptionHook` doesn't work with combined query

Hi folks,

I found that if I use a combined query like this:

const query = groq`
  {
    "page": *[_type == "page" && slug.current == $slug][0] { ... }
    "meta": *[_id == "site_config"] { ... }
  }
`

const Page = ({ data: initialData, preview }) => {
  /*... other stuff ... */
  const { data } = usePreviewSubscription(postQuery, {
    params: { slug: initialData.slug },
    initialData,
    enabled: preview
  })
  
  return ( ... )
}

export default Page

export const getStaticProps: GetStaticProps = async ({ params, preview = false }) => {
  const { slug = "" } = params
  const data = await getClient(preview).fetch(postQuery, { slug })
  return {
    revalidate: 60,
    props: {
      preview,
      data,
    }
  }
}

The hook created from createPreviewSubscriptionHook no longer return preview data . When I separate my query into two, it works as expected. This is how I get the subscription hook:

export const usePreviewSubscription = createPreviewSubscriptionHook({
  projectId: '<projectId>',
  dataset: 'development',
  useCdn: false
})

I have no reproduction to show at the moment, just a quick report in case it actually is a bug & not something I missed. Thanks!

About this issue

Original URL
State: closed
Created 3 years ago
Reactions: 8
Comments: 15 (6 by maintainers)

Commits related to this issue

feat: add new preview mode for Next 13 (#152) BREAKING CHANGE: # Requires Node `v16`, like `Next 13` # Migrating from `v1` ## `createPreviewSubscriptionHook` is replaced with `definePreview` Th... — committed to sanity-io/next-sanity by stipsan 2 years ago

Most upvoted comments

@scottgrunerud Glad you figure out where the issue was! Lots of issues could happen between writing the query to getting the live preview hook working. If you’re not already on the Slack community, it’s a great place to get answers for these issues.

d4rekanguok on Aug 31, 2022

Same issue for me, live previews worked until creating combined queries.

logansparlin on Jul 7, 2021

Hey, @judofyr you were right about the query being the 🤦. It turns out the combined query was not the issue, it was actually the query itself as you said. The first issue I found was queries like the one below where you query another document for an id, then query for a document matching that id, see below:

*[_id == *[_type=="generalSiteSettings"][0].header._ref][0]{
  ...,
  modalForm->,
  navSections[]->{..., "title":title[$locale], navItems[]->{..., "title":title[$locale], "description":description[$locale]}},
}

Not sure why this was a valid query in the studio but crashes without an error when using it as part of the live hook. Once I removed those the hook correctly threw a GROQ syntax error about this other query:

  "announcement": 
*[_type == "announcement" && !(_id in path("drafts.**"))]| order(_updatedAt desc)[0]{
  ...,
"message":message[$locale]
}

Hey @stipsan sorry for raising the issue again 😓 , thought I did enough thorough testing before I came to the issue page but apparently not, I think this issue is safe to close like @d4rekanguok said, hope you didn’t spend too much time digging into this!

scottgrunerud on Aug 31, 2022

Amazing thanks @stipsan for the quick response yall rock 🪨 !

scottgrunerud on Aug 24, 2022

createPreviewSubscriptionHook doesnt seem to help me get real time data for my preview either. I have followed the code given in the readme. Not sure if its the same problem as urs though. There is no documentation for this method… I think we need better documentation.

craig-helpshift on Apr 6, 2021