Getting Started with GraphQL

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:

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:

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

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

Lalu pada akhir file, tambahkan ini:

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

Selengkapnya menjadi seperti ini:

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:

node server.js

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:

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.