writing-graphql-operations

Generate type-safe GraphQL queries and mutations for the Saleor API.

29|5|Updated Jan 21, 2025
One-click install
npx skills add https://github.com/saleor/configurator --skill writing-graphql-operations
Or copy as Structured Prompt for Agent
Please help me install this Agent Skill.
Skill: writing-graphql-operations
Source: https://github.com/saleor/configurator/tree/main/.claude/skills/writing-graphql-operations
Command: npx skills add https://github.com/saleor/configurator --skill writing-graphql-operations

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Guides the creation and maintenance of GraphQL queries and mutations using gql.tada and urql, with a repository pattern, strong error handling, and testing considerations.

Core Features & Use Cases

  • gql.tada for type inference: Automatic TypeScript types from GraphQL.
  • Fragments usage: Reuse field selections across operations.
  • Repository pattern: Clean separation of concerns for data access.
  • Error handling: Consistent GraphQLError/ValidationError patterns.
  • Schema management: Align operations with updated Saleor schemas.

Quick Start

Implement GetEntitiesQuery with gql.tada and wire it into a CategoryRepository for fetch and map results to domain models.

Frequently Asked Questions about writing-graphql-operations

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

FAQPage Schema
How do I write type-safe GraphQL queries with TypeScript?

Type-safe GraphQL queries use gql.tada to automatically generate TypeScript types from your GraphQL schema. This eliminates manual type definitions and catches type mismatches at compile time, ensuring queries match your schema structure and field selections are valid before runtime.

Can I reuse field selections across multiple GraphQL operations?

Yes, GraphQL fragments let you define reusable field selections once and apply them across queries and mutations. This reduces duplication, keeps field definitions consistent, and makes schema updates easier to maintain across all operations.

How do I structure data access for GraphQL operations in a large application?

A repository pattern separates data access logic from business logic by centralizing GraphQL operations in dedicated repositories. Each repository handles queries, mutations, and result mapping to domain models, creating clean separation of concerns and easier testing.

What's the best way to handle GraphQL errors consistently?

Implement centralized error handling with GraphQLError and ValidationError patterns across all operations. This standardizes error parsing, logging, and user-facing messages, making error management predictable and reducing duplicate handling code throughout your application.

How do I test GraphQL operations without hitting a live API?

Mock Service Worker (MSW) intercepts GraphQL requests and returns predefined responses for testing. This lets you test operations, error handling, and component behavior in isolation without API dependencies or network calls during test runs.

Does gql.tada work with urql as my GraphQL client?

Yes, gql.tada integrates with urql to provide type-safe operations. The generated types from gql.tada flow through urql queries and mutations, maintaining type safety across your client configuration and request-response cycle.