Automate GraphQL integration in React apps with Apollo Client and code generation.
npx skills add https://github.com/bpteam/coder --skill react-graphql
Please help me install this Agent Skill. Skill: react-graphql Source: https://github.com/bpteam/coder/tree/main/.opencode/skills/react-graphql Command: npx skills add https://github.com/bpteam/coder --skill react-graphql
GraphQL integration in React apps often relies on ad-hoc gql strings scattered across components and incomplete type safety. This Skill enforces a GraphQL-only discipline by centralizing operations in dedicated .graphql files and generating TypeScript typings from GraphQL Code Generator, ensuring UI uses typed documents rather than inline queries.
Add a .graphql operation under src/shared/api/graphql/operations, run codegen to generate typed documents, and consume them with useQuery or useMutation in your UI code.
High-intent search queries and answers about installing and using this skill.
Generating TypeScript types for GraphQL queries in React involves placing operations in .graphql files and running GraphQL Code Generator to create typed documents for Apollo Client. This ensures UI code uses fully typed useQuery and useMutation responses without inline gql strings.
Avoiding inline gql strings in React components centralizes operation management in dedicated .graphql files, ensuring changes propagate deterministically through codegen. This maintains strong typing across UI code and prevents scattered, ad-hoc query definitions that bypass type safety.
Apollo Client works with GraphQL Code Generator and typed-document-node to provide full type safety for queries and mutations. The codegen process generates typed documents that Apollo Client consumes, ensuring variables and responses are strictly typed across components.
The best way to structure GraphQL operations in a React project is centralizing all documents under src/shared/api/graphql/operations/ in dedicated .graphql files. This discipline enables deterministic code generation and keeps UI components clean from inline query definitions.
To add a new GraphQL query or mutation to your React UI, create a .graphql operation file under src/shared/api/graphql/operations/, run codegen to generate the typed document, and consume it with useQuery or useMutation to maintain full type safety and proper caching strategies.
LiinkiingStandardize Apollo Client GraphQL conventions in Next.js projects with colocated fragments and codegen.
JasonPaffGenerate client-side React components with Radix UI and useServerAction hooks.
OrestesKStandardize React and TypeScript frontend components with GraphQL conventions.
tenequmManage React server-state with TanStack Query queries, mutations, and caching.
