Getting Started with GraphQL

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:

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:

{
  "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:

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:

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.