Bagikan melalui

GraphQL di Azure untuk pengembang JavaScript

GraphQL membantu aplikasi JavaScript Anda mengambil data yang mereka butuhkan dengan satu permintaan. Artikel ini menjelaskan apa itu GraphQL, mengapa Anda mungkin menggunakannya, dan bagaimana layanan Azure dapat membantu Anda membangun aplikasi GraphQL dengan upaya minimal. Baik Anda memigrasikan aplikasi GraphQL yang sudah ada atau membangun aplikasi baru, Azure menyediakan alat dan layanan untuk menyederhanakan proses.

Apa itu GraphQL?

GraphQL adalah cara modern bagi aplikasi web Anda untuk berbicara dengan server dan database. Anggap saja sebagai cara yang lebih cerdas untuk meminta informasi yang Anda butuhkan:

  • Ini seperti memesan makanan khusus alih-alih menerima menu tetap - Anda meminta dengan tepat apa yang Anda inginkan
  • Ini berfungsi dengan baik dengan aplikasi JavaScript seperti React, Vue, atau Angular
  • Ini dapat membuat aplikasi web Anda lebih cepat dan lebih mudah dibuat

Alih-alih membuat beberapa permintaan ke titik akhir server yang berbeda (seperti dengan REST API tradisional - cara standar sebagian besar layanan web berkomunikasi), GraphQL memungkinkan Anda membuat satu permintaan yang tepat untuk mendapatkan semua data yang Anda butuhkan.

Mengapa saya ingin menggunakan GraphQL di aplikasi web saya?

GraphQL membuat aplikasi JavaScript Anda lebih baik dengan tiga cara utama:

  • Dapatkan apa yang Anda butuhkan: Aplikasi Anda dapat meminta hanya data yang dibutuhkan saat ini - tidak lebih, tidak kurang. Ini seperti pergi ke prasmanan dan hanya mengambil apa yang akan Anda makan, alih-alih disajikan sepiring makanan besar yang sebagian besar terbuang. Ini membuat aplikasi Anda lebih cepat karena mengunduh lebih sedikit data.

  • Satu permintaan alih-alih banyak: Perlu informasi dari beberapa tempat? Alih-alih membuat 5 permintaan berbeda ke 5 titik akhir yang berbeda, GraphQL memungkinkan Anda membuat hanya satu permintaan untuk mendapatkan semuanya. Ini seperti memiliki satu orang mengumpulkan semua belanja Anda alih-alih Anda pergi ke lima toko yang berbeda.

  • Lebih sedikit kesalahan dengan alat yang lebih baik: GraphQL dilengkapi dengan alat yang membantu menangkap kesalahan saat Anda mengoding alih-alih saat aplikasi Anda berjalan. Ini seperti memiliki pemeriksaan ejaan yang berfungsi saat Anda mengetik, daripada menemukan kesalahan ketik setelah Anda menerbitkan dokumen Anda.

Saat membangun dengan GraphQL dan JavaScript, Anda mungkin akan menggunakan salah satu alat populer ini:

  • Klien Apollo: Klien GraphQL yang paling banyak digunakan yang bekerja dengan React, Vue, Angular, dan JavaScript biasa.
  • URQL: Alternatif ringan dengan performa yang baik.
  • Relay: Dibuat oleh Facebook (yang juga membuat GraphQL), yang terbaik untuk aplikasi React besar.

Layanan Azure untuk aplikasi GraphQL

Pilih pendekatan Anda berdasarkan skenario spesifik Anda:

Jika Anda ingin... Kemudian Anda harus ... Menggunakan layanan Azure ini
Membawa aplikasi GraphQL yang sudah ada ke Azure Menyebarkan aplikasi Anda tanpa mengubah kode Anda Azure App Service atau Azure Container Apps
Menambahkan GraphQL ke data Anda yang sudah ada Membuat titik akhir GraphQL untuk data Anda dengan pengkodian minimal Alat Pembuat API Data
Membangun lapisan API GraphQL Membuat antarmuka GraphQL terpadu melalui API yang ada Azure API Management dengan Transformasi GraphQL

Menghosting aplikasi GraphQL di Azure

Anda memiliki beberapa opsi yang baik tergantung pada jenis aplikasi apa yang Anda bangun:

  • App Service: Ini seperti layanan hosting web tradisional, tetapi dengan fitur tambahan. Ini bagus untuk sebagian besar aplikasi JavaScript yang membutuhkan server.

  • Container Apps: Jika aplikasi Anda dikemas dalam kontainer (seperti Docker), layanan ini membuatnya berjalan dan menskalakannya menjadi mudah.

Penyimpanan data untuk aplikasi GraphQL

GraphQL perlu menyambungkan ke data Anda. Azure menawarkan beberapa cara untuk melakukan ini:

  • Ubah database Anda menjadi API GraphQL: Alat "Penyusun API Data" dapat secara otomatis membuat titik akhir GraphQL (URL tempat aplikasi Anda dapat mengirim permintaan GraphQL) dari database yang ada - tidak diperlukan pengodean!

  • Simpan data Anda: Azure menawarkan database untuk berbagai kebutuhan:

    • SQL Database: Untuk data berbasis tabel tradisional
    • Cosmos DB: Untuk penyimpanan data yang fleksibel dan dapat diskalakan tanpa skema yang kaku

Mengamankan aplikasi GraphQL

  • Login dan keamanan pengguna: Platform Identitas Azure membantu Anda menambahkan fitur masuk ke aplikasi Anda sehingga hanya orang yang tepat yang dapat mengakses data GraphQL Anda.
  • Akses berbasis peran: Kontrol dengan tepat pengguna mana yang dapat mengkueri atau memodifikasi data apa melalui titik akhir GraphQL Anda.
  • Perlindungan API: Tambahkan pembatasan dan pemantauan laju untuk mencegah penyalahgunaan API GraphQL Anda.

Membuat API GraphQL untuk data Anda yang sudah ada

Sudah memiliki data di Azure dan ingin mengaksesnya dengan GraphQL? Ada cara sederhana untuk melakukan ini:

  • API Management: Layanan ini dapat membuat lapisan GraphQL di depan API atau sumber data yang ada. Ini seperti menambahkan penerjemah GraphQL ke sistem yang tidak berbicara GraphQL secara asli.

  • Data API Builder: Alat ini secara otomatis membuat titik akhir GraphQL dari database Anda. Ini adalah cara tercepat untuk menambahkan GraphQL ke data yang ada - cukup arahkan ke database Anda dan itu melakukan pekerjaan untuk Anda.

Contoh sederhana: Membuat API GraphQL untuk database produk

Berikut cara kerja prosesnya dalam istilah sederhana:

  1. Anda memiliki database dengan informasi produk (nama, harga, deskripsi)
  2. Anda menyiapkan Data API Builder untuk menyambungkan ke database Anda
  3. Data API Builder membuat titik akhir GraphQL secara otomatis
  4. Aplikasi JavaScript Anda sekarang dapat membuat kueri GraphQL seperti:
{
  products(where: { price_lt: 50 }) {
    name
    price
    description
  }
}

Kueri ini akan menunjukkan kepada Anda semua produk di bawah $50, menampilkan nama, harga, dan deskripsinya saja.

Sumber daya untuk membantu Anda memulai

Jika Anda ingin mempelajari lebih lanjut atau mulai membangun dengan GraphQL di Azure, berikut adalah beberapa sumber daya yang bermanfaat:

Langkah selanjutnya