How Fragments in GraphQL used
It consist of the three fields which includes
- Fragment Name: A unique identifier assigned to the fragment, allowing easy reference within queries.
- Type Condition: Specifies the GraphQL type to which the fragment applies, ensuring it is only used with fields belonging to that specific type.
- Field Selection: Defines the fields included when the fragment is applied, which can be scalar values (e.g., strings, integers) or nested objects.
fragment UserInfo on User {
id
name
}
Example 1
Suppose we have a GraphQL schema with a User type that looks like this:
type User {
id: ID!
name: String!
email: String!
}
Executing a query using the UserInfo fragment:
query GetUser {
user(id: "123") {
...UserInfo
}
}
If user data with ID “123” exists
Then the response from the GraphQL server might look like this
{
"data": {
"user": {
"id": "123",
"name": "John Doe",
"email": "john.doe@example.com"
}
}
}
This response includes the ID, name, and email fields for the user with the ID “123”, which matches the fields included in the UserInfo fragment.
Example 2 : With a fragment named PostInfo
Let’s have the following fragment named ‘PostInfo’
fragment PostInfo on Post {
id
title
content
author {
name
}
}
This fragment is defined on the Post type and selects fields like ‘id’, ‘title’, ‘content’, and nested fields for the author such as ‘name’ and ’email’.
Query using the PostInfo fragment
query GetPost {
post(id: "456") {
...PostInfo
}
}
Suppose we have a post with the ID “456”
Then, the response from the GraphQL server might look like this
{
"data": {
"post": {
"id": "456",
"title": "GraphQL Fragments Explained",
"content": "A detailed explanation of GraphQL fragments.",
"author": {
"name": "Jane Smith",
"email": "jane.smith@example.com"
}
}
}
}
This response includes the fields specified in the PostInfo fragment, namely id, title, content, and nested fields for the author (name and email).
Fragments in GraphQL
GraphQL is a tool designed to smooth the exchange of specific data between clients and servers via APIs. It serves as a common language understood by both the client, which requests data, and the server, which provides it. GraphQL is an open-source query language that expresses how a client should request information through an API.
In this article, we will be going to learn about the Fragments in GraphQL, what the use of the fragment, and why we need but before going further, we will know about what’s GraphQL and how it works.
Contact Us