pluginagentmarketplace
pluginagentmarketplace/custom-plugin-graphql
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
直接命令不会经过审查 Prompt；运行前请先检查来源。
npx skills add https://github.com/pluginagentmarketplace/custom-plugin-graphql --skill graphql-codegen命令会保持在同一行。复制前请横向滚动并检查完整内容。
想先保存到本地？可下载 SkillsMP 当前能够提供的文件。
Build React apps with Apollo Client - queries, mutations, cache, and subscriptions
Build production GraphQL servers with Apollo Server, plugins, and federation
Master GraphQL core concepts - types, queries, mutations, and subscriptions
基于 SOC 职业分类
正在显示 SKILL.md
| name | graphql-codegen |
| description | Generate TypeScript types and React hooks from GraphQL schemas |
| sasmp_version | 1.3.0 |
| bonded_agent | 07-graphql-codegen |
| bond_type | PRIMARY_BOND |
| version | 2.0.0 |
| complexity | intermediate |
| estimated_time | 2-4 hours |
| prerequisites | ["graphql-fundamentals"] |
Type-safe GraphQL with automatic code generation
Learn to use GraphQL Code Generator to automatically generate TypeScript types, React hooks, and more from your GraphQL schema and operations.
| Plugin | Generates | Use Case |
|---|---|---|
typescript | Base types | All projects |
typescript-operations | Query/mutation types | All projects |
typescript-react-apollo | React hooks | React + Apollo |
typescript-urql | URQL hooks | React + URQL |
introspection | Schema JSON | Apollo Client |
npm install -D @graphql-codegen/cli \
@graphql-codegen/typescript \
@graphql-codegen/typescript-operations \
@graphql-codegen/typescript-react-apollo \
@parcel/watcher
// codegen.ts
import type { CodegenConfig } from '@graphql-codegen/cli';
const config: CodegenConfig = {
// Schema source
schema: 'http://localhost:4000/graphql',
// Operations to generate from
documents: ['src/**/*.graphql', 'src/**/*.tsx'],
// Output
generates: {
'./src/generated/graphql.ts': {
plugins: [
'typescript',
'typescript-operations',
,
],
: {
: {
: ,
: ,
},
: ,
: ,
},
},
},
};
config;
{
"scripts": {
"codegen": "graphql-codegen --config codegen.ts",
"codegen:watch": "graphql-codegen --config codegen.ts --watch"
}
}
# src/graphql/queries.graphql
query GetUser($id: ID!) {
user(id: $id) {
id
name
email
}
}
query GetUsers($first: Int!, $after: String) {
users(first: $first, after: $after) {
edges {
node {
...UserFields
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
fragment UserFields on User {
id
name
email
avatar
}
# src/graphql/mutations.graphql
mutation CreateUser($input: CreateUserInput!) {
createUser(input: $input) {
user {
...UserFields
}
errors {
field
message
}
}
}
// Types and hooks are generated
import {
useGetUserQuery,
useGetUsersQuery,
useCreateUserMutation,
UserFieldsFragment,
GetUserQuery,
} from '../generated/graphql';
// Query with full type safety
function UserProfile({ userId }: { userId: string }) {
const { data, loading, error } = useGetUserQuery({
variables: { id: userId }, // Type-checked!
});
if (loading) return <Spinner />;
if (error) return <Error />;
// data.user is fully typed
return <div>{data?.user?.name}</div>;
}
// Mutation with type safety
function CreateUser() {
const [createUser] = useCreateUserMutation({
update(cache, { data }) {
// data is typed
if (data?.createUser.user) {
// ...
}
},
});
const handleSubmit = (input: CreateUserInput) => {
createUser({ variables: { input } }); // Type-checked!
};
}
// Fragment type
function UserCard({ user }: { user: UserFieldsFragment }) {
return <div>{user.name}</div>; // Typed fields
}
const config: CodegenConfig = {
schema: 'http://localhost:4000/graphql',
documents: 'src/**/*.graphql',
generates: {
// Types only
'./src/types.ts': {
plugins: ['typescript'],
},
// Operations with type imports
'./src/operations.ts': {
preset: 'import-types',
presetConfig: { typesPath: './types' },
plugins: ['typescript-operations'],
},
// Hooks
'./src/hooks.ts': {
preset: 'import-types',
presetConfig: { typesPath: './types' },
plugins: ['typescript-react-apollo'],
},
// Near-operation files
'./src/': {
preset: 'near-operation-file',
presetConfig: {
extension: '.generated.tsx',
baseTypesPath: 'types.ts',
},
plugins: ['typescript-operations', 'typescript-react-apollo'],
},
},
};
const config: CodegenConfig = {
schema: 'http://localhost:4000/graphql',
documents: 'src/**/*.tsx',
generates: {
'./src/gql/': {
preset: 'client',
config: {
fragmentMasking: { unmaskFunctionName: 'getFragmentData' },
},
},
},
};
// Usage
import { gql, getFragmentData } from '../gql';
const UserQuery = gql(`
query GetUser($id: ID!) {
user(id: $id) {
...UserAvatar
}
}
`);
const UserAvatarFragment = gql(`
fragment UserAvatar on User {
avatar
}
`);
function Profile({ userId }) {
const { data } = useQuery(UserQuery, { variables: { id: userId } });
const avatar = getFragmentData(UserAvatarFragment, data?.user);
}
| Issue | Cause | Solution |
|---|---|---|
| Types not updating | Stale cache | Delete generated folder |
| Schema fetch fails | Auth required | Add headers to config |
| Duplicate types | Multiple outputs | Use import-types preset |
| Watch not working | Missing watcher | Install @parcel/watcher |
# Validate schema access
curl http://localhost:4000/graphql \
-H "Content-Type: application/json" \
-d '{"query":"{ __schema { types { name } } }"}'
# Verbose codegen
npx graphql-codegen --verbose
# Check config
npx graphql-codegen --check
Skill("graphql-codegen")
graphql-fundamentals - Schema syntaxgraphql-apollo-client - Using generated hooksgraphql-schema-design - Better types07-graphql-codegen - For detailed guidance