Forums
Getting Started with GraphQL - Printable Version

+- Forums (https://bb.nurfachmi.com)
+-- Forum: My Category (https://bb.nurfachmi.com/forum-1.html)
+--- Forum: My Forum (https://bb.nurfachmi.com/forum-2.html)
+--- Thread: Getting Started with GraphQL (/thread-16.html)

Getting Started with GraphQL - admin - 05-02-2026

Quote:Reza Nurfachmi, January 12, 2025

GraphQL adalah sebuah bahasa query untuk API dan sebuah runtime untuk memenuhi query tersebut dengan data yang sudah ada. GraphQL menyediakan deskripsi yang lengkap dan mudah dipahami tentang data dalam API Anda, memberikan kemampuan kepada klien untuk meminta hanya apa yang mereka butuhkan dan tidak lebih, memudahkan pengembangan API seiring waktu, serta memungkinkan penggunaan alat pengembang yang canggih.

Quote:[Image: graphql-logo.png]


Paragraf di atas hanyalah terjemahan bebas dari paragraf asli yang berbunyi sebagai berikut:

Quote:GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, gives clients the power to ask for exactly what they need and nothing more, makes it easier to evolve APIs over time, and enables powerful developer tools.

Kalau dalam bahasa yang lebih santai, mungkin seperti ini:

Quote:GraphQL itu semacam bahasa query buat API, plus runtime yang ngurusin gimana query-nya dipenuhi pake data yang udah ada. Intinya, GraphQL bikin kamu ngerti banget soal data yang ada di API kamu, dan klien bisa minta data yang mereka perlu aja—nggak lebih, nggak kurang. Ini juga ngebantu banget kalau kamu mau upgrade API pelan-pelan tanpa ribet, plus ada banyak tools keren buat developer yang bikin kerja jadi lebih gampang.

Sampai sini paham tentang GraphQL? Penulis harap sih belum ya, karena penulis belum menjelaskan apa-apa tentang GraphQL ini. Hehehe. Kalau sudah paham, mungkin kamu perlu baca artikel lain saja. Hehehe (lagi).

--

Untuk yang lebih sering berkutat dengan REST API, mungkin akan terasa bingung apa sih bedanya antara REST dan GraphQL?

Perbedaannya adalah GraphQL menggunakan query untuk meminta data, sedangkan REST tidak.

GraphQL menggunakan satu endpoint untuk meminta data (apapun), sedangkan REST tidak. REST butuh satu endpoint untuk mendapatkan data user, lalu butuh endpoint lain untuk mendapatkan data transaksi, dan sebagainya. GraphQL cukup satu endpoint, hanya saja querynya yang berbeda.

Mungkin kita cukupkan teorinya saat ini, untuk lebih lengkapnya bisa baca-baca di dokumentasi GraphQL-nya sendiri. Mari kita lanjut ke praktek.

---

Projek Baru

Untuk praktek kali ini, kita akan menggunakan JavaScript dengan NodeJS sebagai runtimenya.

Buat folder baru dengan nama graphql, lalu buat folder server dan client di dalamnya. Hasilnya kurang lebih seperti ini:
Code:
graphql (folder)
├── client (folder)
└── server (folder)

Lalu buat sebuah file server.js dan package.json di dalam folder server.

--

Isi dari package.json cukup seperti ini dulu:
Code:
{
  "name": "belajar-graphql",
  "private": true,
  "type": "module"
}


Apa artinya?

Artinya kita akan membuat sebuah projek baru dengan nama belajar-graphql. Lalu projeknya bersifat private, belum ada rencana untuk menempatkannya ke package manager seperti npmjs atau lainnya. Terakhir, kita akan memanfaatkan teknologi javascript terbaru, yakni JavaScript modules.

--

Lalu kita isi file server.js dengan kode sederhana berikut:

Code:
const typeDefs = `
  type Query {
    greeting: String
  }
`;

const resolvers = {
  Query: {
    greeting: () => 'Hello world!'
  },
}


Apa artinya?

Pada baris 1-5 kita mendeklarasikan sebuah variabel/konstanta dengan nama typeDefs yang isinya adalah sebuah SDL atau Schema Definition Language yang dapat dipanggil oleh klien/client.

Mengapa typeDefs? Karena ingin menyatakan bahwa di sini lah kita menuliskan seluruh type definitions dari query-nya.

type Query

Baris ini mendeklarasikan bahwa kita akan membuat daftar query yang dapat diakses oleh klien. Semua query yang ingin disediakan API didefinisikan di dalam type Query.

greeting: String

Baris ini menandakan bahwa kita memiliki sebuah field dengan nama greeting yang tipe datanya adalah String. Field ini harus memiliki resolver atau sebuah fungsi yang mengembalikan nilai saat field ini dipanggil dalam sebuah query.

Kemudian pada baris 7-11 disebut sebagai resolver yang dibungkus dalam variabel/konstanta dengan nama resolvers. Ini adalah sebuah objek JavaScript yang berisi implementasi fungsi untuk setiap field yang ada di dalam schema GraphQL.

Objek ini digunakan untuk “menghubungkan” field di schema (typeDefs) dengan logika yang menyediakan data untuk field tersebut.

Semua field di dalam Query harus memiliki resolver, kecuali jika data bisa diambil secara default (misalnya, dari field dalam objek yang sudah ada).

Adapun greeting: () => 'Hello world!' adalah resolver untuk field greeting yang didefinisikan di schema sebelumnya.

--

Contoh singkat jika ingin melakukan operasi asinkron pada resolver adalah sebagai berikut:

Code:
const resolvers = {
  Query: {
    greeting: async () => {
      try {
        // Memanggil API eksternal untuk mendapatkan pesan
        const response = await fetch("https://api.example.com/greeting");

        // Periksa jika respons gagal
        if (!response.ok) {
          throw new Error(`HTTP error! Status: ${response.status}`);
        }

        // Parse body respons ke JSON
        const data = await response.json();

        // Mengembalikan field `message` dari data
        return data.message;
      } catch (error) {
        console.error("Error fetching data from API:", error);
        throw new Error("Failed to fetch greeting from API.");
      }
    },
  },
};

Silahkan lanjut ke halaman selanjutnya jika sudah memahami seluruh penjelasan di atas, ya! Kalau ada pertanyaan, coba layangkan di kolom komentar. Pertanyaanmu, insyaallah, tidak akan pernah dengan sengaja tidak dijawab.

---

Thoyyib, sebelumnya kita sudah mendefinisikan query dan resolver-nya, lalu bagaimana cara menjalankan kode sebelumnya itu? Caranya ialah menggunakan server, sebagaimana projek kita saat ini sedang ditulis dalam folder, namanya, server.

Salah satu server yang populer untuk menjalankan GraphQL ialah Apollo. Mari kita install Apollo serta GraphQL-nya terlebih dahulu.

Silahkan buka terminal dengan lokasi di dalam folder server ini, dan jalankan perintah berikut:
Code:
npm install @apollo/server graphql

Maka, otomatis akan muncul file baru package-lock.json dan folder node_modules. Jika kita buka file package.json, seharusnya kodenya telah update menjadi seperti ini:

Code:
{
  "name": "belajar-graphql",
  "private": true,
  "type": "module",
  "dependencies": {
    "@apollo/server": "^4.11.3",
    "graphql": "^16.10.0"
  }
}

Jika instalasinya berhasil tanpa ada anu-anu, maka selanjutnya kita harus update file server.js-nya pula.

Kita butuh ApolloServer dan startStandaloneServer untuk menjalankan ini, maka kita tambahkan dua baris ini di awal file.

Code:
import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";

Lalu pada akhir file, tambahkan ini:

Code:
const server = new ApolloServer({ typeDefs, resolvers });
const { url } = await startStandaloneServer(server, { listen: { port: 9000 } });
console.log(`Server running at ${url}`);

Selengkapnya menjadi seperti ini:

Code:
import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";

const typeDefs = `
  type Query {
    greeting: String
  }
`;

const resolvers = {
  Query: {
    greeting: () => 'Hello world!'
  },
}

const server = new ApolloServer({ typeDefs, resolvers });
const { url } = await startStandaloneServer(server, { listen: { port: 9000 } });
console.log(`Server running at ${url}`);

Selanjutnya kita coba jalankan server ini dengan perintah:

Code:
node server.js
Quote:Server running at http://localhost:9000/

Demikian harusnya yang tercetak di terminal setelah menjalankan perintah sebelumnya. Jika tidak demikian, maka periksa kembali kode kamu ya.

Selanjutnya buka alamat tersebut di browser dan akan terbuka seperti ini:

[Image: image-7.png?resize=640%2C312&ssl=1]

Halaman di atas adalah halaman sandbox dari Apollo untuk kita dapat menuliskan query GraphQL, menjalankannya, serta melihat hasilnya.

Mari kita klik tombol dengan ikon play itu dan lihat apa yang terjadi.

---

Error dong? Iya, kan? Error?

[Image: image-9.png?resize=640%2C435&ssl=1]

Mengapa error?

Satu, kita tidak mendefinisikan type ExampleQuery, melainkan Query.

Dua, kita tidak memiliki field id, melainkan greeting.

So, mari ubah dua keyword tersebut dan jalankan lagi hasilnya.

[Image: image-10.png?resize=640%2C166&ssl=1]

Alhamdulillah muncul hasilnya.

Sekarang, mari kita coba kasus nyata sederhana.

---

Kita akan membuat kasus tentang Buku saja, sederhana.

Sesederhana kita membuat definisinya sebagai berikut:

Code:
type Buku {
  id: ID!
  judul: String!
  penulis: String!
  tahunTerbit: Int!
  genre: String
}

Nah lho, apa artinya tanda seru (!) di sana? Artinya kolom atau field tersebut harus disertakan saat klien memanggil atau server memberikan respons.

Terlihat di sana, selain field genre, seluruhnya wajib disertakan oleh client maupun server dalam request atau response-nya.

Selanjutnya kita buat Query-nya seperti ini:

Code:
type Query {
  semuaBuku: [Buku!]!
}

Maka jika diubah pada file server.js sebelumnya menjadi seperti ini:

Code:
const typeDefs = `
  type Buku {
    id: ID!
    judul: String!
    penulis: String!
    tahunTerbit: Int!
    genre: String
  }

  type Query {
    semuaBuku: [Buku!]!
  }
`;

Lalu kita ubah juga sisi resolver-nya menjadi begini:
Code:
let bukuDatabase = [
  { id: "1", judul: "Buku Satu", penulis: "Penulis A", tahunTerbit: 2024, genre: "Fiksi" },
  { id: "2", judul: "Buku Dua", penulis: "Penulis B", tahunTerbit: 2025, genre: "Non-Fiksi" },
];

const resolvers = {
  Query: {
    semuaBuku: () => bukuDatabase,
  },
};

Jika digabungkan, maka keseluruhan file server.js kali ini adalah sebagai berikut:
Code:
import { ApolloServer } from "@apollo/server";
import { startStandaloneServer } from "@apollo/server/standalone";

const typeDefs = `
  type Buku {
    id: ID!
    judul: String!
    penulis: String!
    tahunTerbit: Int!
    genre: String
  }

  type Query {
    semuaBuku: [Buku!]!
  }
`;

let bukuDatabase = [
  { id: "1", judul: "Buku Satu", penulis: "Penulis A", tahunTerbit: 2024, genre: "Fiksi" },
  { id: "2", judul: "Buku Dua", penulis: "Penulis B", tahunTerbit: 2025, genre: "Non-Fiksi" },
];

const resolvers = {
  Query: {
    semuaBuku: () => bukuDatabase,
  },
};

const server = new ApolloServer({ typeDefs, resolvers });
const { url } = await startStandaloneServer(server, { listen: { port: 9000 } });
console.log(`Server running at ${url}`);

Sekarang restart perintah node server.js di terminalnya dan refresh lagi halaman Apollo Servernya, lalu jalankan query berikut:
Code:
query  {
  semuaBuku {
    id
    judul
    penulis
    tahunTerbit
    genre
  }
}

Nah demikianlah Getting Started with GraphQL ini. Kalau diperhatikan, ini baru konsep “R” dalam “CRUD”. Juga kita baru sampai di folder server, belum ke folder client.

Apakah artikel ini harus dilanjutkan lagi? Jawab di kolom komentar ya!