graphql-workflow

Synchronize GraphQL schemas with generated TypeScript types via graphql-codegen.

1.5k|875|Updated Aug 20, 2021
One-click install
npx skills add https://github.com/saleor/storefront --skill graphql-workflow-saleor
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphql-workflow
Source: https://github.com/saleor/storefront/tree/main/.claude/skills/graphql-workflow
Command: npx skills add https://github.com/saleor/storefront --skill graphql-workflow-saleor

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GraphQL schema edits often drift from generated TypeScript types, leading to type errors and wasted debugging time. This Skill provides a repeatable workflow to keep schemas and types in sync across storefront code.

Core Features & Use Cases

  • Edit GraphQL files under src/graphql/ and src/checkout/graphql/.
  • Regenerate TypeScript definitions using the appropriate codegen pipelines for storefront and checkout.
  • Ensure the latest schema changes are reflected in generated types to prevent runtime errors.

Quick Start

Edit the GraphQL files in src/graphql/ or src/checkout/graphql/ and run the appropriate generate command to refresh the TypeScript definitions.

Frequently Asked Questions about graphql-workflow

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I regenerate TypeScript types after editing GraphQL queries?▼

To regenerate TypeScript types after editing GraphQL queries, run the appropriate codegen command such as pnpm generate for storefront or pnpm generate:checkout for checkout to sync schemas with generated definitions.

Why do my TypeScript definitions drift from my GraphQL schema changes?▼

TypeScript definitions drift from GraphQL schema changes when code generation steps are skipped after edits, leaving generated types under src/gql/ outdated and causing type errors.

Does graphql-codegen work with separate storefront and checkout pipelines?▼

Yes, graphql-codegen works with separate pipelines by running pnpm generate and pnpm generate:checkout respectively, producing TypeScript definitions for distinct storefront and checkout paths.

What's the best way to keep GraphQL schemas and TypeScript types in sync?▼

The best way to keep GraphQL schemas and TypeScript types in sync is to execute pnpm generate or pnpm generate:checkout immediately after modifying fields, queries, or mutations in src/graphql.

When do I need to run pnpm generate:checkout for my GraphQL mutations?▼

You need to run pnpm generate:checkout for GraphQL mutations whenever you add or modify files under src/checkout/graphql/, ensuring generated TypeScript definitions reflect latest schema changes.