첫 번째 단계... GraphQL. 뭐?

8718 단어 learninggraphql
우리는 이것이 필요합니다... 그리고 당신은 그것을 알고 있습니다!!! 🤓

목차



  • What is GraphQL?
  • Query
  • Mutations
  • Scalars
  • Arguments
  • Type
  • Interface
  • Enum
  • Non-null-values
  • Arrays

  • Full Example
  • Follow me!

  • 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?¿

    » 쿼리

    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
    }
    

    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.

    » 돌연변이

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

    » 스칼라

    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.

    » 인수

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

    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? 🤯

    " 유형

    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.

    " 상호 작용

    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
    }
    

    » 열거

    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.

    » null이 아닌 값

    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.

    » 목록 또는 배열(?)

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

    전체 예

    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:

    {
      "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!)


    날 따라와!

    (I liked more the red bird :_()
    🐦
    🐙
    GitHub
    👥

    PD: 제가 놓친 부분이 있는 것 같아요 😬 죄송합니다.

    좋은 웹페이지 즐겨찾기