New: 98,000+ skills indexed from GitHub repos with 100+ stars · every skill safety-checkedBrowse top skillsTop skills
Esc to closeBrowse all skills
Submit a skillBrowse skills
Submit a skillBrowse skills

Agent skill

GraphQL Operations with Codegen

by ChrisWiles in ChrisWiles/claude-code-showcase

Sets the rules for writing GraphQL queries and mutations in .gql files, running codegen, and using generated Apollo hooks with proper error and loading handling.

No licenceAuto-check passedBackend & APIs

Install GraphQL Operations with Codegen

skills CLI
$ npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -a claude-code

Project install by default; add -g for ~/.claude/skills/.

GitHub CLI
$ gh skill install ChrisWiles/claude-code-showcase graphql-schema --agent claude-code

Project scope by default; add --scope user for a personal install. Needs GitHub CLI 2.90.0 or later (public preview).

Manual copy
$ git clone --depth 1 https://github.com/ChrisWiles/claude-code-showcase.git skills-src && mkdir -p .claude/skills && cp -r skills-src/.claude/skills/graphql-schema .claude/skills/graphql-schema && rm -rf skills-src

Use ~/.claude/skills/ instead of .claude/skills for a personal install. The folder must contain SKILL.md.

Claude Code skills documentation · loads skills from .claude/skills/

Facts

Skill name
graphql-schema
GitHub stars
6.1k
Used in
3 other repos
Token cost
~1.5k tokens
SKILL.md length
198 words
Files
1
Skills in repo
6
Repo updated
First seen
Licence
None found

At a glance

Sets the rules for writing GraphQL queries and mutations in .gql files, running codegen, and using generated Apollo hooks with proper error and loading handling.

  • Works in 6 steps: Create .gql file → Run codegen → Import and use generated hook → …
  • Writing a new GraphQL query or mutation in an Apollo Client project
  • SKILL.md covers Core Rules, File Structure, Creating a Query and Creating a Mutation, plus 7 more sections
  • Calls npm

What it does

Four rules apply: keep operations in `.gql` files rather than inline `gql` literals, run codegen (`npm run gql:typegen`) after every change, give every mutation an `onError` handler, and use the generated hooks rather than raw Apollo hooks. Queries and mutations follow the same three steps: write the operation file, run codegen, then import the generated hook, such as `useGetItemsQuery`.

Every mutation trigger must be disabled while running, show a loading state, handle errors visibly and confirm success. The skill also tabulates fetch policies (`cache-first`, `cache-and-network` as the default, `network-only`, `no-cache`), shows optimistic updates and when to avoid them (validation-prone operations, server-generated values, destructive actions, effects on other users), and covers fragments for reusable field selections.

When your agent uses it

  • Writing a new GraphQL query or mutation in an Apollo Client project
  • Generating typed hooks after changing a .gql file
  • Choosing a fetch policy or adding an optimistic update
  • Reviewing a mutation button for loading and error handling

Example prompts

  • “Create a GetItems query with limit and offset, run codegen, and use the generated hook in ItemList.”
  • “Add a CreateItem mutation with error handling, a disabled submit button and a success message.”
  • “Decide whether the favorite toggle should use an optimistic response and implement it if it is safe.”

Requirements

  • An Apollo Client project with GraphQL code generation (`npm run gql:typegen`)

Workflow steps

6 steps, taken from the step headings in SKILL.md.

  1. Create .gql file
  2. Run codegen
  3. Import and use generated hook
  4. Create .gql file
  5. Run codegen
  6. Use with REQUIRED error handling

What it can do on your machine

Read from SKILL.md and the folder at commit a95518f. It shows what the files ask for, not the result of running them.

  • Tool permissions

    Pre-approves nothing: there is no allowed-tools line, so your agent's usual permission prompts apply.

    From allowed-tools in the SKILL.md frontmatter.

  • Runs code

    Shell commands in SKILL.md call:

    • npm

    From the folder's file list and the shell code blocks in SKILL.md.

  • Network

    No URLs in SKILL.md. Its commands use npm, which can reach the network depending on how they are called.

    From URLs in SKILL.md, links to its own repository left out.

  • Credentials

    Names no API keys, tokens, secrets or passwords.

    From names ending in _API_KEY, _TOKEN, _SECRET, _KEY or _PASSWORD in SKILL.md.

Context cost

GraphQL Operations with Codegen loads about 1.5k tokens when it runs. Until then it costs about 40 tokens; SKILL.md has 198 words of instructions outside code blocks.

Always · name and description, kept in context so the agent knows when to use it
~40
When it runs · the whole SKILL.md, loaded when a task matches
~1.5k

Estimates: characters ÷ 4, the usual rule of thumb; real counts depend on the model's tokenizer. Scripts and assets cost tokens only if the agent reads them.

Safety

Auto-check passed

The automated check found no risky patterns in SKILL.md.

Automated static check — not a guarantee. Review scripts before installing. It scans the text of SKILL.md for risky patterns (piping downloads into a shell, reading credential files, hidden Unicode, destructive commands); files beside SKILL.md are not scanned.

SKILL.md

Without a licence we can't republish the file, so here is its outline and opening line. It has 198 words (~1,499 tokens).

name
graphql-schema

Read the full SKILL.md on GitHub

Files

Just SKILL.md in .claude/skills/graphql-schema of ChrisWiles/claude-code-showcase.

Open the folder on GitHubat commit a95518f

Used in 3 other repositories

We found 7 copies of this SKILL.md (exact, near-identical or edited) in other folders, from 3 other GitHub owners. This page covers the copy in ChrisWiles/claude-code-showcase, which our catalogue first saw on October 7, 2026.

Compare with similar skills

GraphQL Operations with Codegen next to the 5 skills that share the most tags, products or categories with it. Stars are the repository's; “used in” counts other GitHub owners with a copy.

GraphQL Operations with Codegen compared with similar skills
SkillStarsUsed inTokensAuto-checkLicenceRepo updated
GraphQL Operations with Codegen this skillChrisWiles/claude-code-showcase6.1k3 repos~1.5kAutomated safety check: PassNone
Apollo Clientapollographql/skills117—~1.9kAutomated safety check: PassMIT
Twenty Syncable Entity Wiringtwentyhq/twenty58k—~2.9kAutomated safety check: PassCustom licence
Ar Io Gateway Operatorar-io/ar-io-node127—~8.2kAutomated safety check: NotesAGPL-3.0
Apollo Serverapollographql/skills117—~1.8kAutomated safety check: PassMIT
Implementing API Patternsancoleman/ai-design-components5261 repos~3kAutomated safety check: PassMIT

Similar skills

  • Apollo Client

    apollographql/skills

    Guide for building React applications with Apollo Client 4.x.

    117 GitHub stars~1.9k tokensUpdated yesterday
    Backend & APIsAuto-check passed

  • Twenty Syncable Entity Wiring

    twentyhq/twenty

    Registers a new syncable entity in three NestJS modules and adds its service and GraphQL resolver layers when contributing to the Twenty server.

    58k GitHub stars~2.9k tokensUpdated today
    Backend & APIsAuto-check passed

  • Ar Io Gateway Operator

    ar-io/ar-io-node

    Operate any AR.IO node deployment — architecture, daily ops, diagnostics, and recurring pitfalls that apply to every operator.

    127 GitHub stars~8.2k tokensUpdated yesterday
    Backend & APIsAuto-check: notes

  • Apollo Server

    apollographql/skills

    Guide for building GraphQL servers with Apollo Server 5.x. An agent skill from apollographql/skills.

    117 GitHub stars~1.8k tokensUpdated yesterday
    Backend & APIsAuto-check passed

  • Implementing API Patterns

    ancoleman/ai-design-components

    API design and implementation across REST, GraphQL, gRPC, and tRPC patterns.

    526 GitHub starsUsed in 1 repo~3k tokens
    Backend & APIsAuto-check passed

  • Graphql

    davila7/claude-code-templates

    GraphQL gives clients exactly the data they need - no more, no less.

    32k GitHub starsUsed in 5 repos~625 tokens
    Backend & APIsAuto-check passed

More from ChrisWiles/claude-code-showcase

  • Core Component Library Patterns

    ChrisWiles/claude-code-showcase

    Reference for building UI with a token-based core component library: spacing, color and typography tokens, Box, stacks, Text, Button, Input and Card, plus layout patterns.

    6.1k GitHub starsUsed in 8 repos~1.2k tokens
    Auto-check passed

  • React UI State Patterns

    ChrisWiles/claude-code-showcase

    Sets patterns for React interfaces: when to show loading spinners or skeletons, how to surface errors, how to disable buttons during async work and how to handle empty lists.

    6.1k GitHub starsUsed in 8 repos~1.6k tokens
    Auto-check passed

  • Jest Testing Patterns

    ChrisWiles/claude-code-showcase

    Jest patterns for React Native style tests: TDD discipline, mock factory functions, module and GraphQL hook mocking, custom render helpers and anti-patterns to avoid.

    6.1k GitHub starsUsed in 7 repos~1.5k tokens
    Auto-check passed

  • Formik Form Patterns

    ChrisWiles/claude-code-showcase

    Shows how to build forms with Formik and Yup validation, including conditional rules, field helpers, GraphQL submission, edit forms and multi-step flows.

    6.1k GitHub starsUsed in 3 repos~2.1k tokens
    Auto-check passed

  • Systematic Debugging

    ChrisWiles/claude-code-showcase

    Applies a four-phase debugging routine that finds the root cause of a bug or failing test before any fix is written.

    6.1k GitHub starsUsed in 3 repos~1.2k tokens
    Auto-check passed

Works with

Categories

Questions about GraphQL Operations with Codegen

What does GraphQL Operations with Codegen do?

Sets the rules for writing GraphQL queries and mutations in .gql files, running codegen, and using generated Apollo hooks with proper error and loading handling. gql` files rather than inline `gql` literals, run codegen (`npm run gql:typegen`) after every change, give every mutation an `onError` handler, and use the generated hooks rather than raw Apollo hooks. Queries and mutations follow the same three steps: write the operation file, run codegen, then import the generated hook, such as `useGetItemsQuery`.

When should I use GraphQL Operations with Codegen?

GraphQL Operations with Codegen fits situations like: writing a new GraphQL query or mutation in an Apollo Client project; generating typed hooks after changing a .gql file; choosing a fetch policy or adding an optimistic update; reviewing a mutation button for loading and error handling.

How do I install GraphQL Operations with Codegen in Claude Code?

Run `npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -a claude-code`. Or copy the skill folder (.claude/skills/graphql-schema in ChrisWiles/claude-code-showcase) into .claude/skills/graphql-schema in your project. Claude Code loads it when a task matches its description.

How do I install GraphQL Operations with Codegen in Codex?

Run `npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -a codex`. Or copy the skill folder (.claude/skills/graphql-schema in ChrisWiles/claude-code-showcase) into .agents/skills/graphql-schema in your project. Codex loads it when a task matches its description.

Can I use GraphQL Operations with Codegen in Cursor, Gemini CLI or GitHub Copilot?

Cursor, Gemini CLI, GitHub Copilot and OpenCode also load SKILL.md folders. With the skills CLI, run `npx skills add ChrisWiles/claude-code-showcase --skill graphql-schema -a cursor` (or -a gemini-cli, github-copilot or opencode for the others). To copy it by hand, put the folder in .cursor/skills/graphql-schema, .gemini/skills/graphql-schema, .github/skills/graphql-schema and .opencode/skills/graphql-schema in your project.

What does GraphQL Operations with Codegen need to run?

Going by SKILL.md and its folder, GraphQL Operations with Codegen needs the command-line tools its instructions call (npm). Our summary lists: An Apollo Client project with GraphQL code generation (`npm run gql:typegen`).

Does GraphQL Operations with Codegen access the network?

SKILL.md contains no URLs. Its commands use npm, which can reach the network depending on how they are called. This is read from the text; nothing was executed.

Is GraphQL Operations with Codegen safe to install?

Our automated static check of SKILL.md found no risky patterns, such as piping downloads into a shell, reading credential files or hidden Unicode. It is not a guarantee. Review the folder before installing.

What licence does GraphQL Operations with Codegen use?

No licence was found for GraphQL Operations with Codegen or its repository. Without one, default copyright applies: ask the author before reusing or redistributing it.

How many tokens does GraphQL Operations with Codegen use?

About 1.5k tokens (SKILL.md is roughly 6k characters). Agents keep only the skill's name and description in context until a task matches; then they load SKILL.md in full.

What are the alternatives to GraphQL Operations with Codegen?

Skills that share tags, products or a category with GraphQL Operations with Codegen: Apollo Client (apollographql/skills, 117 stars), Twenty Syncable Entity Wiring (twentyhq/twenty, 58k stars), Ar Io Gateway Operator (ar-io/ar-io-node, 127 stars) and Apollo Server (apollographql/skills, 117 stars). The comparison table on this page puts their stars, adoption, token cost, safety result and licence side by side.

Who maintains GraphQL Operations with Codegen?

ChrisWiles (a GitHub user) maintains it in ChrisWiles/claude-code-showcase, which has 6,071 GitHub stars. The repository holds 6 skills in this directory. The repository was last updated on January 6, 2026.

Source: ChrisWiles/claude-code-showcase on GitHub. Facts on this page come from the repository at the commit we read; the author's words are quoted as theirs.