Daftar Isi

1. Pengantar GraphQL
2. Persiapan Environment
3. Membuat Server GraphQL dengan Node.js
4. Membuat Client React dengan Apollo Client
5. Integrasi Full-Stack GraphQL
6. Source Code dan Channel Pembelajaran Lainnya

1. Pengantar GraphQL

GraphQL adalah sebuah query language untuk API dan runtime untuk mengeksekusi query tersebut dengan data yang sudah Anda definisikan. GraphQL dikembangkan oleh Facebook dan dirilis secara open source pada tahun 2015. GraphQL memungkinkan client untuk meminta data secara spesifik dan mengurangi over-fetching atau under-fetching data.

Keunggulan GraphQL

• Client dapat menentukan data apa saja yang dibutuhkan.
• Mengurangi jumlah request ke server.
• Dokumentasi API otomatis dengan GraphiQL atau Playground.
• Strongly typed schema yang memudahkan pengembangan.

Dengan GraphQL, Anda dapat membangun aplikasi full-stack JavaScript yang efisien dan mudah dikembangkan.

2. Persiapan Environment

Sebelum mulai membuat aplikasi GraphQL full-stack, pastikan Anda sudah menyiapkan environment berikut:

• Node.js versi terbaru (disarankan v16 ke atas)
• npm atau yarn sebagai package manager
• Editor kode seperti VSCode
• Browser modern untuk testing client

Instalasi Node.js dan npm

Anda dapat mengunduh Node.js dari https://nodejs.org . Setelah instalasi, cek versi dengan perintah:

node -v
npm -v

Membuat folder project

Buat folder project dan masuk ke dalamnya:

mkdir master-graphql-app
cd master-graphql-app

Selanjutnya kita akan mulai membuat server GraphQL.

3. Membuat Server GraphQL dengan Node.js

Kita akan menggunakan Express dan Apollo Server untuk membuat server GraphQL.

Langkah 1: Inisialisasi project dan instalasi dependencies

npm init -y
npm install express apollo-server-express graphql

Langkah 2: Buat file server.js

import express from 'express';
import { ApolloServer, gql } from 'apollo-server-express';

const typeDefs = gql\`
  type Query {
    hello: String
  }
\`;

const resolvers = {
  Query: {
    hello: () => 'Halo dari GraphQL Server!',
  },
};

async function startServer() {
  const app = express();
  const server = new ApolloServer({ typeDefs, resolvers });
  await server.start();
  server.applyMiddleware({ app });

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

startServer();
      

Jalankan server dengan perintah:

node --experimental-modules server.js

Buka http://localhost:4000/graphql untuk mencoba query:

query {
  hello
}
      

Anda akan mendapatkan response:

{
  "data": {
    "hello": "Halo dari GraphQL Server!"
  }
}
      

4. Membuat Client React dengan Apollo Client

Sekarang kita buat client React yang akan mengkonsumsi API GraphQL yang sudah dibuat.

Langkah 1: Buat project React

npx create-react-app client
cd client

Langkah 2: Instal Apollo Client dan GraphQL

npm install @apollo/client graphql

Langkah 3: Buat file src/App.js dengan kode berikut:

import React from 'react';
import { ApolloClient, InMemoryCache, ApolloProvider, useQuery, gql } from '@apollo/client';

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

const HELLO_QUERY = gql\`
  query GetHello {
    hello
  }
\`;

function 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>;
}

function App() {
  return (
    <ApolloProvider client={client}>
      <div className="max-w-xl mx-auto mt-20 p-6 bg-white rounded-lg shadow-lg text-center">
        <h1 className="text-2xl font-bold mb-4 text-indigo-700">Client React dengan Apollo</h1>
        <Hello />
      </div>
    </ApolloProvider>
  );
}

export default App;
      

Jalankan client React dengan:

npm start

Client akan menampilkan pesan dari server GraphQL.

5. Integrasi Full-Stack GraphQL

Setelah server dan client berjalan, kita bisa mengembangkan aplikasi full-stack dengan fitur lebih kompleks.

Contoh: Menambahkan Data Buku

Kita akan menambahkan schema dan resolver untuk mengelola data buku sederhana.

// Update typeDefs di server.js
const typeDefs = gql\`
  type Book {
    id: ID!
    title: String!
    author: String!
  }

  type Query {
    books: [Book]
  }

  type Mutation {
    addBook(title: String!, author: String!): Book
  }
\`;

// Data dummy
const books = [
  { id: '1', title: 'Belajar GraphQL', author: 'Andi' },
  { id: '2', title: 'React untuk Pemula', author: 'Budi' },
];

// Update resolvers
const resolvers = {
  Query: {
    books: () => books,
  },
  Mutation: {
    addBook: (_, { title, author }) => {
      const newBook = { id: String(books.length + 1), title, author };
      books.push(newBook);
      return newBook;
    },
  },
};
      

Pada client React, kita bisa menambahkan query dan mutation untuk menampilkan dan menambah buku.

import React, { useState } from 'react';
import { useQuery, useMutation, gql } from '@apollo/client';

const GET_BOOKS = gql\`
  query GetBooks {
    books {
      id
      title
      author
    }
  }
\`;

const ADD_BOOK = gql\`
  mutation AddBook($title: String!, $author: String!) {
    addBook(title: $title, author: $author) {
      id
      title
      author
    }
  }
\`;

function Books() {
  const { loading, error, data } = useQuery(GET_BOOKS);
  const [addBook] = useMutation(ADD_BOOK, {
    refetchQueries: [{ query: GET_BOOKS }],
  });

  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');

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

  const handleSubmit = e => {
    e.preventDefault();
    if (!title || !author) return;
    addBook({ variables: { title, author } });
    setTitle('');
    setAuthor('');
  };

  return (
    <div>
      <h2 className="text-xl font-semibold mb-4">Daftar Buku</h2>
      <ul className="mb-6 list-disc list-inside">
        {data.books.map(book => (
          <li key={book.id}>{book.title} - {book.author}</li>
        ))}
      </ul>
      <form onSubmit={handleSubmit} className="space-y-4">
        <input
          type="text"
          placeholder="Judul Buku"
          value={title}
          onChange={e => setTitle(e.target.value)}
          className="border border-gray-300 rounded px-3 py-2 w-full"
        />
        <input
          type="text"
          placeholder="Penulis"
          value={author}
          onChange={e => setAuthor(e.target.value)}
          className="border border-gray-300 rounded px-3 py-2 w-full"
        />
        <button
          type="submit"
          className="bg-indigo-600 text-white px-4 py-2 rounded hover:bg-indigo-700"
        >Tambah Buku</button>
      </form>
    </div>
  );
}

export default Books;
      

Dengan cara ini, Anda dapat membangun aplikasi full-stack yang interaktif dan dinamis menggunakan GraphQL dan JavaScript.

6. Source Code dan Channel Pembelajaran Lainnya

Berikut beberapa sumber dan channel yang dapat Anda gunakan untuk memperdalam pembelajaran GraphQL dan full-stack JavaScript:

• Apollo Fullstack Tutorial (GitHub) - Tutorial lengkap dari Apollo untuk membangun aplikasi full-stack.
• How to GraphQL - Situs tutorial interaktif GraphQL dari dasar hingga advanced.
• Academind (YouTube) - Channel YouTube dengan tutorial React, GraphQL, dan full-stack development.
• The Net Ninja (YouTube) - Channel YouTube populer dengan playlist GraphQL dan React.
• Dokumentasi Resmi GraphQL - Dokumentasi resmi dan referensi lengkap GraphQL.

Source Code Lengkap

Anda dapat mengunduh source code lengkap dari tutorial ini di: