Skills
.Work. You
Rest

graphql-frontend

Community

Standardized Apollo GraphQL frontend conventions.

Software Engineering#frontend#graphql#codegen#nextjs#fragments#apollo#typed
AuthorLiinkiing
Version1.0.0
Installs0

System Documentation

What problem does it solve?

This skill standardizes Apollo Client GraphQL frontend conventions for Next.js projects, ensuring consistent data fetching, type safety, and maintainable UI code.

Core Features & Use Cases

  • Colocate fragments with components to keep data requirements close to UI code.
  • Enforce one query per page that spreads all child fragments to simplify data loading.
  • Leverage GraphQL Code Generator for typed documents and incremental code updates.
  • Use a common useFragment hook and typed fragment wiring to enforce data masking across the frontend.

Quick Start

Initialize your frontend GraphQL workflow by following these steps: ensure your Next.js project uses Apollo Client, place GraphQL fragments alongside components in frontend/app as you edit GraphQL queries, and run the codegen after changes to regenerate types (e.g., pnpm --prefix frontend run gen:gql).

Dependency Matrix

Required Modules

None required

Components

references

💻 Claude Code Installation

Recommended: Let Claude install automatically. Simply copy and paste the text below to Claude Code.

Please help me install this Skill:
Name: graphql-frontend
Download link: https://github.com/Liinkiing/larastack/archive/main.zip#graphql-frontend

Please download this .zip file, extract it, and install it in the .claude/skills/ directory.
View Source Repository

Agent Skills Search Helper

Install a tiny helper to your Agent, search and equip skill from 223,000+ vetted skills library on demand.