Kekuatan magis dari sihir GraphQL

TeknisTakis Mar 22, 2020

Karena kebutuhan pembuatan perangkat lunak semakin kompleks dan semakin beragam, setiap hari ada saja entah itu tools, framework, library bermunculan di dunia teknologi dimana hal tersebut muncul bukan karena hanya trend semata melainkan masing-masingnya bertujuan menyelsaikan masalah sendiri-sendiri, jadi stop debat jquery vs react vs blablabla πŸ˜‚, sungguh kalian membuang waktu sekali kizana.

Ilustrasi pendebat fremwerk

https://tenor.com/view/fighting-girl-fight-cat-fight-angry-wild-fight-gif-15206304 

Oke lanjut, beberapa pekan lalu saya pribadi sempat menjadi volunteer, iya volunteer alias relawan dimana relawan mengeksplorasi sesuatu yang saat ini lagi rame di diskusikan yaitu GraphQL. Mungkin ngebahas ini agak terlambat, tapi yauda gapapa daripada hasil belajarku disimpan sendiri lebih baik di sebarkan ke pembaca seperti kalian, LESGOW ...

Jadi apa itu GraphQL ?

Menurut officialnya seperti ini ...

GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data.

Kalian mungkin sering menjumpai tentang SELECT * FROM XXX pada basis data, konsep hampir sama seperti itu namun ini dikhususkan untuk sebuah API. Jedi GraphQL ini adalah sebatas query language, walaupun seperti itu GraphQL tidak membatasi menggunakan database SQL ataupun NoSQL karena GraphQL tidak berhubungan secara langsung dengan basis data itu sendiri.

Arsitektur sebelum menggunakan GraphQL

Sesudah menggunakan Graphql

Dari gambar diatas GraphQL berada di posisi diantara frontend dan backend, jadi si GraphQL ini dapat diimplementasikan menggunakan bahasa apapun dan di implementasikan bagian client maupun server, client dapat menggunakan kombinasi react x graphql ataupun golang x graphql pada backend. Contoh implementasi GraphQL saat ini sudah banyak sekalii untuk mempercepat proses pengembangan seperti hasura, prisma, apollo.

Konsep dari graphql terdiri dari 3 pilar utama, yaitu Schema, Query, Resolver dan penjelasannya seperti berikut:

https://tenor.com/beCSA.gif (Illustrasi Pilar)

Schema

Schema disini berfungsi menjadi struktur dari data atau formula dalam GraphQL, dengan adanya schema penulisan menjadi lebih konsisten dalam pengimplementasiannya.

Contoh penulisan :

type Pokemon {
 id: ID!
 name : String! 
 weight: [PokemonDimension]!
 height : [PokemonDimension]!
 types : String!
}
    
type PokemonDimension {
 minimum : String!
 maximum : String!
}

Query

Perbedaan dari GraphQL dan REST API kelihatan dari sini, dimana client biasanya mengambil request dari sebuah endpoint semisal :

GET https://api.pokemon.com/pokemons/id/UG9rZW1vbjowMDE

Disitu dapat di deskripsikan bahwa,

frontend : hey api.pokemon.com aku minta data dari Β endpoint /pokemons yang memiliki id : UG9rZW1vbjowMDE dong

backend : oke paduka, saya akan menampilkan data dari endpoints /pokemons yang ber idkan UG9rZW1vbjowMDE. maka si server akan mengembalikan respon seperti berikut.

"pokemons": [
      {
        "id": "UG9rZW1vbjowMDE=",
        "name": "Bulbasaur",
        "types": [
          "Grass",
          "Poison"
        ],
        "weaknesses": [
          "Fire",
          "Ice",
          "Flying",
          "Psychic"
        ],
        "height": {
          "maximum": "0.79m",
          "minimum": "0.61m"
        },
        "weight": {
          "maximum": "7.76kg",
          "minimum": "6.04kg"
        }
      }
]
Contoh hasil response

Dengan menggunakan REST kita mendapatkan informasi tambahan yang sebenarnya tidak dibutuhkan, hal ini dikarenakan ketika mengakses sebuah endpoint, kita mendapatkan semua data yang telah ditentukan oleh server ketika endpoint tersebut diakses. Nah disini magic dari GraphQL tersebut terlihat, di dalam GraphQL kita dapat menentukan sendiri data yang akan diambil sesuai dengan jargon yang ditawarkan oleh graphQL :

All of the data you need, in one request

Pengaksesan akan menjadi sesimpel ini dalam GraphQL

query{
  pokemon(id:"UG9rZW1vbjowMDE") {
    name
    types
    weaknesses
    height{
      maximum
      minimum
    }
    weight{
      maximum
      minimum
    }
  }
}
GraphQL query 

Maka akan menghasilkan response seperti ini :

{
  "data": {
    "pokemon": {
      "name": "Bulbasaur",
      "types": [
        "Grass",
        "Poison"
      ],
      "weaknesses": [
        "Fire",
        "Ice",
        "Flying",
        "Psychic"
      ],
      "height": {
        "maximum": "0.79m",
        "minimum": "0.61m"
      },
      "weight": {
        "maximum": "7.76kg",
        "minimum": "6.04kg"
      }
    }
  }
}

Mari kita coba magic dari GraphQL itu sendiri, semisal disini kita ingin menampilkan data yang kita inginkan saja dan membuang yang tidak perlu. Semisal data yang diperlukan menampilkan data pokemon name dan weakness saja, lesgow mencoba mantra nya :

query{
  pokemon(id:"UG9rZW1vbjowMDE") {
    name
    weaknesses
}
Query menampilkan nama pokemon dan weakness

Maka akan meghasilkan data seperti ini :

{
  "data": {
    "pokemon": {
      "name": "Bulbasaur",
      "weaknesses": [
        "Fire",
        "Ice",
        "Flying",
        "Psychic"
      ]
    }
  }
}
Hasil Query

Jadi dengan kasus tersebut frontend dapat mendefinisikan data yang akan dibutuhkan sesuka hati sehingga akan meningkatkan efisiensi mengkonsumsi API dan menghemat pertukaran data sesuai dengan Schema yang diinisiasi. Contoh diatas saya menggunakan pokemon GraphQL API dari sini.

Dan lagi didalam GraphQL tidak ada yang namanya POST, PUT, GET, DELETE melainkan sebuah mutasi untuk melakukan perubahan data.

Resolver

Resolver adalah tentang bagaimana sebuah query yang di proses dari sebuah API dan kurang lebih seperti dibawah ini, dimana resolver ini mengkoneksikan field dari schema dengan query nya. Untuk latihan akan dibuat di tulisan selanjutnya 🀟🏻, biar ngga kepanjangan.

const resolvers = {
  Query: {
    pokemon(parent, args, context, info) {
      return pokemon.find(pokemon => pokemon.findByPk(id) === args.id);
    }
   PokemonSchema : {
      id : parent.id => parent.id,
      dst ...
    }
  }
}

Terakhir Kesimpulan

Cakep tapi kelakuan dajjal

Huh Finally, GraphQL menyediakan kemudahan dalam pengambilan data serta dapat mengurangi jumlah request dan proses pengembangan yang lebih cepat dengan keunggulan type system yang dimiliki oleh GraphQL dan cocok digunakan ketika skala aplikasi menjadi semakin besar dan kompleks, kalian bisa membacanya disini sejarah pembuatan dari GraphQL, tidak hanya itu GraphQL dapat mendokumentasikan API nya secara otomatis dan masih banyak lagi.

GraphQL emang mbois, balik lagi apakah kita memang benar benar membtuhkannya?

Ketika aplikasi belum sekompleks itu seperti kasus facebook, lebih baik pakai REST API biasa saja dolo kak dikarenakan memakai GraphQL membutuhkan investasi waktu dan penyesuaian dengan fitur serta implementasinya.

Kalau untuk eksplore ya oke oke saja lah, wes ya kemeng tangan.

Semoga bermanfaat hehe

flatburger

πŸ™ warga gotham biasa

Great! You've successfully subscribed.
Great! Next, complete checkout for full access.
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.