shopify-graphql-reference

par vercel

Intégrez le GraphQL validé par Shopify pour Storefront ou Customer Account dans Vercel Shop. Utilisez après que Shopify AI Toolkit a fourni et validé une opération API,…

npx skills add https://github.com/vercel/shop --skill shopify-graphql-reference

Integrate Shopify GraphQL

Treat Shopify AI Toolkit as authoritative for Shopify documentation, schemas, fields, arguments, enum values, API versions, operation design, and validation. This skill owns only the Vercel Shop integration layer.

Read references/REFERENCE.md before editing.

Delegate Shopify facts first

  1. Choose the Shopify API:
    • Use Shopify AI Toolkit's Storefront GraphQL skill for catalog, search, menus, cart, and public metaobject reads.
    • Use its Customer skill for profiles, orders, addresses, and other authenticated customer data.
    • Use its custom-data skill first for metafields or metaobjects.
  2. Search current Shopify documentation and validate the complete operation with that skill.
  3. Do not copy schema snapshots, field catalogs, or generated API reference into this plugin.
  4. If Shopify AI Toolkit is unavailable, use official Shopify documentation and validation tooling; do not guess.

Apply the Vercel Shop conventions

  1. Inspect the consuming route before choosing cache behavior. Classify the read as static-shell content, request-time shared content, or private/request-scoped data.
  2. Add the operation to the closest file in lib/shopify/operations/; create a file only for a genuinely new domain.
  3. Keep #graphql documents static, end them with as const, and use variables for dynamic values so codegen can validate them.
  4. Reuse the smallest existing fragment that fits. Extend a shared fragment only when multiple operations need the same selection.
  5. Pass locale context through existing country and language helpers when Shopify localizes the result.
  6. Keep raw Shopify response types under lib/shopify/**; transform them into provider-independent domain types before presentation.
  7. Preserve cache tags and the existing webhook invalidation hierarchy. Do not cache mutations.
  8. Call invalidateCartCache() after every successful cart mutation.

Revalidate both boundaries

  1. Validate the final GraphQL document again with Shopify AI Toolkit after fragment and variable changes.
  2. Run pnpm --filter template codegen and the local lint, typecheck, build, and affected commerce flows.
  3. Report separately:
    • Shopify validation performed;
    • Vercel Shop cache and route role;
    • domain transform and invalidation changes.

Do not present this skill as a Shopify schema source. Shopify AI Toolkit determines what Shopify supports; this skill determines how validated operations fit Vercel Shop.

Plus de skills de vercel

benchmark-sandbox
vercel
Exécute les scénarios d'évaluation de vercel-plugin dans des sandbox Vercel au lieu de panneaux WezTerm locaux. Provisionne des microVM éphémères avec Claude Code et le plugin préinstallé,…
official
emil-design-eng
vercel
Cette compétence encode la philosophie d'Emil Kowalski sur le polissage UI, la conception de composants, les décisions d'animation et les détails invisibles qui rendent un logiciel agréable.
official
vercel-react-best-practices
vercel
Directives d'optimisation des performances React et Next.js de l'équipe Vercel Engineering. Cette compétence doit être utilisée lors de l'écriture, de la révision ou du refactoring de code React/Next.js…
official
vercel-react-best-practices
vercel
Directives d'optimisation des performances React et Next.js de Vercel Engineering. Cette compétence doit être utilisée lors de l'écriture, de la révision ou du refactoring de code React/Next.js…
official
write-guide
vercel
Produire un guide technique qui enseigne un cas d'usage concret à travers des exemples progressifs. Les concepts ne sont introduits que lorsque le lecteur en a besoin.
official
release
vercel
Release vercel-plugin — exécuter les gates, incrémenter la version, générer les artefacts, commiter et pousser. Utiliser lorsqu'on demande de "release", "ship", "bump and push" ou "cut a release".
official
deepsec
vercel
Exécuter DeepSec sur un checkout de projet Vercel depuis dev3000. Utiliser pour la configuration DeepSec en un clic, l’amorçage du contexte du projet, le traitement limité de premier passage, et…
official
backport-pr
vercel
Effectuer un backport d'une pull request Next.js fusionnée depuis canary vers une branche de version précédente telle que next-16-2. Utiliser lorsque l'utilisateur demande de faire un backport, un cherry-pick ou d'ouvrir un…
official