Introduction to GraphQL
Tags: graphql, beginners, tutorial, showdev
Published: 2020-07-02 08:02:15

---
title: Introduction to GraphQL
published: true
description: GraphQL is a new approach for building an API that aims to get the better of RESTful APIS limitations.
tags: graphql,beginners,tutorial,showdev
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/0zozfkpfs1qbdv2e9n6f.png
canonical_url: https://blog.graphqleditor.com/introduction-to-graphql/
---

**GraphQL is a new approach** for building an API that aims to get the better of two basic **RESTful APIs limitations** which are data filters & relationships. These two classic REST flaws force REST users to always get the full payload in response & hit multiple data sources separately.
 
## What is GraphQL

**GraphQL is a data query and manipulation language** for APIs created and open-source by Facebook to solve the problem of unoptimized data flow in their mobile app. In general, GraphQL is a syntax that describing the way of requesting data from the server. The main difference comparing Graph QL to traditional REST API is that the response format is described in the query and defined by the client rather than the server. Another important thing about GraphQL is that it is language agnostic.

## Basic structure

The core notion of using GraphQL is a *schema*.  Designing a schema is one of the first steps in the development process, casting a shadow over the rest of the project. A carefully planned Graph QL schema is the core of a well-designed and secure product. GraphQL Schema is a center-piece of any Graph QL project and it strictly defines its structure & regulates how the data can be accessed.

##### GraphQL Queries & Mutations
There are two basic types of GrahQL operations which are GraphQL Queries & GraphQL Mutations:
- *GraphQL Queries* - query allows you to read or fetch data from the server-side,
- *GraphQL Mutations* - mutations are used to write or post values.

![GraphQL Query & Response](https://dev-to-uploads.s3.amazonaws.com/i/jfdzwtppkj48np50gj5u.png)

The performed operations have a form of a string that a GraphQL server can parse and respond to with requested data in a specific format i.e JSON.

##### GraphQL Resolvers
In order to understand what we are querying for the GraphQL server needs to have a defined set of functions/rules that our server would use to generate the response. These functions are called GraphQL Resolvers and they are responsible for handling our queries.

![Basic GraphQL resolver function](https://dev-to-uploads.s3.amazonaws.com/i/b1ubulxqnlred60tlij8.png)

## GraphQL vs REST

Imagine we want to retrieve posts from a company blog using RESTful API. First, we need to `GET api/posts`, but posts have other data like authors so we need to call REST API again to get the details of the posts i.e. authors ending up with two server requests instead of one, and as you continue to scale, you may have even more requests to different endpoints in order to fetch all the needed data. 

The performance drop, especially on slow cellular connections,  was the main problem Facebook engineers observed, and the urge to find its solution was a substructure for GraphQL. In GraphQL API we have a single endpoint being able to process complex requests. You query the GraphQL server for specific data and it will respond with what was requested, which results in fewer bits transferred over the wire.

![GraphQL vs REST the main difference](https://dev-to-uploads.s3.amazonaws.com/i/xokn903ug2yuy3afq7aj.png)

## Learn GraphQL
As you can see GraphQL is a very interesting concept. In the past couple of years, it gained a lot of traction and became a skill much appreciated and often required in job offers. If you are interested in deepening your knowledge of GraphQL there are plenty of neat resources you can learn from. 

##### Knowlege base
1. [GrapQL Official Documentation](https://graphql.org/learn/) is the best place to start your GraphQL learning.
2. [GraphQL Weekly](https://graphqlweekly.com/) is a newsletter with GraphQL tutorials, news, and everything related to GraphQL.
3. [How to GraphQL](https://www.howtographql.com/) is a website that will explain to you in detail what is GraphQL and
guide your steps from GraphQL newbie to releasing your production GraphQL project.

[![static GraphQL docs generated by GraphQL Editor](https://dev-to-uploads.s3.amazonaws.com/i/5o2hkrtccszt9ucis4ka.gif)](https://graphqleditor.com/)

### GraphQL Tools

1.  [GraphCMS](https://graphcms.com/) a tool that allows you to build a hosted GraphQL backend for your web project along with tools to manage its content.

2. [GraphQL Editor](https://graphqleditor.com/) is a graphic playground for GraphQL allowing you to build & manage your graphql schema faster giving you a set of GraphQL tools to:
    - bulletproof GraphQL IDE (error handling, type validation),
    - generate static GraphQL docs,
    - preview GraphQL queries with a Live JAMStack Engine & Mock Backend.

3. [Dgraph](https://launchpad.graphql.com/new) is a native GraphQL database to help you build apps faster.

4. [Hasura](https://hasura.io/) makes your PostgreSQL database instantly available over GraphQL API.

5. [Apollo](https://www.apollographql.com/) a platform that allows you to combine databases, different APIs, and microservices into a single data source that you can query using GraphQL.

---

## Speed up your GraphQL API development

*GraphQL Editor* is a supportive tool for both advanced GraphQL users as well as those taking their first steps with GraphQL APIs. Our all-in-one development environment for GraphQL will help you build, manage & deploy your GraphQL API much faster. **[Try GraphQL Editor for free!](https://graphqleditor.com)**


[![GraphQL Editor](https://res.cloudinary.com/practicaldev/image/fetch/s--XhJnT9d1--/c_limit%2Cf_auto%2Cfl_progressive%2Cq_66%2Cw_880/https://thepracticaldev.s3.amazonaws.com/i/835ac1nun474qfgn1tfi.gif)](https://graphqleditor.com)