DEV Community

Cover image for First steps... GraphQL. What?
Blitty
Blitty

Posted on

First steps... GraphQL. What?

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

Table of Contents

  1. What is GraphQL?
    1. Query
    2. Mutations
    3. Scalars
    4. Arguments
    5. Type
    6. Interface
    7. Enum
    8. Non-null-values
    9. Arrays
  2. Full Example
  3. Follow me!

What is GraphQL?

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

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

(Example from the docs)
For example._

type Query {
  hero(episode: Episode): Character
  droid(id: ID!): Droid
}
Enter fullscreen mode Exit fullscreen mode

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
  }
}
Enter fullscreen mode Exit fullscreen mode

we will get an error !!! Because in the Query type, we didn't specify it.

罈 Mutations

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

罈 Scalars

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 humanreadable.

罈 Arguments

(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)

type Starship {
  id: ID!
  name: String!
  length(unit: LengthUnit = METER): Float
}

enum LengthUnit {
  METER
  FOOT
}
Enter fullscreen mode Exit fullscreen mode

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

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

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._

interface Monkie {
  name: String!
}

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

type HumanPlus implements Monkie {
  name: String!
  isSuper: Boolean
}
Enter fullscreen mode Exit fullscreen mode

罈 Enum

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

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 (?)

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

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
}
Enter fullscreen mode Exit fullscreen mode

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
    }
  }
}
Enter fullscreen mode Exit fullscreen mode

In the variables place, we need to have for the second query:

{
  "name": "GQL"
}
Enter fullscreen mode Exit fullscreen mode

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!

(I liked more the red bird :_()
Twitter
GitHub
LinkdIn

PD: I think I missed some things Sorry

Discussion (0)