What is GraphQL? | Introduction to GraphQL

Explore the Secrets of GraphQL: From Fundamentals to Advanced Concepts for Aspiring Developers

9 min readAug 8, 2023

In this beginner-friendly article, we’ll embark on a journey to demystify GraphQL, unravel its core concepts, and explore the transformative advantages it brings to the world of modern development. Get ready to elevate your coding expertise.

What is GraphQL?

The acronym GraphQL stands for Graph Query Language.

According to graphql.org, GraphQL is an API query language. In simple terms, GraphQL is the query language for querying data. This means you can get the data, modify data and delete data with GraphQL.

Unlike SQL and other query languages, GraphQL doesn’t communicate directly with databases.

A GraphQL query is essentially a request that is sent to a server, which then processes it, performs the necessary activities, and returns JSON.

Currently, GraphQL is the cutting-edge method for creating APIs (application programming interfaces). Facebook created GraphQL to optimize RESTful API calls.

“GraphQL is a query language for your API and a server-side runtime for executing queries using a type system you define for your data. GraphQL isn’t tied to any specific database or storage engine and is instead backed by your existing code and data.” — Official Definition https://graphql.org/learn/

If you are familiar with REST, you are aware that it supports requests like GET, POST, PUT, and DELETE. The aim of these requests is precisely the same but is achieved differently using GraphQL. Similar to the GET request in REST, the QUERY feature in GraphQL is used for retrieving data. Similar to REST’s POST, PUT, and DELETE requests, GraphQL’s MUTATIONS feature is used to change and delete data.

Example: Let’s say you have employee data. Employee ID, name, age, gender, birth date, aadhar card number, blood group, and many other fields are now included in the list of fields connected to employees. Now, all the fields will be returned if you retrieve the data via REST APIs. Only the fields you requested will be returned if you utilize GraphQL. For instance, if you simply require the employee id and name, GraphQL will only supply these two fields. This is GraphQL’s strength. Efficiency and performance are enhanced via GraphQL. How GraphQL is doing this, is discussed later in this article.

Why GraphQL was introduced? (Brief history of GraphQL)

In 2012, the popular social networking platform Facebook released GraphQL internally.

They were dealing with an intriguing issue. Around 2012, the Facebook mobile app was expanding quickly. As opposed to online applications, which have huge screens to display the data, mobile apps now have a smaller screen on which to view the data.

You may be aware that REST receives all the data, which must then be filtered. You need to make many REST calls if you want specific data. Currently, only crucial information needs to be provided in mobile apps, however, REST calls will offer you all the information.

REST refers to this as requiring additional network calls and bandwidth. Additionally, retrieving the data takes longer in REST because there are so many calls. There is a limited amount of bandwidth and network power in mobile apps. In order to address this issue, Facebook developed GraphQL.

In essence, it addresses the issues of over-fetching(Data is more than requirements) and under-fetching(Data is less than requirements)). GraphQL will retrieve the precise data you requested. In 2015, Facebook made GraphQL open-source.

GraphQL characteristics

Client Driven:

GraphQL is client driven. Although the server-side (backend) implementation of GraphQL contains the logic, GraphQL allows the client the ability to query only the necessary data. Data is accessed using a single endpoint using GraphQL. With GraphQL, developers can immediately experiment without changing the backend functionality. Therefore, GraphQL offers front-end developers flexibility.

Documentation:

GraphQL enables users to query both data and schema shapes. It’s interesting to note that you do not need to provide GraphQL documentation. The documentation is generated automatically by GraphQL.

Strongly Typed:

GraphQL is a strongly typed language. The scalar types ID, Float, Boolean, String, and Int are supported by GraphQL. These types can be used directly while creating GraphQL schemas.

Hierarchical:

The structure of GraphQL is hierarchical. The data is returned by GraphQL in the same order and shape as you specified in your GraphQL query.

Declarative:

GraphQL queries have this property. This indicates that GraphQL will only return the fields that the client has requested.

Overview of GraphQL

GraphQL is an application layer technology. All application layer functionality is available in GraphQL.
Only the requested data is provided by GraphQL; neither more nor less is provided.
This aggregation process is made simpler by GraphQL when you want to mix data from multiple sources.
GrapQL only makes use of one endpoint. In most cases, it is /graphql. GraphQL only makes one network call to query the data. While using REST, you need several calls.
GraphQL doesn’t have a version system, because it only utilizes one endpoint. You may have noticed that there are many versions of many REST endpoints. No need to bother about versioning in GraphQL. All the modifications are managed internally by GraphQL.
Executing GraphQL queries follows a client-server model. The GraphQL query is sent from the client to the server. This GraphQL request is processed and answered by the server. GraphQL uses only one endpoint, as was already explained. It is typically /graphql.
There are no transport-layer restrictions with GraphQL. Any protocol can be used with GraphQL. When utilizing GraphQL, individuals typically use HTTP.
Data is accessed via GraphQL in a single request. Because GraphQL queries the data in a single request, it can still function even with a low bandwidth or slow internet connection. Multiple requests are made through REST.
GraphQL makes data retrieval more effective than conventional REST APIs. There is only one network call when using GraphQL, which leads to quicker response times.
Structure of a GraphQL query and the process by which the server validates and executes the query. GraphQL provides the data that is specifically requested, it is not a solution for client-side state management or binary streams such as large file transfers or audio/video streaming.
GraphQL is not the same as the Facebook Graph API, as GraphQL is not limited to a specific database and can be used with resolver functions in various languages.
GraphQL is not restricted to any programming languages or databases. GraphQL implementation is available for all the most popular languages like JavaScript, and Python.

GraphQL API has three fundamental components:

GraphQL Schema: This is the GraphQL schema that you define in your implementations.

type User {
id: ID!
name: String!
age: Int!
}

Above is a simple GraphQL schema. Here you can see that type is User. This Means User has three properties. Each property has a different type.

2. GraphQL Query: It is the request done by the client. Basically what the user needs to do with the data is GraphQL query.

3. GraphQL Resolver: Actual implementation and core logic are written in GraphQL resolvers. All database calls and other logic is written in GraphQL resolvers.

const resolvers = {
  Query: {
    // GraphQL resolvers
    users: () => {
    return UserList;
  },
  user: (parent, args) => {
    const id = args.id;
    const user = _.find(UserList, { id: Number(id) });
    return user;
  },
}

Above is an example of GraphQL resolvers. Actual GraphQL logic is written here. You can see that user functions return all the users. If you want one user then the user function does that.

GraphQL supports three types of operations

GraphQL query:

Use to fetch the data. GraphQL query is the same as GET requests in REST

In the above image, you can see the example of a GraphQL query. Here you notice that it returns only fields that are mentioned in the GraphQL query. No extra field is returned in the GraphQL response.

2. GraphQL mutation:

Use to modify and delete data. GraphQL mutation is the same as POST, PUT, and DELETE requests in REST.

GraphQL mutation example — GraphQL Mutation Example

In the above example, you can see that we are creating a new User with GraphQL mutation.

3. GraphQL subscription:

Subscribe to changes in data. Shows Real-time changes in data.GraphQL subscription is the same as WebSockets.

Advantages and Disadvantages of GraphQL

Advantages of GraphQL:

No over fetching(Overfetching means data is more than requirements)
No under fetching(Underfetching means data is less than requirements)
Data fetching in a single request.
Operates on a single endpoint.
GraphQL is Strongly typed.
GraphQL queries are human-readable and simple.
Declarative and Hierarchical
Inbuilt error handling. Unlike REST APIs, no need to make explicit error handling in GraphQL.
GraphQL reduces the errors because it is strongly typed. GraphQL reduces the efforts of debugging because GraphQL inbuilt handles errors.
GraphQL is suited for microservice architecture
GraphQL improves the performance of mobile apps because GraphQL solves the problem of under-fetching and over-fetching.

Disadvantages of GraphQL

The learning curve is hard and tricky.
In GraphQL, caching is very hard as there is a single endpoint in GraphQL. Also, GraphQL is client driven. So, you can’t predict which query to be sent by the client. Even though Apollo’s implementation provides caching features. Still caching is very hard in GraphQL
Performance is not upto the mark in complex queries
Design patterns are missing
Not For small applications
Can’t make file uploading feature with GraphQL query. GraphQL does not understand the files

Use case of GraphQL

When you need to iterate quickly, GraphQL is really helpful. GraphQL is now incredibly helpful in the startup era when you need to create a quick product prototype. REST APIs require more planning and construction time, whereas GraphQL allows you to quickly implement your product logic.
GraphQL use in rapid prototyping
Today, many tech giants are using GraphQL. Companies including Twitter, PayPal, and GitHub use GraphQL

Famous GraphQL implementations

Explore the below part if you want to deep dive into GraphQL, otherwise, you can skip this section.

Top 3 GraphQL Server:

Apollo Server: Apollo Server is an open-source, spec-compliant GraphQL server that’s compatible with any GraphQL client, including Apollo Client. It’s the best way to build a production-ready, self-documenting GraphQL API that can use data from any source.
Express graphql: express-graphql was the first official reference implementation of using GraphQL with HTTP. It has existed since 2015 and was mostly unmaintained in recent years.
Hot Chocolate: Hot Chocolate is the most efficient, feature-rich, open-source GraphQL server in the .NET ecosystem, that helps developers to build powerful GraphQL APIs and Gateways with ease.

Top 3 GraphQL IDEs:

GraphiQL: GraphiQL is the reference implementation of this monorepo, GraphQL IDE, an official project under the GraphQL Foundation. The code uses the permissive MIT license.
GraphQL Playground: GraphQL Playground is a popular IDE for exploring GraphQL APIs. It was created by Prisma and built on top of GraphiQL
GraphQLEditor: GraphQLEditor makes it easier to understand GraphQL schemas.

Top 3 GraphQL Clients:

Apollo Client: Apollo Client is a fully-featured caching GraphQL client with integrations for React, Angular, and more. It allows you to easily build UI components that fetch data via GraphQL
Relay: Relay is a JavaScript framework for building data-driven React applications.
Urql: urql is a GraphQL client that exposes a set of helpers for several frameworks. It’s built to be highly customizable and versatile so you can take it from getting started with your first GraphQL project all the way to building complex apps and experimenting with G6raphQL clients.

Conclusion:

GraphQL is open source and it is a query language for APIs
GraphQL is not restricted to programming languages or databases. GraphQL implementation is available for all famous programming languages.
GrapQL operates on a single endpoint.
GraphQL query executes in one network call.
GraphQL solves the problem of under-fetching and over-fetching
GraphQL is client-driven and application-layer technology. GraphQL is transport layer agnostic. GraphQL works with any protocol.
GraphQL has three concepts: 1) Query 2) Schema 3) Resolver
GraphQL supports three operations: 1) Query 2) Mutation 3) Subscription

If you found this useful, please like and share your thoughts in the comments.

Thank you for your time and interest in reading.