Vote App (VoteMon) dengan GaphQl dan ReactJS [Bagian 1]

Teman-teman codepolitan.com kayanya lagi rame-rame bahas React dan temen-temennya, bagi kamu yang ngikutin terus dunia javascript khususnya react, pasti pernah denger graphQl, jika belum kamu bisa buka graphql.org, dan bagi yang mau belajar langsung graphql silahkan ikuti panduannya disini learngraphql by khadira.

Kamu masih belum tahu reactjs? kayanya kamu kurang bergaul deh, rajin baca-baca codepolitan aja ya.

Iya, kita mulai sekarang.

Pertama kita mulai dengan graphQl server.

Aplikasi yang dibutuhkan:

• Nodejs, npm atau yarn
• text editor

Text diawali dengan tanda $ adalah perintah terminal.

Buka terminalmu,

$ mkdir votemon-server
$ touch server.js
$ yarn init

silahkan kamu atur nama aplikasinya, author dan repo kamu.

untuk nodejs framework kita akan menggunakan express, jadi silahkan install beberapa dependecies di bawah:

$ yarn add body-parser cors express lodash

kamu bisa mempelajari masing-masing package di atas sendiri, sekarang kita tambahkan dependecies graphql server.

$ yarn add graphql graphql-server-express graphql-subscriptions graphql-tools subscriptions-transport-ws

Aku juga belum begitu mengerti graphql subscriptions, silahkan kamu pelajari postingannya di Medium.

Sekarang kita tambahkan beberapa Development Dependencies, seperti babel, eslint dan nodemon.

$ yarn add babel-cli babel-core babel-eslint babel-plugin-inline-import babel-pol
yfill babel-preset-es2015 babel-preset-react babel-preset-stage-0 eslint eslint-config-airbnb e
slint-plugin-import eslint-plugin-react nodemon --dev

Akhiran --dev digunakan sebagai devDependencies di yarn, seperti -D kalau menggunakan npm, silahkan buka file package.json kamu. Di sana kamu  tambahkan elsint config setelah devDependencies

Kamu bisa melihat keseluruhan package.json di sini

buat file .babelrc, copy code di bawah

Sebenernya kita tidak akan menggunakan react di votemon-server, kita akan memisahkan client dan graphql servernya.

sekarang buka file server.js mu dengan text-editor lalu copy code berikut

 Code diatas adalah graphql server kita, jika kamu pernah menggunakan expressjs sebelumnya pasti cuma sedikit hal baru yang kamu liat, selain beberapa package yang sudah kita import coba perhatikan dua baris code ini:

import { subscriptionManager } from './data/subscriptions'; 
import schema from './data/schema';

Kita mengimport dua file subcriptions.js dan schema.js keduanya adalah inti dari graphql server kita. Gak familiar dengan codingan diatas? sudah belajar es6? bagi kamu yang belum menggunakan es6 silahkan pelajari di sini.

Buat folder di dalam directory votemon-server

$ mkdir data && cd data
$ touch schema.js subscriptions.js

lalu kamu copy masing-masing code di bawah:

Schemajs file:

 

Subscriptionsjs file

Subscription code di atas adalah default, tapi sebelum itu kamu bisa lihat file schema js, di sana kita mengimport file resolvers js. File ini digunakan untuk menghubungkan data baik itu dari database, json maupun REST API.

Buat file baru dalam folder data 

$ touch resolvers.js

dan copy code di bawah ini:

Uhuyy selesai juga graphql server kita, sebelum kita coba tambahkan scripts di file package.json kamu.

  "name": "votemon-server",
  "version": "0.1.0",
  "description": "graphql server votemon",
  "scripts": {
    "start": "nodemon ./server.js --exec babel-node",
    "test": "echo \"Error: no test specified\" && exit 1",
    "lint": "eslint ."
  },
  "main": "server.js",

sekarang ketika kita menggunakan perintah npm start di terminal, maka server graphql kita akan berjalan.

$ npm start

lalu buka link http://localhost:8080/graphiql di browser kamu, graphiql adalah web ui untuk query graphql kamu, untuk production kamu bisa menonaktifkannya.

 

graphql query votemon-server

 

Penasaran dengan Reactjs Appnya? Bersambung ke Vote App (VoteMon) dengan GaphQl dan ReactJS [Bagian 2]