What is GraphQL Fragment Generator?
GraphQL fragments are reusable units that let you define a named set of fields and include them across multiple queries, mutations, or subscriptions. Instead of repeating the same field selections in every operation, you define a fragment once and spread it with the ... syntax wherever needed. This dramatically reduces duplication, enforces consistency in data fetching, and makes your GraphQL codebase easier to maintain. This tool reads your GraphQL Schema Definition Language (SDL) input and automatically generates a fragment for each type. Scalar fields such as ID, String, Int, Float, and Boolean are included directly in the fragment body, while object-typed fields that reference other types in your schema are replaced with nested fragment spreads (e.g., ...UserFields). This composable approach means that when a type changes, you only need to update its fragment in one place and every query using that fragment automatically reflects the change. The generated fragments work with any GraphQL client — Apollo Client, urql, Relay, or plain fetch — and pair well with code generation tools like GraphQL Code Generator that can derive TypeScript types from them.
How to Use
- Paste your GraphQL schema SDL containing type definitions into the input area — include all related types so the tool can resolve nested references
- Click "Generate" to create a fragment for each type, with scalar fields listed directly and object fields replaced by nested fragment spreads
- Review the generated fragments to ensure all types and relationships are captured correctly
- Copy the output and import the fragments into your GraphQL documents, or feed them into a code generator for typed query hooks
- Extend individual fragments with additional fields as your UI requirements evolve — the base fragments remain stable
Why Use This Tool?
Tips & Best Practices
- Include all related types in your SDL input so that nested fragment spreads reference fragments that actually exist in the output
- Use these fragments as building blocks — combine multiple fragment spreads in a single query to compose complex data requirements
- If a type has fields you rarely need, you can create multiple fragments for the same type (e.g., UserFields and UserDetails) with different field sets
- Pair the generated fragments with GraphQL Code Generator to auto-generate TypeScript interfaces and typed React hooks from your schema
- List scalar fields like tags: [String!]! are included directly since they don't require nested fragment spreads
Frequently Asked Questions
What are GraphQL fragments and why should I use them?
Fragments are named, reusable field sets in GraphQL. They let you define a type's field selection once and spread it into multiple queries with the ... syntax. This avoids duplication, enforces consistency, and makes refactoring easier — when a type changes, you update the fragment once instead of every query.
How does the tool handle nested object type fields?
When a field references another type defined in your schema, the tool replaces it with a nested fragment spread (e.g., ...PostFields inside a User fragment). This keeps fragments composable — the Post fragment defines its own fields, and the User fragment delegates to it rather than inlining Post fields.
When should I NOT use auto-generated fragments?
Avoid auto-generated fragments when you need highly selective field sets that vary per query — for example, a list view that fetches only id and name versus a detail view that fetches every field. In such cases, hand-write purpose-specific fragments instead of using the all-fields fragment this tool generates.
What about list scalar fields like tags: [String!]!?
List scalar fields — arrays of primitive types like [String!]! or [Int!]! — are included directly in the fragment body. They don't reference other schema types, so there is no nested fragment spread needed. The tool correctly distinguishes between list scalars and list object types.
Can I customize the generated fragments?
The tool generates fragments that include all fields by default. You can freely modify the output to remove fields you don't need, add aliases, or create multiple fragments for the same type with different field sets tailored to specific UI components.
Is my schema data sent to a server?
No. All parsing and fragment generation happen entirely in your browser. Your GraphQL schema SDL never leaves your device, so you can safely use this tool with proprietary or internal schemas.
Real-world Examples
E-commerce Product Catalog Fragments
Generate fragments for a product catalog schema where Product references Category and Review types. The tool creates composable fragments with nested spreads.
type Product {
id: ID!
name: String!
price: Float!
description: String
category: Category!
reviews: [Review!]!
tags: [String!]!
}
type Category {
id: ID!
name: String!
slug: String!
}
type Review {
id: ID!
rating: Int!
comment: String
author: String!
}fragment ProductFields on Product {
id
name
price
description
tags
category {
...CategoryFields
}
reviews {
...ReviewFields
}
}
fragment CategoryFields on Category {
id
name
slug
}
fragment ReviewFields on Review {
id
rating
comment
author
}Blog Author and Post Fragments
Generate fragments for a blog schema with bidirectional references between Author and Post types.
type Author {
id: ID!
name: String!
email: String!
bio: String
avatar: String
}
type Post {
id: ID!
title: String!
content: String
author: Author!
tags: [String!]!
publishedAt: String
}fragment AuthorFields on Author {
id
name
email
bio
avatar
}
fragment PostFields on Post {
id
title
content
tags
publishedAt
author {
...AuthorFields
}
}