skills.rest
Liinkiing
LiinkiingCOMMUNITY
Explore all skills by this author →
GitHub

graphql-frontend

Standardize Apollo Client GraphQL conventions in Next.js projects with colocated fragments and codegen.

6|Updated Jan 24, 2025
Search Tags:#frontend#graphql#codegen#nextjs#fragments#apollo#typed
One-click install
npx skills add https://github.com/Liinkiing/larastack --skill graphql-frontend
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: graphql-frontend
Source: https://github.com/Liinkiing/larastack/tree/main/.agents/skills/graphql-frontend
Command: npx skills add https://github.com/Liinkiing/larastack --skill graphql-frontend

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

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).

Frequently Asked Questions about graphql-frontend

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

FAQPage Schema
How do I structure Apollo Client GraphQL queries in a Next.js project?▼

To structure Apollo Client GraphQL queries in Next.js, enforce one query per page and colocate fragments with their corresponding components to ensure maintainable UI code and predictable data access.

What is the best way to manage GraphQL codegen workflows for typed documents in Next.js?▼

Managing GraphQL codegen workflows involves running the code generator after editing queries to regenerate types. This leverages GraphQL Code Generator to provide typed documents and incremental code updates for your frontend.

Why should I colocate GraphQL fragments with my frontend components?▼

Colocating GraphQL fragments with frontend components keeps data requirements close to the UI code. Using a common useFragment hook and typed wiring enforces data masking across the frontend application.

Do I need to run GraphQL Codegen manually after editing queries?▼

Yes, you must run codegen execution after editing GraphQL queries to regenerate types. You can execute this using command line scripts like pnpm --prefix frontend run gen:gql to update typed documents.

Can I use this Apollo Client convention with an existing Next.js application?▼

Yes, provided your Next.js project already uses Apollo Client integration. The convention applies colocated fragments and one query per page rules directly to your existing frontend/app and shared GraphQL code.

What are the limitations of enforcing one query per page for data loading?▼

Enforcing one query per page simplifies data loading by spreading all child fragments, but requires regular codegen execution after edits and strict adherence to Apollo Client integration to maintain type safety.

Related Skills

Explore More Software Engineering Skills→
apollographqlapollographql
102

apollo-kotlin

Configure Apollo Kotlin in Gradle projects and implement GraphQL operations.

Official
Intermediate
saleorsaleor
29

writing-graphql-operations

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

Official
Advanced
simnovasimnova
18

graphql-operations

Standardize GraphQL queries, mutations, and fragments across client code.

Official
Basic
beavermoneybeavermoney
36

relay-fragments-patterns

Standardize Relay fragment patterns for GraphQL data in React components.

Official
Intermediate