^9.0.0-rc.2 - wrapper.useHydration always showing hydrating = true

[W3stside]

Describe the bug

^9.0.0-rc.2 - wrapper.useHydration always showing hydrating = true
data is returned as expected from getStaticProps but hydrating remains true

export default function SingleProductPage({ data: product, schema, ...rest }: Props) {
  const { hydrating } = wrapper.useHydration(rest) // <-- hydrating here is stuck on true, why?

  // ... rest of code

To Reproduce

In my case it is inside a page router next 14 app. here is my static props fetch:

export async function getStaticProps({ params }) {
  const {
    products: { nodes },
  } = await queryProducts({
    amount: 1,
    imageAmt: PRODUCT_IMAGES_AMOUNT,
    videoAmt: PRODUCT_VIDEOS_AMOUNT,
    query: params?.handle ? `title:${params.handle}` : `id:${params.id}`,
  })

  if (!nodes?.[0]) throw new Error('Missing product information with id ' + JSON.stringify(params.id))

  const [product] = mapShopifyProductToProps(nodes)

  // Pass post data to the page via props
  return { props: { data: product, schema: getProductSeoSchema(product) } }
}

Expected behavior

shouldn't be stuck on hydrating when there is data available.

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 6]

Additional context

Add any other context about the problem here.

[W3stside]

OK this was a skill issue. I never wrapped my getStaticProps call with the wrapper so there was no data stream from the store to specify the hydration status

Make sure to wrap that mfer!!

[W3stside]

Mm actually no, it is still happening with a page that is calling:

export const getStaticProps = wrapper.getStaticProps((store) => async (): Promise<{ props: Props }> => {
  const collections = await formattedCollectionQuery({
    collectionAmount: 1,
    // always show the latest collection
    productAmt: 10,
    imageAmt: PRODUCT_IMAGES_AMOUNT,
    videoAmt: PRODUCT_VIDEOS_AMOUNT,
    // reverse array to get first as latest
    reverse: true,
    productSortKey: ProductCollectionSortKeys.BestSelling,
  })

  if (collections.length) {
    const formattedCollections = collections.map(({ collectionProductMap, locked, id, title }) => ({
      products: collectionProductMap,
      locked,
      id: shortenShopifyId(id as ShopifyIdType, 'Collection'),
      title,
    }))

    store.dispatch(
      updateCollections({
        collections: formattedCollections,
        loading: false,
      })
    )

    if (formattedCollections?.[0]?.id) {
      store.dispatch(
        updateCurrentCollection({
          id: formattedCollections[0].id,
          locked: formattedCollections[0]?.locked,
          loading: false,
        })
      )
    }
  }

  return {
    props: {
      collection: collections?.[0] ?? null,
      schemaSEO: getCollectionSeoSchema(collections?.[0]),
    },
  }
})

and in the page:

export default function Collection({ collection, schemaSEO, ...rest }: Props) {
  const { hydrating } = wrapper.useHydration(rest) // <----- always true
  // rest code
}