Post

Introduction to GraphQL

GraphQL adalah sebuah Query Language yang mungkin belum anda jumpai sebelumnya. Biasanya, jika kita ingin mengambil data dari sebuah API yang menyimpan misalkan saja menyimpan informasi film, Anda akan memiliki endpoint URL spesifik yang gunakan, dalam hal ini misal, contohURL.com/film/:id. Sebagai nilai kembali biasanya adalah judul, genre, dan beberapa data - data yang lain.

Sekarang, jika kita ingin menarik beberapa data tentang sutradara dari film kita harus membuat permintaan lain ke endpoint yang lain, contohURL.com/director/:id, ini akan memiliki nilai kembali nama director, usia, biografi, dan FilmID.

Dapat kita ketahui bahwa kita sudah membuat 2 request untuk menerima informasi - informasi tersebut, dan begitulah cara yang biasanya dilakukan sejauh ini. Kurang lebihnya cara kerja REST (Representation State Transfer) ialah sebagai berikut.

  • Kita membuat sebuah call dari klien ke server menggunakan request method.
  • HTTP GET adalah request untuk mengambil data, request POST dan PUT untuk mengubah data, dan DELETE adalah request untuk menghapus data. Request - request ini diproses oleh API server.
  • Kemudian data yang diminta dikirim kembali dari server melalui protokol HTTP dalam format JSON.

Untuk menunjukkan perbedaan antara REST dan GraphQL, dapat dilihat pada contoh sebagai berikut.

{
film(id: "1") {
judul
genre
reviews
director{
nama
bio
films{
judul
}
}
}
}

Pada contoh dapat kita lihat bahwa semua informasi yang kita butuhkan dapat didapatkan hanya dalam sebuah request saja.

Baiklah mari kita lanjutkan dengan membuat backend untuk project latihan kita ini. Sebelumnya install NodeJs terlebih dahulu bila komputer anda belum terinstall NodeJs. Installasi dapat di download di sini. 

Selanjutnya buatlah sebuah directory untuk project latihan ini, misalkan saja sama seperti yang saya buat yaitu sebuah directory dengan nama "graphql", lalu buat lagi sebuah directory di dalamnya dengan nama "intro". Kemudian jalankan command prompt ataupun terminal anda dan pindahkan deirectory aktif ke "intro". Bila sudah maka yang perlu dilakukan sekarang adalah menginstal node package management pada directory tersebut dengan mengetik perintah " npm install ". Pastikan pula anda memiliki koneksi internet aktif yang memadai.

Bila sudah, masih tetap pada directory "intro" dan lanjutkan dengan melakukan install untuk express.js dengan mengetik perintah " npm i express --save ". expressjs akan kita gunakan untuk membuat server kita.

Selanjutnya buatlah sebuah directory dengan nama "server" pada project latihan ini (intro). Pada directory ini (server), kita akan menempatkan semua backend code kita. Lalu pada diretory ini (server), buatlah sebuah file dengan nama "app.js". File app.js ini akan kita gunakan untuk set up server kita.

Selanjutnya, bila pada komputer anda belum terinstall nodemon, anda dapat menginstallnya terlebih dahulu. Masih tetap pada active directory pada directory intro, ketikan perintah "npm i nodemon -g" untuk menginstall nodemon secara global.

 Setting Up Express Server

Menuju ke text editor anda, bukalah file app.js yang tadi sudah kita buat dan tambahkan code sebagai berikut.

Anda dapat mencoba untuk running project ini dengan melakukan starting server dengan mengetik perintah " node server/app.js " pada command prompt ataupun terminal anda dengan directory active masih pada directory project ini (intro).

Bila sudah, hentikan dulu proses yang sedang berjalan pada terminal tadi, lalu install express-graphql dengan mengetik perintah " npm i express-graphql ". Package ini kita butuhkan agar graphql dan expressjs dapat berkerja bersama dengan baik.

Sekarang kita akan lanjutkan dengan membuat Schema. Schema adalah yang menjelaskan bagaimana data kita terstruktur, hubungan apa yang ada, tipe properti, dan lain - lain. Pada directory "server", tambahkan sebuah directory dengan nama "schemas", lalu pada directory schemas tambahkan file baru dengan nama "schemas.js". 

Kembali pada text editor anda, buka file schemas.js dan tambahkan code sebagai berikut.

Pada line nomor 2, terdapat sebuah deklarasi variable dengan requirement dari lodash package. Paket ini memberi kita beberapa fungsi yang membantu kita dengan banyak hal seperti iterasi melalui array. Package ini memberikan nilai kembali berupa objek yang cocok dengan id yang datang dari front - end.

Maka dari itu, kembali pada terminal dan install lodash dengan perintah " npm i lodash ".

Bila sudah, kembali ke text editor anda lalu buka file app.js kembali dan tambahkan beberapa code sehingga pada app.js akan berisi code seperti ini.

Selanjutnya, kembali pada terminal anda lagi, jalankan server dengan perintah "node server/app.js ", lalu pada browser anda ketik url " http://localhost:3000/graphql ".

Sampai disini anda dapat membuat query misalkan seperti berikut.

Klik tombol play diatas dan hasilnya akan seperti berikut.

Baiklah, sekian yang dapat saya sampaikan. Saya harap article ini dapat membantu anda dalam memulai untuk mempeljari GraphQL lebih jauh. Selebihnya, saya ucapkan terimakasih.