[Bug] Page head data is not populating when navigating to a new page

[rylanharper]

Hey @jjjuulliiaann I have used this starter in some my Nuxt/Sanity projects and just today I noticed that in all the sites the head data only populates correctly when 1) navigating to and from a link or 2) refreshing the page.

You can test this out easily by going to the demo, opening the dev tools to inspect the page head data, then navigating to a project. The project head data will not update. It will only update upon re-navigating back to the link or refreshing the page.

This took me up until now (after a year of working with Nuxt/Sanity projects) to notice and so you may have just not seen this before. I'll look into this for a potential fix..

[rylanharper]

Just an update to this I found it has something to do with the useSanityData composable.. Switching to a straightforward query from the docs (with useSanityQuery) fixes the head population issues such as:

const { data } = await useSanityQuery(query, {
  slug: useRoute().params.slug
})

But then no cool live previews :(

[rylanharper]

Another update.. Its coming from useLazySanityQuery in the composable, I switched it to useSanityQuery and changed the onMounted to onBeforeMount to always render the latest data from Sanity. Something like this:

export default async function ({ query, params }) {
  // Get reference to the sanity store
  const mainStore = useMainStore()

  // Determine the sanity client based on preview state
  const sanityClient = mainStore.previewIsActive
    ? {
        client: 'preview',
        server: false,
        initialCache: false
      }
    : undefined

  // Handle live preview
  onBeforeMount(() => {
    // Check if live preview is enabled
    if (mainStore.previewIsActive) {
      // Set up the Sanity client for preview mode
      const sanity = useSanity('preview')

      try {
        // Subscribe to changes in the query and parameters
        sanity.client.listen(query, params).subscribe((event) => {
          // Delay the refresh for 800ms to avoid excessive updates
          setTimeout(() => {
            refresh()
          }, 800)
        })
      } catch (error) {
        // Handle error
        console.error(error)
      }
    }
  })

  // Fetch data using the Sanity query and parameters
  const { data, refresh } = await useSanityQuery(query, params, sanityClient)

  return {
    data,
    refresh
  }
}

Does this look good to you? It works on my project for the live-previews (studio previews) and also fixes the page head population issues (haven't tested this on live yet though). Maybe there are more improvements to be made here? 🤔

[jjjuulliiaann]

Hey Rylan, thanks and good catch! Sorry for the inconvenience, that should definitely work and I never noticed somehow 😵‍💫

I'm working in a new place and since then I had not much time to work with Nuxt unfortunately. I will take a closer look at your suggestion, but it looks good to me so far! In general I would prefer to use useLazyAsyncData to avoid blocking client-side navigation, but that seems to make things more complicated... Thanks again for the help!

[rylanharper]

No worries, just wanted to submit the issue! It actually works fine with an onMounted and the plain useSanityQuery. What issue do you have with the previews blocking client-side navigation?