Vote App (VoteMon) dengan GraphQL dan ReactJS Bagian 2

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.

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>

view raw index.html hosted with ❤ by GitHub

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:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
ReactDOM.render(
<App/>,
document.getElementById('root')
);

view raw index.js hosted with ❤ by GitHub

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.

import React, { Component } from 'react';
class App extends Component {
render() {
return (
<div>
<h1>Votemon App segera siap!</h1>
</div>
);
}
}
export default App;

view raw App.js hosted with ❤ by GitHub

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.

body {
margin: 0;
padding: 0;
font-family: sans-serif;
font-size: 15px;
line-height: 1.5;
color: #333;  
}
ul {
padding-left: 20px;
}
ul li {
list-style: none;
padding: 25px;
text-align: center;
}
ul li img {
width: 100%;
}
ul li span {
color: #999;
margin-right: 10px;
}
.container {
width: 320px;
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
}
.poke-vote {
width: 30%;
margin-left: auto;
margin-right: auto;
}
.poke-vote:hover {
cursor: pointer;
}
.poke-ball {
}

view raw style.css hosted with ❤ by GitHub

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.

import React, { Component } from 'react';
import ApolloClient, { createNetworkInterface } from 'apollo-client';
import { ApolloProvider } from 'react-apollo';
import PokemonList from './PokemonList';
class App extends Component {
constructor(...args) {
super(...args);
const networkInterface = createNetworkInterface('http://localhost:8080/graphql');
this.client = new ApolloClient({
networkInterface,
dataIdFromObject: r => r.id,
});
}
render() {
return (
<ApolloProvider client={this.client}>
<div className="container">
<PokemonList />
</div>
</ApolloProvider>
);
}
}
export default App;

view raw App.js hosted with ❤ by GitHub

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.

import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
import PokemonUpvoter from './PokemonUpvoter';
// The data prop, which is provided by the wrapper below contains,
// a `loading` key while the query is in flight and pokemons when it is ready
function PokemonList({ data: { loading, pokemons } }) {
if (loading) {
return <div>Loading</div>;
} else {
return (
<ul>
{pokemons.sort((x, y) => y.votes - x.votes).map(pokemon =>
<li key={pokemon.id}>
<img src={pokemon.image} alt={pokemon.name} />
{pokemon.name} Type: {' '}
{pokemon.type.title} {' '}
<span>({pokemon.votes} votes)</span>
<PokemonUpvoter pokemonId={pokemon.id} />
</li>
)}
</ul>
);
}
}
// The `graphql` wrapper executes a GraphQL query and makes the results
// available on the `data` prop of the wrapped component (PokemonList here)
export default graphql(gql`
  query allPokemons {
    pokemons {
      id
      name
      votes
      image
      type {
        id
        title
      }
    }
  }
`)(PokemonList);

view raw PokemonList.js hosted with ❤ by GitHub

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.

import React from 'react';
import gql from 'graphql-tag';
import { graphql } from 'react-apollo';
// A mutation is made available on a callback called `mutate`
// Other props of the wrapping component are passed through.
function PokemonUpvoter({ mutate, pokemonId }) {
return (
<div className='poke-vote' onClick={() => mutate({ variables: { pokemonId }})}>
<img src='http://i.imgur.com/ZmFD1Bq.png' className="poke-ball" alt='poke-ball'/>
</div>
)
}
// You can also use `graphql` for GraphQL mutations
export default graphql(gql`
  mutation upvotePokemon($pokemonId: Int!) {
    upvotePokemon(pokemonId: $pokemonId) {
      id
      votes
    }
  }
`)(PokemonUpvoter);

view raw PokemonUpvoter.js hosted with ❤ by GitHub

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

Live demo votemon-server

Live demo Votemon App

untuk source client di sini

https://www.codepolitan.com/vote-app-votemon-dengan-graphql-dan-reactjs-bagian-2-582083dd58846-20911

DariGarasi.com

Friday, February 3, 2017

Vote App (VoteMon) dengan GraphQL dan ReactJS Bagian 2

About DARI GARASI

No comments:

Category

Subscribe to Newsletter

Popular Posts

Labels

About Me

pengunjung

Followers

Services

	<!doctype html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>React App</title>
	</head>
	<body>
	<div id="root"></div>
	</body>
	</html>

	import React from 'react';
	import ReactDOM from 'react-dom';

	import App from './App';

	ReactDOM.render(
	<App/>,
	document.getElementById('root')
	);

	import React, { Component } from 'react';

	class App extends Component {
	render() {
	return (
	<div>
	<h1>Votemon App segera siap!</h1>
	</div>
	);
	}
	}

	export default App;

	body {
	margin: 0;
	padding: 0;
	font-family: sans-serif;
	font-size: 15px;
	line-height: 1.5;
	color: #333;
	}

	ul {
	padding-left: 20px;
	}

	ul li {
	list-style: none;
	padding: 25px;
	text-align: center;
	}

	ul li img {
	width: 100%;
	}

	ul li span {
	color: #999;
	margin-right: 10px;
	}

	.container {
	width: 320px;
	padding-right: 15px;
	padding-left: 15px;
	margin-right: auto;
	margin-left: auto;
	}

	.poke-vote {
	width: 30%;
	margin-left: auto;
	margin-right: auto;
	}

	.poke-vote:hover {
	cursor: pointer;
	}

	.poke-ball {
	}

	import React, { Component } from 'react';
	import ApolloClient, { createNetworkInterface } from 'apollo-client';
	import { ApolloProvider } from 'react-apollo';

	import PokemonList from './PokemonList';

	class App extends Component {
	constructor(...args) {
	super(...args);

	const networkInterface = createNetworkInterface('http://localhost:8080/graphql');
	this.client = new ApolloClient({
	networkInterface,
	dataIdFromObject: r => r.id,
	});
	}
	render() {
	return (
	<ApolloProvider client={this.client}>
	<div className="container">
	<PokemonList />
	</div>
	</ApolloProvider>
	);
	}
	}

	export default App;

	import React from 'react';
	import gql from 'graphql-tag';
	import { graphql } from 'react-apollo';

	import PokemonUpvoter from './PokemonUpvoter';

	// The data prop, which is provided by the wrapper below contains,
	// a `loading` key while the query is in flight and pokemons when it is ready
	function PokemonList({ data: { loading, pokemons } }) {
	if (loading) {
	return <div>Loading</div>;
	} else {
	return (
	<ul>
	{pokemons.sort((x, y) => y.votes - x.votes).map(pokemon =>
	<li key={pokemon.id}>
	<img src={pokemon.image} alt={pokemon.name} />
	{pokemon.name} Type: {' '}
	{pokemon.type.title} {' '}
	<span>({pokemon.votes} votes)</span>

	<PokemonUpvoter pokemonId={pokemon.id} />
	</li>
	)}
	</ul>
	);
	}
	}

	// The `graphql` wrapper executes a GraphQL query and makes the results
	// available on the `data` prop of the wrapped component (PokemonList here)
	export default graphql(gql`
	query allPokemons {
	pokemons {
	id
	name
	votes
	image
	type {
	id
	title
	}
	}
	}
	`)(PokemonList);