Hydration mismatching when using Pinia actions to fetch data with useSanityQuery

[m-shum]

Version

module: ^1.11.0 nuxt: ^3.10.3

Nuxt configuration

export default defineNuxtConfig({
  modules: ['@pinia/nuxt', '@nuxtjs/sanity'],
  devtools: { enabled: true },
  sanity: {
    projectId: process.env.SANITY_PROJECT_ID,
    apiVersion: '2022-03-25',
  },
})

Reproduction

:warning: without a minimal reproduction we wont be able to look into your issue

Link: [x ] https://stackblitz.com/edit/github-i413im?file=app.vue,package.json Cannot produce a working reproduction due to starter errors when adding Pinia. Error: Cannot start nuxt: nuxt.options.buildModules is not iterable

What is expected?

Should be able to use Pinia actions to fetch sanity data using useSanityQuery() (as listed in the docs here https://sanity.nuxtjs.org/getting-started/usage) & display it without hydration errors.

What is actually happening?

Hydration errors when fetching sanity data using pinia actions and useSanityQuery()

Steps to reproduce

Add pinia & fetch sanity data using an action. Display fetched data in a component to reproduce hydration errors.

Additional information

Checklist

• [ x] I have tested with the latest Nuxt version and the issue still occurs
• [ x] I have tested with the latest module version and the issue still occurs
• [x ] I have searched the issue tracker and this issue hasn't been reported yet

[danielroe]

The reproduction you've provided has pretty outdated dependencies (pre release Nuxt). Would you try updating?

[m-shum]

The reproduction you've provided has pretty outdated dependencies (pre release Nuxt). Would you try updating?

This is based on the reproduction as listed in the bug report template of this repository, at https://stackblitz.com/edit/nuxt-sanity.

I've created another reproduction using the nuxt 3 stackblitz, which is here https://stackblitz.com/edit/github-i413im?file=app.vue,package.json

[danielroe]

Thanks for the spot - I'll update that...

[m-shum]

Thanks for the spot - I'll update that...

the endpoint for movies in that template also returns null, which makes it tricky to reproduce hydration errors 😅

[m-shum]

Although i haven't been able to get a reproduction working, I have managed to figure out my issue. I was trying to use useSanityQuery in the Pinia store action, but it wraps useAsyncData, which I believe should be calling in a component instead. Switching to useSanity().fetch() in the Pinia store resolved the hydration errors.