Tutorial React GraphQL Untuk Pemula

React dan GraphQL adalah dua teknologi yang populer dalam pengembangan aplikasi web modern. React adalah library JavaScript yang digunakan untuk membangun antarmuka pengguna yang interaktif. Sementara GraphQL adalah bahasa query yang memungkinkan kita mengambil data dengan efisien dari server.

Dalam tutorial ini, kita akan mempelajari cara menggunakan React dan GraphQL bersama-sama untuk membangun aplikasi web yang kuat dan efisien.

Prasyarat:

Sebelum memulai tutorial ini, pastikan Anda memiliki pemahaman dasar tentang HTML, CSS, JavaScript, dan Node.js. Juga, pastikan Anda telah menginstal Node.js dan NPM (Node Package Manager) di komputer Anda.

Langkah 1: Membuat Proyek React

Buka terminal dan buatlah direktori baru untuk proyek Anda. Kemudian, masuk ke direktori tersebut melalui terminal dan jalankan perintah berikut untuk membuat proyek React:

npx create-react-app react-graphql-tutorial

Setelah proses selesai, masuk ke direktori proyek dengan perintah:

cd react-graphql-tutorial

Jalankan proyek dengan perintah berikut ini.

npm start

Setelah itu, halaman default React akan terbuka di browser Anda.

Langkah 2: Menginstal dan Mengonfigurasi GraphQL

Buka terminal baru dan pastikan Anda masih berada di direktori proyek. Kemudian, jalankan perintah berikut untuk menginstal package GraphQL.

npm install graphql

Buat direktori baru dengan nama “server” di dalam direktori proyek Anda. Di dalam direktori “server”, buat file baru dengan nama “schema.js” dan buatlah schema GraphQL di dalamnya. Contohnya:

const { buildSchema } = require('graphql');

const schema = buildSchema(`
  type Query {
    hello: String
  }
`);

module.exports = schema;

Buat file baru dengan nama “server.js” di direktori “server” dan tambahkan kode berikut untuk menginisialisasi server GraphQL:

const express = require('express');
const { graphqlHTTP } = require('express-graphql');
const schema = require('./schema');

const app = express();

app.use('/graphql', graphqlHTTP({
  schema: schema,
  graphiql: true
}));

app.listen(4000, () => {
  console.log('Server GraphQL berjalan di http://localhost:4000/graphql');
});

Selanjutnya, kembali ke terminal dan jalankan perintah berikut untuk menjalankan server GraphQL.

node server/server.js

Server GraphQL akan berjalan di http://localhost:4000/graphql.

Langkah 3: Menggunakan GraphQL di React

Buka kembali terminal di direktori proyek React. Jalankan perintah berikut untuk menginstal package GraphQL untuk React.

npm install @apollo/client

Buka file “src/index.js” dan tambahkan kode berikut untuk mengonfigurasi Apollo Client.

import { ApolloClient, InMemoryCache, ApolloProvider } from '@apollo/client';

const client = new ApolloClient({
  uri: 'http://localhost:4000/graphql',
  cache: new InMemoryCache()
});

ReactDOM.render(
  <ApolloProvider client={client}>
    <App />
  </ApolloProvider>,
  document.getElementById('root')
);

Buat file baru dengan nama “Hello.js” di direktori “src” dan tambahkan kode berikut untuk membuat komponen React:

import { useQuery, gql } from '@apollo/client';

const HELLO_QUERY = gql`
  query {
    hello
  }
`;

const Hello = () => {
  const { loading, error, data } = useQuery(HELLO_QUERY);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return <p>{data.hello}</p>;
};

export default Hello;

Buka file “src/App.js” dan ubah kode yang ada dengan kode berikut ini.

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <div className="App">
      <Hello />
    </div>
  );
}

export default App;

Jalankan perintah npm start di terminal untuk menjalankan proyek React. Lalu, buka browser dan akses http://localhost:3000.

Setelah itu, anda akan melihat teks “Loading…” yang kemudian akan digantikan dengan teks “Hello” setelah permintaan GraphQL selesai.

Penutup

Dalam tutorial ini, Anda telah mempelajari cara menggunakan React dan GraphQL bersama-sama untuk membangun aplikasi web. Anda telah membuat proyek React, menginstal dan mengonfigurasi GraphQL di server, dan menggunakan GraphQL di aplikasi React Anda.

Dengan menggunakan kombinasi ini, Anda dapat membangun aplikasi web yang efisien dan responsif. Selamat mencoba dan eksplorasi lebih lanjut fitur-fitur yang ditawarkan oleh React dan GraphQL!