skills.rest
MaxDehaut
MaxDehautCOMMUNITY
Explore all skills by this author →
GitHub

graphql-schema

Generate typed GraphQL hooks and organize queries in .gql files.

Updated Aug 23, 2026
Search Tags:#frontend#graphql#patterns#codegen#types#gql#apollo
One-click install
npx skills add https://github.com/MaxDehaut/default-repository --skill graphql-schema-maxdehaut
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphql-schema
Source: https://github.com/MaxDehaut/default-repository/tree/main/.claude/skills/graphql-schema
Command: npx skills add https://github.com/MaxDehaut/default-repository --skill graphql-schema-maxdehaut

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

GraphQL schema patterns streamline the creation and maintenance of GraphQL operations by enforcing a clear separation between .gql files and runtime hooks, reducing code duplication and improving type safety.

Core Features & Use Cases

  • NEVER inline gql literals: use .gql files and trigger codegen after changes.
  • Always generate hooks: rely on generated hooks instead of raw Apollo hooks.
  • Error handling: enforce onError handlers for mutations to provide user feedback.
  • Fragment reuse: define and reuse fragments to compose queries and mutations across components.

Quick Start

Set up a GraphQL project to use .gql files, run codegen, and generate typed hooks as shown.

Frequently Asked Questions about graphql-schema

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

FAQPage Schema
How do I stop using inline gql literals in Apollo Client and generate typed hooks instead?▼

To stop using inline gql literals, move your GraphQL operations into .gql files and run codegen to generate typed hooks, enforcing a clear separation between schema definitions and runtime execution for improved type safety.

What is the best way to organize GraphQL queries and mutations for frontend data fetching?▼

The best way to organize GraphQL operations is defining reusable fragments in .gql files and relying on generated hooks, which reduces code duplication and streamlines frontend data fetching across components.

Why should I run codegen after changing my .gql files in a GraphQL frontend project?▼

You must run codegen after changing .gql files to update generated typed hooks, ensuring your Apollo Client data layer remains type-safe and synchronized with your latest GraphQL schema definitions.

How do I handle errors for GraphQL mutations in Apollo Client?▼

Handle GraphQL mutation errors by enforcing onError handlers within your generated hooks, which ensures proper user feedback when frontend data fetching operations fail.

Can I reuse GraphQL fragments across different queries and mutations in my frontend?▼

Yes, you can define and reuse GraphQL fragments to compose queries and mutations across components, reducing code duplication and maintaining consistent typed data fetching patterns.

Does this GraphQL codegen pattern work with raw Apollo hooks or only generated hooks?▼

This pattern requires generated hooks instead of raw Apollo hooks, enforcing non-inline gql usage from .gql files and mandatory codegen to maintain strict type safety across your operations.

Related Skills

Explore More Software Engineering Skills→
jaydubya818jaydubya818

graphql-schema

Define GraphQL queries and mutations in .gql files and generate TypeScript types and hooks.

Community
Intermediate
RemseyMailjardRemseyMailjard

graphql-schema

Standardize GraphQL operations in .gql files with automatic codegen and generated hooks.

Community
Intermediate
vecearvecear

eslint-prettier-config

Configure ESLint and Prettier for TypeScript and React projects.

Community
Advanced
TheBushidoCollectiveTheBushidoCollective
187

relay-fragments-patterns

Compose Relay fragments to manage component-level data dependencies in React.

Official
Advanced