GraphQL has grown at an exponential rate since Facebook released it in 2015. Thousands of software development firms around the world use it on production-level apps today. The flexibility of GraphQL is its greatest asset. Developers can request data from multiple sources with a single API call.
In this post, we’ll go over GraphQL in greater depth, look at some real-world code examples that allow you to create Data charts with React, and discuss why you should consider using GraphQL.
Table of Contents
What is GraphQL?
GraphQL is an open-source data query and manipulation language for Application Programming Interfaces (APIs). Unlike a typical REST API, it allows you to pull data from multiple sources with a single API call. GraphQL is also fast, flexible, and efficient. That’s why it has become massively popular among developers around the world and could be useful for an interactive graph.Why should you use GraphQL?
- Avoid multiple REST calls
- Enhance efficiency. Write fewer lines of code and
- Enjoy super-fast performance
- Solve over-fetching and under-fetching issues
- Facilitate rapid application prototyping
What are the Concepts of GraphQL?
- Schema: Schema describes the shape of your available data. GraphQL uses a schema to define a hierarchy of types with fields. It generates them from the data stores on the back-end of your web application. Also, schemas specify the exact queries and mutations available for clients to execute.
- Type: There are two kinds of types in GraphQL: scalar types and object types. Scalar types are primitive data types, like integer, float, and string. They can store only a single value. On the other hand, the object type represents a group of fields. For instance, there can be an object type called User. It can have a field that references another object type, like Admin.
- Queries: Queries are used to read or fetch values. They define what your API can return. They make the process of creating multiple data fetches straightforward for you. You need to pass arguments to every field and nested object in your query. This lets you effectively deepen your query requests.
- Mutations: Mutations allow you to modify the server-side data. You can use them to perform various operations, like inserting, updating, and deleting data on the server.
- Resolver: Resolver is a collection of functions that populate the data for a single field in your schema. When the client queries for a particular field, the resolver fetches the requested data from the appropriate source. In other words, a resolver acts as a GraphQL query handler.
Real-Life Code Example of GraphQL
To understand how GraphQL works in real life, let’s explore the open-source code of Spectrum’s community-based chat platform. Its technology stack includes GraphQL, so it is a perfect example of a real-life application.getMessageById – Query
Take a look at this portion of code from the Spectrum getMessage.js file:export const getMessageByIdQuery = gql`
query getMessageById($id: ID!) {
message(id: $id) {
...messageInfo
}
}
${messageInfoFragment}
In the first line, you export a constant named getMessageByIdQuery. Then you assign it a GraphQL query by using gql template literal tag.
Next, you create a query called getMessageById. Inside it, you have to create messageInfo. It is preceded by three dots, which are used to refer to fragments within the code. The query returns a message when it passes an id as input.
banUserMutation – Mutation
To clarify the concept of mutation, take a look at this portion of code from Spectrum’s banUser.js file.type BanUserInput = {
userId: string,
reason: string,
};
export const banUserMutation = gql`
mutation banUser($input: BanUserInput!) {
banUser(input: $input)
}
`;
The mutation bans a specific user. In the first line, you denote the input type, called BanUserInput. It has two fields: userID and reason.
Next, you export a constant, called banUserMutation. You are also assigning it a GraphQL query using the gql template literal tag.
Then you have the banUser mutation as the name. The keyword mutation precedes it. It has a banUser field with an input.
As you can see, you can implement functionality to ban a user with just a few lines of code. There is no complexity. With GraphQL, you can implement features quickly with less code.
