GraphQL Fragment Generator

Generate GraphQL fragments with all scalar fields and nested fragment spreads from your schema.

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

  1. Paste your GraphQL schema SDL containing type definitions into the input area — include all related types so the tool can resolve nested references
  2. Click "Generate" to create a fragment for each type, with scalar fields listed directly and object fields replaced by nested fragment spreads
  3. Review the generated fragments to ensure all types and relationships are captured correctly
  4. Copy the output and import the fragments into your GraphQL documents, or feed them into a code generator for typed query hooks
  5. Extend individual fragments with additional fields as your UI requirements evolve — the base fragments remain stable

Why Use This Tool?

Eliminates duplicate field selections across queries by centralizing each type's field set in a single fragment
Generates composable fragments with nested spreads, so changes to a type propagate automatically to all dependent queries
Creates a consistent data-fetching contract across your application, reducing the risk of over-fetching or under-fetching
Works with any GraphQL client library — Apollo, urql, Relay, or raw HTTP — without lock-in
Serves as a foundation for code generation pipelines that produce TypeScript types, React hooks, or resolver signatures

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.

Input
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!
}
Output
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.

Input
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
}
Output
fragment AuthorFields on Author {
  id
  name
  email
  bio
  avatar
}

fragment PostFields on Post {
  id
  title
  content
  tags
  publishedAt
  author {
    ...AuthorFields
  }
}

Related Tools