Vote App (VoteMon) dengan GraphQL dan ReactJS [Bagian 2]

Rahmat Aligos 13 November 2016

Ini adalah lanjutan artikel sebelumnya Vote App (VoteMon) dengan GaphQl dan ReactJS [Bagian 1], bagi yang belum mengenal reactjs silahkan mengunjungi docsnya di sini. Oh ya bagi kamu yang ingin mendownload source votemon-server di tutorial sebelumnya silahkan download di Votemon Server(graphql server)

Jika sudah mengikuti tutorial sebelumnya, mari kita mulai!.

$ mkdir votemon-client && cd votemon-client
$ yarn init

Supaya gampang pake Reactnya kita install react-scripts sama eslint untuk development, lebih gampangnya kamu bisa menggunakan generator Create React App.

$ yarn add babel-eslint eslint eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react react-scripts --dev

Sekarang buka package.json filenya dan tambahkan json config di bawah.

  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "eject": "react-scripts eject",
    "lint": "eslint ."
  },
  "eslintConfig": {
    "extends": "./node_modules/react-scripts/config/eslint.js"
  }

Eslint confignya sudah dibuatkan oleh package react-scripts.

Lalu kita install dependencies untuk graphql clientnya, kita menggunakan apolloclient dari apollostack, kamu juga bisa menggunakan alternatif lain seperti lokka.

$ yarn add apollo-client graphql graphql-tag graphql-tools lodash react react-apollo react-dom

Lihat package json di sini

Selanjutnya buat sebuah file index.html di dalam direktori votemon-client/public

$ mkdir public && cd public
$ touch index.html

Copy code di bawah ini.

Div tag dengan id root dalam tag body digunakan untuk merender react app kita. Sekarang kita akan mulai React Appnya, dalam folder votemon-client silahkan buat folder baru dengan nama folder src, jangan lupa sekalian buat dua file baru di dalamnya index.js dan App.js

$ mkdir src && cd src
$ touch index.js App.js

Buka file index.js dengan editormu, dan copy code berikut:

Index js ini akan merender react Application dari App.js ke index.html tadi, kamu bisa lihat react-dom dan react package sudah diimport. Begitu pula file App.js, nah sekarang kita buka file tersebut dan copykan code di bawah.

Dalam direktori votemon-client, silahkan jalankan applikasinya.

$ npm start

react-scripts akan membuka otomatis browser kamu, atau kamu bisa membukanya manual http://localhost:3000.

Lihat kamu sudah membuat sebuah react App.

votemon app akan segera siap.

Untuk menambahkan css dalam react sangat gampang sekali, kamu bisa menggunakan tag style atau menambahkan file css ke dalam react app tersebut. Buat file baru style.css dalam direktori src.

Copy css di bawah ini.

Jangan lupa mengimportnya dalam file index.js, setelah line import App

import App from './App';
import './style.css';

Selanjutnya kita edit file App.js sehingga menjadi seperti ini.

Pada line 11 sampai 14 terdapat module createNetworkInterface yang telah kita import dari dependencies Apollo client, di sana digunakan untuk menghubungkan endpoint graphql servermu dengan react appnya lalu dihubungkan dengan component Apollo Provider dari react-apollo, kamu bisa merubahnya sesuai link graphql servernya. Perhatikan juga line 21 ada sebuah component dengan nama PokomenList, yang sebelum nya telah kita import di line ke 5.

Sekarang kita buat file baru dengan nama PokemonList.js di direktori src lalu copy codenya.

Kita telah mengimport module graphql dari react-apollo dan juga graphql-tag, keduanya digunakan untuk melakukan query pada server graphql yang telah kita hubungkan dengan apollo-client di file App.js, lihat line 32.

Hasil querynya adalah data pokemons dan ketika proses query sedang berjalan adalah loading, kita masukan propnya pada function PokemonList pada line 9, pada line 10 kita melihat fungsi if else digunakan dalam merender component ketika loading dan ketika sudah mendapat data.

Pada line 15 kita menggunakan map untuk menampilkan array pokemons, dan juga sort untuk mengurutkannya sesuai nilai votes pokemon. votes adalah salah satu data dalam pokemons.

Kemudian dalam line 22 kita menambahkan component PokemonUpvoter yang sebelumnya diimport di line 5. Kita juga menambahkan prop pokemonId dengan nilai data id dalam pokemons.

Oke file terakhir, tambahkan file PokemonUpvoter.js di folder src dan copy code di bawah.

Kita kembali memakai gql dan graphql dari react-apollo, tapi kali ini digunakan untuk mutation dalam graphql ada query dan mutation(Untuk mengupdate/edit data). Lihat pada line 16 di sana lah mutation kita, kali ini dalam mengupdate votes data, mutation ini digunakan dalam prop function PokemonUpvoter line 7. Lebih lengkapnya tentang mutation menggunakan react-apollo kamu bisa pelajari di docsnya apollo.

Oke mari kita jalankan ulang applikasinya, dengan perintah npm start dan buka kembali link http://localhost:3000, sebelumnya jangan lupa jalankan votemon-servernya.

Dan taraaa