Replace @shopify/hydrogen with direct Storefront API queries

Vercel's 'Hydrogen (v1)' preset matches any project depending on
@shopify/hydrogen and runs its v1 builder, which fails looking for
dist/worker. We only used the preview package as a Storefront API client,
so talk to the API directly instead:

- services/shopify/client.ts: plain fetch to /api/{version}/graphql.json
  with the public token header, @inContext country/language defaults, and
  the same graphql() / unwrapStorefrontResult API as before
- graphql/gql.ts: small helper that joins a document with its fragments
  (de-duplicated); the queries themselves are unchanged
- Explicit response types at each call site in place of the generated
  gql.tada types; local ProductFilter input type
- Drop @shopify/hydrogen, graphql, the TS plugin and 'hydrogen gql check'
- Copy no longer mentions Hydrogen

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
Rami Bitar
2026-10-03 15:28:02 -04:00
co-authored by Claude Opus 5.5
parent d33a6894f3
commit 6fcfe59d0d
20 changed files with 273 additions and 249 deletions
+7 -6
View File
@@ -1,9 +1,10 @@
# Vite Shopify Storefront
A server-rendered Shopify storefront built with Vite, TanStack Start (TanStack
Router + TanStack Query), Hono and Tailwind CSS v4. `@shopify/hydrogen` is used
only as the Storefront API client and for typed `gql()` documents. It's a port
of `nextjs-templates/shopify-storefront` without the AI store assistant.
Router + TanStack Query), Hono and Tailwind CSS v4, talking to Shopify's
[Storefront API](https://shopify.dev/docs/api/storefront) directly over
GraphQL — no Shopify SDK. It's a port of `nextjs-templates/shopify-storefront`
without the AI store assistant.
Runs in the nodesandbox runtime: `npm install` → `npm run dev` → port 3000.
@@ -20,7 +21,7 @@ yarn dev # http://localhost:3000
| ---------------- | --------------------------------------------------------- |
| `yarn dev` | Vite dev server with SSR and the Hono `/api` routes |
| `yarn build` | Production build to `dist/` |
| `yarn typecheck` | `tsc` plus `hydrogen gql check` for the GraphQL documents |
| `yarn typecheck` | `tsc` |
## nodesandbox compatibility
@@ -50,8 +51,8 @@ src/
account.ts login, logout, register, recover, reset, activate, me
account.functions.ts server functions for account reads in loaders
hooks/ TanStack Query options + hooks over the Storefront API
services/shopify Storefront client, catalogue and customer functions
graphql/ Typed `gql()` documents
services/shopify Storefront API client (plain fetch), catalogue and customer functions
graphql/ Storefront API queries and mutations (`gql()` joins fragments)
components/ Storefront UI (header, cart drawer, product detail, ...)
```