frontend-shopify/shopify-template
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Move Storefront queries onto @shopify/hydrogen preview client

Browse Source 
Replaces the hand-rolled shopifyFetch wrapper and raw query strings with
the hydrogen preview package (0.0.0-preview-116d5d7-20260730141607), the
same build pinned in hydrogen-preview/.

- services/shopify/client: createStorefrontClient({type: "public"}) with a
  static request context. Two module-scoped clients — uncached for carts,
  products and customers; revalidate-3600 for shop policies — using the
  client's custom fetch option to carry Next's caching hints.
- graphql/*: every document wrapped in gql(), fragments composed via the
  second argument instead of string interpolation, and $country/$language
  declared with @inContext so hydrogen injects them.
- shopifyFetch keeps its {query, variables} call shape so call sites are
  unchanged, but is now generic over the document, so data is inferred. It
  re-raises GraphQL errors, which hydrogen returns rather than throws.

Env var names, the 2025-07 API version pin, and the client-side fetching
architecture are unchanged.

Turning on type coverage surfaced real defects, not just annotations:

- hydrogen gql check caught $discountCodes: [String!] used where the field
  requires [String!]!.
- Cart and customer mutation payloads are nullable and were dereferenced
  unconditionally, so a failed mutation threw a TypeError. Adds a shared
  unwrapCartPayload helper (collapsing five copies of the same userErrors
  check) and explicit null handling in the customer service, so a null
  payload reads as an error rather than success with no errors.
- Search results are a Product | Page | Article union; adds __typename to
  the queries and narrows on it.
- Widens nullable fields (altText, image, customer.email, totalTaxAmount)
  in the domain interfaces and in the structural duplicates some
  components declare locally.

Adds a typecheck script (tsc --noEmit && hydrogen gql check); it passes
with 0 errors. Two deprecation warnings are left alone as acting on them
would change behaviour: ProductOption.values and CartCost.totalTaxAmount.

Verified against mock.shop: build prerenders the policy pages through the
cached client, and in the browser the product grid, search with facets,
collection filter round-trip, add-to-cart and quantity update all work.
Customer account flows are untested — they need real credentials.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01JaxgqPbFxLsSuLPZom2kdC
This commit is contained in:
Rami Bitar
2026-08-08 10:24:38 -04:00
co-authored by Claude Opus 5
parent 95b191eeb8
commit f8c3ef9e0e
21 changed files with 468 additions and 215 deletions
Download Patch File Download Diff File Expand all files Collapse all files
yarn.lock
+115
View File
@@ -5,6 +5,31 @@ __metadata:
version: 10
cacheKey: 10c0
"@0no-co/graphql.web@npm:^1.0.5, @0no-co/graphql.web@npm:^1.3.1":
version: 1.3.3
resolution: "@0no-co/graphql.web@npm:1.3.3"
peerDependencies:
graphql: ^14.0.0 || ^15.0.0 || ^16.0.0
peerDependenciesMeta:
graphql:
optional: true
checksum: 10c0/7237b805118049e9023e5fa4fd71c9334e1f85df6f98933038cc1b919f388e814fd1beae9e41b6a7509643f6a208ece0422dbc5d8474d24bec957020c899fb93
languageName: node
linkType: hard
"@0no-co/graphqlsp@npm:^1.12.13":
version: 1.17.3
resolution: "@0no-co/graphqlsp@npm:1.17.3"
dependencies:
"@gql.tada/internal": "npm:^1.2.0"
graphql: "npm:^15.5.0 || ^16.0.0 || ^17.0.0"
peerDependencies:
graphql: ^15.5.0 || ^16.0.0 || ^17.0.0
typescript: ^5.0.0 || ^6.0.0
checksum: 10c0/fa0f2d74275827e1c8aee36e07aaa0d86138b9f450e3e06e51be05cd507a95c1f7e7f603eaf611f6defdb2634f19acd0c2be16c222eff4802c67916ca77d4d7d
languageName: node
linkType: hard
"@ai-sdk/gateway@npm:4.0.33":
version: 4.0.33
resolution: "@ai-sdk/gateway@npm:4.0.33"
@@ -144,6 +169,52 @@ __metadata:
languageName: node
linkType: hard
"@gql.tada/cli-utils@npm:1.7.3":
version: 1.7.3
resolution: "@gql.tada/cli-utils@npm:1.7.3"
dependencies:
"@0no-co/graphqlsp": "npm:^1.12.13"
"@gql.tada/internal": "npm:1.0.9"
graphql: "npm:^15.5.0 || ^16.0.0 || ^17.0.0"
peerDependencies:
"@0no-co/graphqlsp": ^1.12.13
"@gql.tada/svelte-support": 1.0.2
"@gql.tada/vue-support": 1.0.2
graphql: ^15.5.0 || ^16.0.0 || ^17.0.0
typescript: ^5.0.0 || ^6.0.0
peerDependenciesMeta:
"@gql.tada/svelte-support":
optional: true
"@gql.tada/vue-support":
optional: true
checksum: 10c0/55405687375cbda9a9e963fc627939a55c64e81816c8d6433add3564f2fc2c0600ec60c98e01de77fa21511713daf9e84b644362d9ce571f0ea5c43851c68b6f
languageName: node
linkType: hard
"@gql.tada/internal@npm:1.0.9":
version: 1.0.9
resolution: "@gql.tada/internal@npm:1.0.9"
dependencies:
"@0no-co/graphql.web": "npm:^1.0.5"
peerDependencies:
graphql: ^15.5.0 || ^16.0.0 || ^17.0.0
typescript: ^5.0.0 || ^6.0.0
checksum: 10c0/5599ab58bc5859bf9d38f13e4ca0aae564cf7e94fbfa9afdb9932d4719fb945cb19da917fe23ed0cf115550ce07d31bcac89c229385fe7077754b54c2bed16e9
languageName: node
linkType: hard
"@gql.tada/internal@npm:^1.2.0":
version: 1.2.2
resolution: "@gql.tada/internal@npm:1.2.2"
dependencies:
"@0no-co/graphql.web": "npm:^1.3.1"
peerDependencies:
graphql: ^15.5.0 || ^16.0.0 || ^17.0.0
typescript: ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0
checksum: 10c0/2861061a64fa88dbd8bac84cff87bc33a30e9ed971cbee9f8d9a52ec27a17ffc64c389fb6a75f2231458524556829b81f4744b55ccb433e46d28e1066a5d4655
languageName: node
linkType: hard
"@img/colour@npm:^1.0.0":
version: 1.1.0
resolution: "@img/colour@npm:1.1.0"
@@ -1817,6 +1888,25 @@ __metadata:
languageName: node
linkType: hard
"@shopify/hydrogen@npm:0.0.0-preview-116d5d7-20260730141607":
version: 0.0.0-preview-116d5d7-20260730141607
resolution: "@shopify/hydrogen@npm:0.0.0-preview-116d5d7-20260730141607"
dependencies:
gql.tada: "npm:1.9.2"
peerDependencies:
react: ^18.0.0 || ^19.0.0
vue: ^3.5.0
peerDependenciesMeta:
react:
optional: true
vue:
optional: true
bin:
hydrogen: bin/hydrogen.mjs
checksum: 10c0/b12e230d174a910d8abb7ab18ecb99357dce82d2125054b30af6dcbecf280c6fea40c8ca5fd67d8931e1079fd73e587e3ea1484f50c294f4a79ad714c9664ecd
languageName: node
linkType: hard
"@shopify/storefront-api-client@npm:^1.0.0":
version: 1.0.10
resolution: "@shopify/storefront-api-client@npm:1.0.10"
@@ -2427,6 +2517,23 @@ __metadata:
languageName: node
linkType: hard
"gql.tada@npm:1.9.2":
version: 1.9.2
resolution: "gql.tada@npm:1.9.2"
dependencies:
"@0no-co/graphql.web": "npm:^1.0.5"
"@0no-co/graphqlsp": "npm:^1.12.13"
"@gql.tada/cli-utils": "npm:1.7.3"
"@gql.tada/internal": "npm:1.0.9"
peerDependencies:
typescript: ^5.0.0 || ^6.0.0
bin:
gql-tada: bin/cli.js
gql.tada: bin/cli.js
checksum: 10c0/e6995d5ddd41a0049f7e2494758d605567027c57b270e59c48355d7fbd0ca95db77db2385c14d2add1198ef59b91c1b5a7f9b70d9eac8668c2be534e55a56517
languageName: node
linkType: hard
"graceful-fs@npm:^4.2.4":
version: 4.2.11
resolution: "graceful-fs@npm:4.2.11"
@@ -2434,6 +2541,13 @@ __metadata:
languageName: node
linkType: hard
"graphql@npm:^15.5.0 || ^16.0.0 || ^17.0.0":
version: 17.0.2
resolution: "graphql@npm:17.0.2"
checksum: 10c0/766546216b891439ed09fd8584963df2013e26f2f79f096036eaaa2788c38964e049c8a142d68e3afdabdd8bbe70042639e83f0f4b82edbc7c6850421f072bb6
languageName: node
linkType: hard
"hast-util-sanitize@npm:^5.0.0":
version: 5.0.2
resolution: "hast-util-sanitize@npm:5.0.2"
@@ -3371,6 +3485,7 @@ __metadata:
"@radix-ui/react-slot": "npm:^1.3.3"
"@radix-ui/react-use-controllable-state": "npm:^1.2.6"
"@remixicon/react": "npm:^4.9.0"
"@shopify/hydrogen": "npm:0.0.0-preview-116d5d7-20260730141607"
"@shopify/storefront-api-client": "npm:^1.0.0"
"@tailwindcss/postcss": "npm:^4"
"@types/hast": "npm:^3.0.5"