Dependent query and SSR Hydration causing hydration mismatch

[davidkhierl]

I'm doing the ssr hydration approach in nextjs I have a query that requires an id.

the id is available from the server side, so I can do the

// serverSideProps
const queryClient = new QueryClient()

queryClient.prefetch(['key'], fetcher({id: 'this is available server side'}) );

return {
   props: {
      dehydratedState: dehydrate(queryClient)
   }
}

on the page I have a dependent query, the id here is not available in server side because it is stored from localStorage and is undefined while in server

const {data} = useMyQuery(['key'], {id: localStorageId!}, {enabled: !!localStorageId})

this will cause a nextjs hydration mismatch,

does anyone encounter this? and what are the possible fix

thank you!

[TkDodo]

why would it cause a hydration mismatch? even if the query is disabled on the client, if you use Hydrate to put data into the cache, it will be picked up by it. enabled: false just means that this observer won't try to fetch for itself, but if there is data in the cache for the key, it will be picked up.

[davidkhierl]

@TkDodo hello thank you for the reply 👋🏼. Well the dependent variable is on localstorage so initially on server it's false then on the client its true. But on the getServerSideProps I can access this value by using external method to fetch the data to be hydrated. But nextjs will display an error of mismatch. I will try to create a repro to share you as I'm very bad at explaining 🥲