All 15 GraphQL questions
More in GraphQL
What is the difference between a GraphQL query variable and hardcoding a value directly inside the query string? How would you set up a basic GraphQL server in Node.js using Apollo Server, defining a schema and resolvers? What is the difference between a GraphQL Query, Mutation, and Subscription operation type? What is GraphQL introspection, and why might you want to disable it in a production environment? How would you handle file uploads in a GraphQL API, given GraphQL's standard JSON-based transport doesn't naturally support binary file data? What is the purpose of GraphQL's non-null (!) type modifier, and what happens if a resolver for a non-null field returns null unexpectedly? What is the difference between a GraphQL scalar type and an object type, and how would you define a custom scalar (like DateTime) in a Node.js GraphQL server? What is the N+1 query problem in GraphQL specifically, and how does DataLoader solve it? How would you implement authentication and authorization in a GraphQL API in Node.js, given there's typically only a single HTTP endpoint? How would you implement query complexity analysis or depth limiting in a GraphQL API to prevent a maliciously deep or expensive query from overwhelming the server?
Advertisement
Back to results for “Architecture & Design Patterns”
Node.js › GraphQL

What is the purpose of GraphQL fragments, and how do they help avoid duplicating field selections across multiple queries?

Intermediate

Answer

A fragment defines a reusable, named set of fields on a specific type, which can then be included (spread) into multiple different queries or mutations wherever that same set of fields is needed -- this avoids repeating an identical, potentially large list of fields across every query that needs the same shape of data, and makes it easier to keep field selections consistent when the same data shape (like a summary view of a User) is used in several different places throughout an application.
fragment UserSummary on User {
  id
  name
  avatarUrl
}

query GetPost {
  post(id: "1") { title, author { ...UserSummary } }
}

query GetComment {
  comment(id: "1") { text, author { ...UserSummary } }
}
Real-world example A frontend application defines a UserSummary fragment once and reuses it across a dozen different queries that all need to display the same basic author information, ensuring that if the summary fields ever need to change, only the single fragment definition needs updating rather than every individual query.

Common follow-ups: How do GraphQL fragments relate to and support component-based frontend architectures, like colocating a fragment with a specific React component?;What's the difference between a named fragment and an inline fragment (used for querying fields specific to one type in a union or interface)?

Architecture & Design Patterns;RESTful API Design with Express
All 15 GraphQL questions