graphql

Generate typed GraphQL query and mutation factories for TanStack Query.

Updated Aug 23, 2026

Search Tags:#graphql #codegen #tanstack-query #cache-invalidation #server-side-rendering #typesafety #graphql-operations

Ready to run

npx skills add https://github.com/perimetre/ai-toolkit --skill graphql-perimetre

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: graphql
Source: https://github.com/perimetre/ai-toolkit/tree/main/plugins/perimetre-apps/skills/graphql
Command: npx skills add https://github.com/perimetre/ai-toolkit --skill graphql-perimetre

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This guide helps teams structure GraphQL usage with TanStack Query and code generation, reducing boilerplate and ensuring consistent data fetching and type safety.

Core Features & Use Cases

Factory pattern for query/mutation options (e.g., getPostsQuery(), createPostMutation()) to standardize operations and reuse across components.
Generated TypeScript types from codegen for query variables and response shapes, ensuring type safety.
Server and client data handling patterns: prefetching, HydrationBoundary, optimistic updates, and dependent queries to optimize UX.
Clear cache invalidation and fragment usage strategies aligned with TanStack Query and GraphQL documents.
Codegen workflow guidance and example factory usage to accelerate development.

Quick Start

Run codegen to generate TypeScript types from your GraphQL schema and start applying the provided GraphQL patterns in your components.

Frequently Asked Questions about graphql

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

FAQPage Schema

How do I reduce boilerplate when using GraphQL with TanStack Query?▼

You can reduce GraphQL boilerplate by using a factory pattern for query and mutation options, standardizing operations like getPostsQuery() to enable consistent data fetching and reuse across React components.

What is the best way to ensure type safety for GraphQL operations in React?▼

Ensuring GraphQL type safety involves running codegen to generate TypeScript types from your schema, applying generated types to query variables and response shapes, and using them within a structured query/mutation factory layer.

How do I handle cache invalidation and fragment usage with TanStack Query and GraphQL?▼

Cache invalidation and fragment usage are handled by applying clear strategies aligned with TanStack Query and GraphQL documents, ensuring efficient client-server data fetching and consistent state management across components.

Can I use GraphQL codegen for server-side rendering and prefetching with TanStack Query?▼

Yes, GraphQL codegen supports server-side rendering workflows by utilizing prefetching, HydrationBoundary, and dependent queries to optimize UX and enable SSR-friendly data handling in React components.

Does the GraphQL factory pattern support optimistic updates with TanStack Query?▼

Yes, the GraphQL factory pattern supports optimistic updates within server and client data handling workflows, allowing you to apply immediate UI changes while managing efficient client-server data fetching operations.

What are the limitations of using a query options factory pattern for GraphQL operations?▼

The factory pattern requires running codegen to generate TypeScript types from your schema before use, meaning operations depend on maintaining an active codegen workflow to sustain type safety and structured data fetching.