Hydrogen/Sanity connect chokes on GraphQL query with products, fixed in latest plugin version

This error is happening because the hydrogen-plugin-sanity package has been deprecated and is no longer compatible with current versions of Hydrogen. The package was officially deprecated in April 2023, and the GitHub repository shows it's now archived and read-only.

The core issue is that useSkippableShopQuery (which was part of older Hydrogen versions) has changed or been removed in newer Hydrogen releases. The deprecated plugin is trying to call it internally within useSanityShopifyProducts, but it's returning undefined, which causes the destructuring error you're seeing.

The Solution

Stop using hydrogen-plugin-sanity entirely. The Sanity team deprecated it because it promoted patterns that worked against React Server Components' benefits - specifically, it encouraged large page-level fetches and shared context that made code harder to reason about.

Instead, use the official @sanity/client library directly with Hydrogen's native useQuery hook:

// MyServerComponent.server.jsx
import sanityClient from '@sanity/client'
import {useQuery} from '@shopify/hydrogen'

const query = `*[_type == 'page' && slug.current == $slug]`
const params = {slug: 'about'}

// Configure Sanity client
const client = sanityClient({
  apiVersion: 'v2022-05-01',
  dataset: 'your-dataset',
  projectId: 'your-project-id',
  useCdn: true
})

export default function MyServerComponent() {
  const {data, error} = useQuery([query, params], async () => {
    return await client.fetch(query, params)
  })
  
  return <div>{JSON.stringify(data)}</div>
}

Handling Products with Modules

For your specific case where modules contain products, you'll need to:

1. Fetch your Sanity content (modules and their product references) using @sanity/client
2. Extract the Shopify product IDs from your Sanity data
3. Fetch those products separately using Hydrogen's Storefront API within the components that need them

This approach gives you much better control over:

• Caching strategies per component
• Prefetching logic for better performance
• Component boundaries that work well with React Server Components

The deprecated plugin tried to automatically fetch all referenced Shopify products for you in one go, but this created issues with component isolation and made it harder to optimize performance. By keeping fetching logic scoped to specific components (even when deeply nested in modules), you'll have more predictable behavior and better performance characteristics.