Membuat Server GraphQL dengan Firestore + NodeJS + Clean Code Architecture (Bagian 4)

Ok gaes bagian 4 ini merupakan akhir tutorial kita. Sampai sini masih sanggup kan ? haha

Yo seperti biasa saya akan breakdown hal yang telah kita lakukan.

• Step 1 Membuat project firestore di firebase.
• Step 2 Menginisiasi project nodejs dan install dependencies.
• Step 3 Menerapkan clean code architecture pada NodeJS.
• Step 4 Review code & menguji GraphQL.(Yang akan kita lakukan sekarang).

Sekedar berbagi opini, setelah saya code GraphQL, berikut adalah beberapa keuntungan dan kelemahan dari menggunakan GraphQL.

Kelebihan :

• Dalam menjalankan GraphQL, kita tidak perlu membuat endpoint banyak sehingga kita bisa lebih menghemat waktu development.
• Jika frontend butuh suatu data, jika suatu backend menggunakan GraphQL. Maka backend tidak harus coding, karena frontend dapat mengambil data sesuai dengan kebutuhan.

Kekurangan :

• Performa GraphQL masih dibawah Restful. Untuk poin ini memang saya belum mengalami sendiri. Saya melihat dari forum-forum yang berkaitan dengan GraphQL.

Ok sebelum kita uji GraphQL yang telah kita buat, kita review code yang ada pada usecases/router.js.

Semua yang saya buat berasal dari dokumentasi graphQL.

GraphQL: A query language for APIs.

Ok kita bahas buildSchema terlebih dahulu,

Untuk benar-benar mengerti tentang konsep buildSchema. Baiknya teman-teman mengerti dulu tentang konsep Restful API agar lebih mudah dipahami. Type Query disini adalah untuk query data GraphQL.

• Pada todo(id: String): todo artinya fungsi ini mengambil data id yang diinput dan mengembalikan data todo berdasarkan id yang diinput (get specific item by id).
• Pada todos: [Todo] disini adalah fungsi yang mengembalikan / membaca semua todo list yang ada pada firestore.

Sekarang kita bahas type Mutation. Disini type Mutation dipergunakan sebagai pengganti POST atau DELETE jika pada restful.

• Pada addTodo(context: String) : fungsi disini untuk add sebuah todo yang akan di tambahkan ke firestore. Fungsi ini bisa diinterpretasikan sebagai POST method pada restful.
• Pada deleteTodo(id: String) : fungsi ini untuk menghapus todo list yang ada pada firestore berdasarkan id yang diinput. Fungsi ini bisa diinterpretasikan sebagai DELETE method pada restful.

Dan terakhir adalah class todo pada buildSchema. Class yang di define disini struktur datanya harus sama dengan yang ada pada models/todo.js .

Lalu kita bahas variabel root.

Dari pembahasan tadi jadi todo, todos, addTodo dan deleteTodo adalah data yang diambil dari layer usecase dan akan diisi ke dalam variabel masing”. Pada GraphQL, data sudah diambil terlebih dahulu berbeda dengan restful.

• todo akan mengembalikan objek todo. Pada kasus variabel todo berfungsi untuk menampung objek todo berdasarkan id yang diinput kita.
• todos akan mengembalikan list objek todo. Variabel todo akan diisi data yang todo yang berasal dari firestore.
• addTodo akan mengembalikan objek todo yang telah berhasil diinput ke firestore.
• deleteTodo akan mengembalikan hasil respon apakah kita berhasil hapus data.

Lalu untuk code diatas pada this.app.use() adalah pendefinisian endpoin. this.app.listen(4000,()) adalah nilai port yang akan kita jalankan server.

Ok teman-teman setelah di bagian 3 kita berhasil menjalankan server kita, dan output terminal harusnya seperti ini.

Express GraphQL Server Now Running On localhost:4000/graphql

Untuk menjalankan server, ketik perintah

$ node index.js

GraphQL Time! :

Setelah server berhasil dijalankan, buka browser teman-teman dan masukan localhost:4000/graphql dan hasilnya akan seperti ini.

Tampilan awal GraphQL

Untuk mengambil data semua todolist query nya.

Saya mau jelaskan keunggulah GraphQL. jika seandainya frontend hanya membutuhkan context maka querynya menjadi

Ini adalah keisitimewaan dari GraphQL. Ok lanjut untuk menambahkan data todos.

Query nya bisa teman-teman liat jadi mutation addtodo() yang telah kita buat di buildSchema dipergunakan saat ini untuk menambahkan data. Variabel masukan $text harus diisi di bagian query variables bagian bawah dan GraphQL mengembalikan id dan context dari todo yang tandanya add berhasil dilakukan.

Cek kembali kondisi data firestore.

Dan yeah, data yang baru sudah ada saat kita query untuk ambil data todos.

Lalu lanjut untuk menghapus suatu data kita mau hapus todo yang contextnya “beberes”. Kita ambil id dari todos tersebut dan syntax untuk delete data.

Lalu setelah kita cek kembali kondisi data firestore.

todo dengan context beberes berhasil dihapus.

Akhir tutorial

proyek ini bisa teman-teman akses di

farrellmochammad/gql-clean-code

Saya sadar disini masih banyak kekurangan tulisan yang saya buat. Untuk itu saya terbuka untuk diskusi dan menerima saran dan kritik.. Akhir kata terima kasih, dan bagi yang ingin bantuan untuk implementasi atau sekedar brainstorming email saya di farrellmochammad@gmail.com