Cara Membuat Server API GraphQL dengan Apollo Server

Pernahkah Anda bertanya-tanya bagaimana cara membuat API yang kuat yang memungkinkan klien meminta persis apa yang mereka butuhkan? Itulah keajaiban GraphQL, dan dengan Apollo Server, membangunnya lebih sederhana dari yang Anda kira! Jika Anda bosan dengan *endpoint* REST yang kaku, GraphQL menawarkan fleksibilitas, dan Apollo Server adalah alat utama untuk mewujudkannya. Dalam tutorial bergaya percakapan ini, kita akan membahas pengaturan server GraphQL menggunakan Apollo Server, mulai dari inisialisasi proyek hingga pengujian *query* dan *mutation*. Baik Anda menggunakan JavaScript atau TypeScript, Anda akan memiliki server yang berjalan dalam waktu singkat. Mari kita selami dan bangun sesuatu yang luar biasa dengan GraphQL dan Apollo Server!

💡

Ingin alat Pengujian API hebat yang menghasilkan Dokumentasi API yang indah?

Ingin platform Terintegrasi, All-in-One agar Tim Pengembang Anda dapat bekerja sama dengan produktivitas maksimal?

Apidog memenuhi semua permintaan Anda, dan menggantikan Postman dengan harga yang jauh lebih terjangkau!

tombol

Mengapa Memilih GraphQL dan Apollo Server?

Sebelum kita mulai bekerja, mari kita bahas mengapa GraphQL dan Apollo Server adalah duo yang sangat dinamis. GraphQL, dikembangkan oleh Facebook pada tahun 2012 dan dirilis sebagai *open-source* pada tahun 2015, adalah bahasa *query* untuk API yang memungkinkan klien meminta data spesifik, mengurangi *over-fetching* dan *under-fetching* yang umum terjadi pada REST API. Alih-alih memiliki banyak *endpoint*, Anda memiliki satu *endpoint* cerdas yang menyajikan respons yang disesuaikan. Ini efisien, fleksibel, dan sempurna untuk aplikasi modern dengan kebutuhan data yang kompleks.

Hadirnya Apollo Server, server GraphQL *open-source* yang digerakkan oleh komunitas dari Apollo GraphQL. Ini siap produksi, mendukung Node.js, dan terintegrasi dengan mulus dengan basis data seperti MongoDB atau PostgreSQL. Dengan fitur-fitur seperti *schema stitching*, *caching*, dan *real-time subscriptions*, ini adalah solusi lengkap untuk membangun API yang skalabel. Ditambah lagi, ini ramah pemula namun kuat untuk para profesional. Dibandingkan dengan alternatif seperti Express-GraphQL, Apollo Server menawarkan pemantauan kinerja yang lebih baik dan pengaturan yang lebih mudah. Jika Anda membangun blog, situs *e-commerce*, atau *backend* seluler, kombinasi ini akan menghemat waktu dan kerumitan. Bersemangat? Mari kita siapkan proyek kita!

Menyiapkan Proyek Anda di JavaScript atau TypeScript

Mari kita mulai dengan membuat fondasinya. Kita akan menyiapkan proyek Node.js dan menginstal paket-paket yang diperlukan. Anda dapat memilih JavaScript untuk kesederhanaan atau TypeScript untuk keamanan tipe—keduanya bekerja dengan baik dengan Apollo Server.

Langkah 1: Inisialisasi Proyek

Buka terminal Anda dan buat direktori proyek:

mkdir graphql-apollo-server
cd graphql-apollo-server

Inisialisasi Node.js:

Jalankan perintah berikut:

npm init -y
npm pkg set type="module"

Ini membuat file package.json untuk mengelola dependensi dan menyiapkan proyek menggunakan Modul ES.

Langkah 2: Instal Dependensi

Apollo Server membutuhkan dua paket utama: @apollo/server untuk server dan graphql untuk pustaka inti GraphQL. Untuk TypeScript, kita akan menambahkan tipe dan langkah *build*.

Instal dependensi:

npm install @apollo/server graphql

Untuk JavaScript:

Cukup ganti entri scripts default di file package.json Anda dengan entri type dan scripts ini:

{
	// ...dll.
	"type": "module",
    "scripts": {
    	"start": "node index.js"
    }
    // dependensi lainnya
}

Untuk TypeScript (Direkomendasikan):

1. Inisialisasi TypeScript:

npm install --save-dev typescript @types/node

Buat file tsconfig.json di direktori root Anda dan edit untuk menyertakan:

{
  "compilerOptions": {
    "rootDirs": ["src"],
    "outDir": "dist",
    "lib": ["es2023"],
    "target": "es2023",
    "module": "esnext",
    "moduleResolution": "node",
    "esModuleInterop": true,
    "types": ["node"]
  }
}

2. Terakhir, ganti entri scripts di file package.json Anda dengan entri type dan scripts berikut:

{
	// ...dll.
    "type": "module",
    "scripts": {
    	"compile": "tsc",
    	"start": "npm run compile && node ./dist/index.js"
    }
	// dependensi lainnya
}

Tips Pro: Jika Anda baru mengenal TypeScript, ia menambahkan keamanan tipe ke skema dan *resolver* Anda, menangkap kesalahan lebih awal. JavaScript lebih cepat untuk prototipe—pilih berdasarkan skala proyek Anda.

Langkah 3: Buat File Server

Buat folder src di root proyek Anda dan tambahkan file index.ts (atau index.js untuk JavaScript) di folder baru tersebut. Di sinilah kita akan mendefinisikan skema dan *resolver*.

Menguji Query Sederhana

Mari kita bangun *query* pertama kita—pesan "hello" sederhana. Ini memperkenalkan definisi tipe (skema) GraphQL dan *resolver* (fungsi yang mengambil data).

Mendefinisikan Skema GraphQL

Skema adalah cetak biru API Anda. Gunakan tag gql dari graphql-tag (termasuk dalam @apollo/server) untuk mendefinisikannya.

Di index.ts (atau index.js):

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


// Definisikan skema GraphQL
const typeDefs = `
  type Query {
    hello: String
  }
`;

// Definisikan resolver
const resolvers = {
  Query: {
    hello: () => "Hello! Welcome to my server",
  },
};

// Buat dan mulai server
const server = new ApolloServer({ typeDefs, resolvers });

const { url } = await startStandaloneServer(server, {
  listen: { port: 4000 },
});

console.log(`🚀  Server siap di: ${url}`);

Untuk JavaScript, impor tipe:

const { ApolloServer } } = '@apollo/server';
const { startStandaloneServer } = '@apollo/server/standalone';

// Sisanya sama

Jalankan Server

Mulai server Anda:

node index.js  # Untuk JavaScript
npm start  # Untuk TypeScript

Kunjungi http://localhost:4000 di browser Anda. Anda akan melihat GraphQL Playground—IDE berbasis web untuk menguji *query*.

Uji Query

Di Playground, jalankan *query* ini di panel kiri:

query {
  hello
}

Klik "Execute." Di sebelah kanan, Anda akan melihat:

{
  "data": {
    "hello": "Hello! Welcome to my server"
  }
}

Berhasil! *Query* sederhana ini menunjukkan dasar-dasar GraphQL: tipe Query dengan bidang hello yang mengembalikan string. *Resolver* adalah "otak" yang menyediakan data—dalam kasus ini, pesan statis. Ini adalah titik awal yang bagus untuk memverifikasi pengaturan Anda.

Menguji Query dengan Tipe Kompleks

Sekarang, mari kita tambahkan kedalaman dengan tipe kustom. Kita akan membuat tipe Book dan *query* untuk mengambil daftar buku. Ini menunjukkan bagaimana GraphQL menangani data terstruktur.

Perbarui Skema

Modifikasi typeDefs untuk menyertakan tipe Book:

const typeDefs = gql`
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }
`;

Tambahkan Contoh Data

Di bawah typeDefs, tambahkan contoh data berikut untuk tipe Book baru kita:

// Contoh data
const books = [
  {
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

Perbarui Resolver

Ganti konten *resolver* dengan yang berikut untuk tipe books:

const resolvers = {
  Query: {
    books: () => books
  }
};

Mulai ulang server dan kembali ke Playground.

Uji Query

Jalankan:

query GetBooks {
  books {
    title
    author
  }
}

Hasil:

{
  "data": {
    "books": [
      {
        "title": "The Awakening",
        "author": "Kate Chopin"
      },
      {
        "title": "City of Glass",
        "author": "Paul Auster"
      }
    ]
  }
}

Keren, bukan? *Query* ini mengambil array objek Book. GraphQL memungkinkan klien menentukan persis bidang apa yang mereka inginkan—tidak lebih, tidak kurang. Jika Anda menghilangkan author, itu hanya mengembalikan judul. Fleksibilitas ini adalah mengapa GraphQL mengalahkan REST untuk aplikasi yang banyak data.

Menguji Mutation untuk Menambahkan Data

*Query* adalah untuk membaca, tetapi *mutation* adalah untuk menulis. Mari kita tambahkan *mutation* untuk membuat buku baru, menunjukkan bagaimana GraphQL menangani pembuatan data.

Perbarui Skema

Tambahkan tipe Mutation:

const typeDefs = `
  type Book {
    title: String
    author: String
  }

  type Query {
    books: [Book]
  }

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

Tanda ! berarti bidang wajib.

Perbarui Resolver

const resolvers = {
  Query: {
    books: () => books,
  },
  Mutation: {
    createBook: (_: any, { title, author }: { title: string; author: string }) => {
      const newBook = { title, author };
      books.push(newBook);
      return newBook;
    }
  }
};

Uji Mutation

Di Playground, jalankan:

mutation CreateBook{
  createBook(title: "Harry Potter", author: "J.K Rowling") {
    author
    title
  }
}

Hasil:

{
  "data": {
    "createBook": {
      "title": "Harry Potter",
      "author": "J.K Rowling"
    }
  }
}

Untuk mengonfirmasi, jalankan ulang *query* GetBooks:

query GetBooks {
  books {
    title
    author
  }
}

Hasil:

{
  "data": {
    "books": [
      {
        "title": "The Awakening",
        "author": "Kate Chopin"
      },
      {
        "title": "City of Glass",
        "author": "Paul Auster"
      },
      {
        "title": "Harry Potter",
        "author": "J.K Rowling"
      }
    ]
  }
}

Buku baru telah ditambahkan! *Mutation* mengembalikan data yang dibuat, memungkinkan klien mendapatkan umpan balik langsung. Dalam produksi, sambungkan ke DB seperti MongoDB untuk persistensi.

JavaScript vs TypeScript: Mana yang Dipilih? Untuk prototipe cepat, JavaScript baik-baik saja—lebih sedikit *boilerplate*. Tetapi untuk proyek yang lebih besar, TypeScript unggul dengan keamanan tipe untuk skema dan *resolver*. TS menangkap kesalahan lebih awal, membuat server GraphQL Anda lebih kuat.

Menambah Kompleksitas: ID dan Query dengan Argumen

Untuk membuatnya nyata, tambahkan ID ke buku dan *query* untuk mengambil berdasarkan judul.

Perbarui skema:

const typeDefs = `
    type Book {
      id: ID!
      title: String
      author: String
    }

    type Query {
      books: [Book]
      book(title: String!): Book
    }

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

Perbarui data dan *resolver*:

// Contoh data
const books = [
  {
    id: 1,
    title: 'The Awakening',
    author: 'Kate Chopin',
  },
  {
    id: 2,
    title: 'City of Glass',
    author: 'Paul Auster',
  },
];

// Resolver
const resolvers = {
  Query: {
    books: () => books,
    book: (_: any, { title }: { title: string }) => books.find(book => book.title === title),
  },
  Mutation: {
    createBook: (_: any, { title, author }: { title: string; author: string }) => {
      const newBook = { id: books.length + 1, title, author };
      books.push(newBook);
      return newBook;
    }
  }
};

Uji *query*:

query GetBook {
  book(title: "The Awakening") {
    id
    title
    author
  }
}

Hasil:

{
  "data": {
    "book": {
      "id": "1",
      "title": "The Awakening",
      "author": "Kate Chopin"
    }
  }
}

Ini menunjukkan argumen dalam *query*, memungkinkan klien memfilter data secara efisien.

Praktik Terbaik untuk GraphQL dengan Apollo Server

Desain Skema: Pertahankan modularitas dengan beberapa file.
Penanganan Error: Gunakan ApolloError untuk *error* kustom.
Kinerja: Aktifkan *caching* dengan @apollo/cache-control.
Subscription: Tambahkan *real-time* dengan apollo-server-express.
Pemantauan: Gunakan Apollo Studio untuk metrik.

Memecahkan Masalah Umum

Server Tidak Mau Start? Periksa versi Node (14+) dan dependensi.
Error Query? Verifikasi kesesuaian skema/resolver.
Masalah CORS? Tambahkan { cors: { origin: '*' } } ke opsi server.
Error TS? Instal @types/graphql dan @types/node.

Kesimpulan

Kita telah membangun server GraphQL yang tangguh dengan Apollo Server, mulai dari *query* "hello" hingga *mutation*. Baik dalam JS atau TS, Anda siap untuk membuat API yang fleksibel. Bereksperimenlah, tambahkan *subscription*, dan *deploy* ke Heroku. GraphQL dan Apollo Server adalah tiket Anda menuju API yang efisien!

Apidog juga mendukung pengujian dengan GraphQL, jadi pastikan untuk mencobanya secara GRATIS!

tombol