GraphQL Fragments
GraphQL fragments are named, reusable sets of fields you embed in queries and mutations so multiple operations share the same selection shape. Fragments keep client queries DRY, align codegen output across screens, and make it easier for gateways to recognize consistent field lists when slimming upstream responses.
Technical Architecture & Deep-Dive
Without fragments, every screen duplicates nested field lists for types like User or Order. A fragment on User with id, name, and avatar centralizes that shape; queries spread it with ...UserFields.
Fragments also power typed client libraries: each fragment becomes a typed mask so components request only what they render. At the edge, a BFF can map fragment names to allowlists, stripping anything outside registered fragments before responses reach bandwidth-constrained mobile clients.
Key Architectural Benefits
Shared User Fragment
fragment UserFields on User {
id
name
avatarUrl
}
query Profile {
me {
...UserFields
email
}
}Implement GraphQL Fragments at the Edge
Deploy lightweight API aggregation, edge caching, and secret injection in minutes without Docker containers or complex servers.
Frequently Asked Questions
Q:Are fragments the same as GraphQL directives?
No. Fragments select fields. Directives such as @include attach runtime behavior to fields or operations.
Related Architecture Concepts
GraphQL directives are annotations such as @include(if: $flag) or @deprecated that attach metadata and behavior to schemas, fields, or operations. Built-in directives control conditional selection; custom directives can enforce authorization, format scalars, or signal federation keys, influencing what data resolves and what reaches the client.
GraphQL is a query language and runtime for APIs in which clients send a query describing exactly the fields they need, and the server returns JSON matching that shape. A strongly typed schema defines available data, and a single endpoint replaces many REST routes.
GraphQL variables let clients send a query document once with a separate JSON variables object for dynamic values, such as userId or page size. Servers bind variables to operation arguments, which improves caching, prevents injection in literals, and keeps network payloads smaller than embedding values in the query text.
Ready-to-Use Edge Recipes
Linear payloads are heavy for React Native. Pick issue id title state assignee from GraphQL response. RealComposer output mapping returns only the fields your UI needs at the edge.
To cache linear api graphql queries at edge, put a TTL cache on your RealComposer pipeline. Cache issue list queries with stale-while-revalidate pattern. Shared edge cache absorbs repeat traffic before it reaches Linear.