First steps... GraphQL. What?
Tags: graphql, learning
Published: 2021-07-27 17:57:07

We need this... and you know it!!! 🤓

## Table of Contents
1. [What is GraphQL?](#what-is-gql)
    1. [Query](#query)
    2. [Mutations](#mutations)
    3. [Scalars](#scalars)
    4. [Arguments](#arguments)
    5. [Type](#type)
    6. [Interface](#interface)
    7. [Enum](#enum)
    8. [Non-null-values](#non-null-values)
    9. [Arrays](#arrays)
2. [Full Example](#full-example)
3. [Follow me!](#follow-me)

## What is GraphQL? <a name="what-is-gql"></a>
According to the definition:
> GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

So... in simple words, `is a tool to request the necessary and what you want, instead of sending all the information.`

Nice! Now... How do we use it?¿

### » Query <a name="query"></a>

This is special, because it is the entry point of every GQL query.

(Example from the docs)
For example._
```gql
type Query {
  hero(episode: Episode): Character
  droid(id: ID!): Droid
}
```
Now we can get/send 2 types of _type_ (jeje), by using those Arguments, if we try to get a Character, like this:
```
query {
  character {
    name
  }
}
```
we will get an error 🚧 !!! Because in the Query type, we didn't specify it.

### » Mutations <a name="mutations"></a>

They are another special type, is like Query, but the Arguments are used to modify or create new data in the Data base.

### » Scalars <a name="scalars"></a>

They are the basic (or primitive (?)) data type in GQL. The main ones are `Int, Float, String, Boolean, ID`.

> The ID scalar type represents a unique identifier, often used to refetch an object or as the key for a cache. The ID type is serialized in the same way as a String; however, defining it as an ID signifies that it is not intended to be human‐readable.

### » Arguments <a name="arguments"></a>

(I am not sure if this is the way of describe it, comment if not)
Arguments are like "functions" that a *type* can have, so we can have a way of sending data depending on what we want. (Using the example from the doc)
```gql
type Starship {
  id: ID!
  name: String!
  length(unit: LengthUnit = METER): Float
}

enum LengthUnit {
  METER
  FOOT
}
```
Here we have `length` that has a parameter which is by default METER and of type (enum) LengthUnit. Here is where magic happens, if we use METER we will have a value in meters, but when we get FOOT as argument, surprise!!, we will have a result in foot. Which is amazing, no? 🤯

### » Type <a name="type"></a>
To create *types* which is a form of describing the data, if you know how SQL data bases work, then you will compare this as tables and rows.

### » Interface <a name="interface"></a>
An interface we can think of it like in OOP (Object Oriented Programming) but with another idea. It is an abstract type that has fields, which can be **implemented** by types, this way we can have fields that more than one type has in common. Also, the type that **implements** an interface, needs to have the fields of that interface.

Example._
```gql
interface Monkie {
  name: String!
}

type Human implements Monkie {
  name: String!
  isDev: Boolean!
}

type HumanPlus implements Monkie {
  name: String!
  isSuper: Boolean
}
```

### » Enum <a name="enum"></a>
Is a way of creating an enumeration, for the people who does not know what an enum is, it is a way of creating some kind of "just these values can be accepted in the field.

### » Non-null values <a name="non-null-values"></a>
To determine fields that cannot be null, we use the char `!`, this way, if the non-null field is null, then **graphql** will trigger an error.

### » List or Arrays (?) <a name="arrays"></a>
We represent a field as an Array or List, using the `[]` operator. Inside it we determine the type. When we use the non-null value in Arrays, we use it in two different ways:

1. [type]!
Here we can say that GraphQL will trigger an error when the field value is null, so it will admit `[], [values], [null, values]`.
2. [type!]
It will admit `null, [], [value]`, but will trigger an error when given an Array with a null value: `[value, null]`.


## Full Example <a name="full-example"></a>
```gql
interface Animal {
  id: ID!
  name: String!
  age: Int!
  breed: [String]!
  colorEyes: ColorEyes!
  typeEyes: TypesEyes!
  father: Animal
  mother: Animal
  isStrong: Boolean
}

type AnimalFromMars implements Animal {
  id: ID!
  name: String!
  age: Int!
  breed: [String]!
  colorEyes: ColorEyes!
  typeEyes: TypesEyes!
  father: Animal
  mother: Animal
  isStrong: Boolean
  isIntelligent: Boolean
}

type AnimalFromOnePiece implements Animal {
  id: ID!
  name: String!
  age: Int!
  breed: [String]!
  colorEyes: ColorEyes!
  typeEyes: TypesEyes!
  father: Animal
  mother: Animal
  isStrong: Boolean
  size: Float
}

enum ColorEyes {
  GREEN # my favourites :D
  BLUE
  BLACK
  BROWN
}

enum TypesEyes { # didn't know how to describe this xd
  SHARINGAN
  SEA
  FIRE
  LINES
}

type Query {
  getAnimalByID (id: ID = 0): Animal
  getAnimalByName (name: String!): Animal
}
```

Now when we want to make a request, we create a query
```
# one way
query {
  getAnimalByID () { # by default is 0
    name
    age
    # we need to make this because size is just in AnimalFromOnePiece type, so we need to say what we want, when it is that type
    ... on AnimalFromOnePiece {
      size
    }
    ... on AnimalFromMars {
      isIntelligent
    }
  }
}
# another way
query getParents ($name: String) {
  getAnimalByID (name: $name) { # by default is 0
    father
    mother
    ... on AnimalFromOnePiece {
      size
    }
    ... on AnimalFromMars {
      isIntelligent
    }
  }
}
```

In the variables place, we need to have for the second query:
```gql
{
  "name": "GQL"
}
```

So.... this is all!! Now I am an expert of GQL HUASHUASHUASHUAS

Okey. . . . . Just joking, but now I know how all these stuff works!!!

Wish this helps you 😅 (It helped me, doing it!)

---

## Follow me! <a name="follow-me"></a>
(I liked more the red bird :_()
🐦 [Twitter](https://twitter.com/blit12_)
🐙 [GitHub](https://github.com/blitty-codes)
👥 [LinkdIn](https://www.linkedin.com/in/blitty/)

PD: I think I missed some things 😬 Sorry