
Skill
shopify-graphql-reference
reference Shopify GraphQL patterns and fragments
Description
Integrate Shopify-validated Storefront or Customer Account GraphQL into Vercel Shop. Use after Shopify AI Toolkit has supplied and validated an API operation, or when adapting existing GraphQL to the template's operation placement, fragments, domain transforms, locale flow, cache role, invalidation, and route architecture.
SKILL.md
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
- 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.
- Search current Shopify documentation and validate the complete operation with that skill.
- Do not copy schema snapshots, field catalogs, or generated API reference into this plugin.
- If Shopify AI Toolkit is unavailable, use official Shopify documentation and validation tooling; do not guess.
Apply the Vercel Shop conventions
- Inspect the consuming route before choosing cache behavior. Classify the read as static-shell content, request-time shared content, or private/request-scoped data.
- Add the operation to the closest file in
lib/shopify/operations/; create a file only for a genuinely new domain. - Keep
#graphqldocuments static, end them withas const, and use variables for dynamic values so codegen can validate them. - Reuse the smallest existing fragment that fits. Extend a shared fragment only when multiple operations need the same selection.
- Pass locale context through existing country and language helpers when Shopify localizes the result.
- Keep raw Shopify response types under
lib/shopify/**; transform them into provider-independent domain types before presentation. - Preserve cache tags and the existing webhook invalidation hierarchy. Do not cache mutations.
- Call
invalidateCartCache()after every successful cart mutation.
Revalidate both boundaries
- Validate the final GraphQL document again with Shopify AI Toolkit after fragment and variable changes.
- Run
pnpm --filter template codegenand the local lint, typecheck, build, and affected commerce flows. - 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.
More skills from the shop repository
View all 8 skillsbuild-shop
build and adapt Shopify storefronts
Jul 1CachingE-commerceFrontendShopify +1enable-analytics
enable analytics and performance monitoring
Apr 18AnalyticsMarketingMonitoringPerformance +1enable-i18n
enable multi-language support with next-intl
Apr 29Frontendi18nNext.jsVercel +1enable-shopify-markets
enable multi-locale support with Shopify Markets
Apr 19E-commercei18nMarketingShopify +1enable-shopify-menus
implement Shopify-powered navigation menus
Apr 19DesignE-commerceFrontendShopify +1init-vercel-shop
initialize Vercel Shop storefront projects
Jun 20CLIE-commerceVercelWeb Development
More from Vercel
View publishernext-cache-components-adoption
enable and migrate to Next.js Cache Components
next.js
Jul 17CachingFrontendMigrationNext.js +1next-cache-components-optimizer
optimize Next.js cache components
next.js
May 27CachingFrontendNext.jsPerformance +1next-dev-loop
verify Next.js runtime behavior
next.js
May 22DebuggingFrontendLocal DevelopmentNext.js +2next-partial-prefetching-adoption
adopt Partial Prefetching in Next.js apps
next.js
Jul 17FrontendNext.jsPerformanceVercelturborepo
manage monorepos with Turborepo
turborepo
Jul 21CI/CDPerformanceTurborepoadd-function-examples
add AI function examples for testing
ai
Apr 6AI SDKTestingVercel