GraphQL Oversimplified
Tags: graphql, webdev, programming, javascript
Published: 2022-12-26 23:07:04

**GraphQL** is a query language for your `API`, and a runtime for executing those queries against your data. It was created by **Facebook** as an alternative to `REST` APIs, which have been the standard way of exposing data through APIs for many years. 

However, graphqls new way of writing APIs can make it difficult for developers accustomed to working with REST. Some core concepts of GraphQL are essential to understand how GraphQL works. I will be covering those core concepts in this post. However, if you are entirely new to GraphQL, you should start with [GraphQL docs](https://graphql.org/learn/) first and then come and read this post.

#### Topics that I will talk about:

1. [Schema Definition Language (SDL)](#1-schema-definition-language-sdl)
2. [Queries](#2-queries)
3. [Mutations](#3-mutations)
4. [Subscriptions](#4-subscriptions)

## 1 - Schema Definition Language (SDL)
The Schema Definition Language (SDL) is a way to define GraphQL **schemas** using a simple and straightforward syntax. It allows you to define the **types**, **fields**, and **relationships** in your data model, and it is used to create a `GraphQL` schema that a server can use to process `GraphQL` **queries**.

Here is an example of a GraphQL SDL that defines a simple data model with a single type called "Person":

```graphql
type Person {
  id: ID!
  name: String!
  age: Int!
  address: String
}
```
This **SDL** defines a type called `Person` with four fields:

- `id`: an **ID** field that is **required** (denoted by the `!` symbol)
- `name`: a `String` field that is **required**
- `age`: an `Int` field that is **required**
- `address`: a `String` field that is **optional** (not required)

The `SDL` also allows you to define **relationships** between types, as in the following example:

```graphql
type Person {
  id: ID!
  name: String!
  age: Int!
  address: String
  friends: [Person]
}
```
This defines a one-to-many relationship between Person objects, where a person can have multiple friends but each friend can only have one person.

## 2 - Queries
In `GraphQL`, a **query** is a request for data from a server. **Queries** are used to fetch data from a **GraphQL** server and are typically used to retrieve data for display in a client application.

`Queries` are written in the **GraphQL query language**, which is a syntax for specifying the data you want to retrieve. A GraphQL query consists of a set of `fields`, with each field representing a piece of data you want to retrieve. Fields can be nested to represent relationships between data.

Here is an example of a simple GraphQL query that retrieves the name and age of a person with a specific ID:

```graphql
query {
  person(id: "123") {
    name
    age
  }
}
```
This query includes a single field, `person`, which takes an argument (the `ID` of the person we want to retrieve). The `person` field itself has two **subfields**, `name` and `age`, which specify the data we want to retrieve for that person.

Queries can also include variables, which allow you to pass dynamic values into your query. For example:

```graphql
query GetPerson($id: ID!) {
  person(id: $id) {
    name
    age
  }
}
```
In this example, the query includes a variable called **$id** of type **ID!**, which means it is a required variable of type ID. The variable is used in the query as an argument to the "person" field. To execute this query, you would need to provide a value for the **$id** variable.

## 3 - Mutations
While queries are great, we also need to update information using APIs. In GraphQL, a **mutation** is a way to **change** or **update** data on the server. Mutations are used to create, update, or delete data, and they are typically used to update the server's data in response to user actions.

Mutations are written in the GraphQL query language, and they are similar in structure to queries. A mutation consists of a set of fields, each of which represents an action to be performed on the server.

Here is an example of a simple GraphQL mutation that creates a new person in the database:

```graphql
mutation {
  createPerson(name: "John Smith", age: 30, address: "123 Main St.") {
    id
    name
    age
    address
  }
}
```
This mutation includes a single field, `createPerson`, which takes a set of arguments (the person's `name`, `age`, and `address`). The `createPerson` field itself has four subfields, `id`, `name`, `age`, and `address`, which specify the data that should be returned after the mutation is executed.

Mutations can also include **variables**, which allow you to pass **dynamic** values into your mutation. For example:

```graphql
mutation CreatePerson($name: String!, $age: Int!, $address: String) {
  createPerson(name: $name, age: $age, address: $address) {
    id
    name
    age
    address
  }
}
```
In this example, the mutation includes three variables: `$name`, `$age`, and `$address`, which correspond to the arguments passed to the `createPerson` field. To execute this mutation, you would need to provide values for these variables.

## 4 - Subscriptions
Another one of the critical GraphQL Core Concepts is around the topic of subscriptions. In many modern applications, it is essential to have a real-time connection between server and client so that the client can be immediately informed about important events.

In GraphQL, a **subscription** is a way to receive **real-time** updates from the server. **Subscriptions** allow a client to subscribe to a specific **event** or set of **events**, and the server will send updates to the client as those events occur.

Subscriptions are written in the GraphQL query language, and they are similar in structure to `queries` and `mutations`. A subscription consists of a set of fields, each of which represents an event that the client is interested in receiving updates for.

Here is an example of a simple GraphQL subscription that listens for new messages in a chat room:

```graphql
subscription {
  newMessage(roomId: "123") {
    id
    text
    sender
  }
}
```
This subscription includes a single field, `newMessage`, which takes an argument (the `ID` of the chat room we want to listen for messages in). The `newMessage` field itself has three **subfields**, `id`, `text`, and `sender`, which specify the data we want to receive when a new message is received.

Once the client sends the above subscription request to the server, a connection is opened between them. Whenever a new mutation happens that creates an unknown author, the server sends information to the client as below:

```js
{
  "newMessage": {
    "id": "123456",
    "text": "Hello everyone, hope you guys will like this tutorial",
    "sender": "Arafat"
  }
}
```

## Conclusion
As you can see, we have successfully gone through the Core Concepts of GraphQL. We understood the concept of Schema and how your clients can interact with the GraphQL server using queries, mutations, and subscriptions. There is still a lot to discover in the Graphqls universe, so feel free to visit their documentation. Thanks for reading this article. I will see you guys in my next article.😍😊