graphql-schema

name	graphql-schema
description	GraphQL queries, mutations, and code generation patterns. Use when creating GraphQL operations, working with Apollo Client, or generating types.
risk	unknown
source	https://github.com/ChrisWiles/claude-code-showcase/tree/main/.claude/skills/graphql-schema
source_repo	ChrisWiles/claude-code-showcase
source_type	community
date_added	2026-07-01T00:00:00.000Z
license	MIT
license_source	https://github.com/ChrisWiles/claude-code-showcase/blob/main/LICENSE

GraphQL Schema Patterns

When to Use

Use this skill when you need graphQL queries, mutations, and code generation patterns. Use when creating GraphQL operations, working with Apollo Client, or generating types.

Core Rules

1. NEVER inline gql literals - Create .gql files
2. ALWAYS run codegen after creating/modifying .gql files
3. ALWAYS add onError handler to mutations
4. Use generated hooks - Never write raw Apollo hooks

File Structure

src/
├── components/
│   └── ItemList/
│       ├── ItemList.tsx
│       ├── GetItems.gql           # Query definition
│       └── GetItems.generated.ts  # Auto-generated (don't edit)
└── graphql/
    └── mutations/
        └── CreateItem.gql         # Shared mutations

Creating a Query

Step 1: Create .gql file

# src/components/ItemList/GetItems.gql
query GetItems($limit: Int, $offset: Int) {
  items(limit: $limit, offset: $offset) {
    id
    name
    description
    createdAt
  }
}

Step 2: Run codegen

npm run gql:typegen

Step 3: Import and use generated hook

import { useGetItemsQuery } from './GetItems.generated';

const ItemList = () => {
  const { data, loading, error, refetch } = useGetItemsQuery({
    variables: { : , :  },
  });

   (error)  ;
   (loading && !data)  ;
   (!data?..)  ;

   ;
};