Tutorial GraphQL untuk Pemula: Apa itu, Fitur & Contoh

Apa itu GraphQL?

GraphQL adalah teknologi sisi server lapisan aplikasi yang dikembangkan oleh Facebook untuk mengeksekusi kueri dengan data yang ada. GraphQL dapat mengoptimalkan panggilan RESTful API. Ini memberikan cara deklaratif untuk mengambil dan memperbarui data Anda. GraphQL membantu Anda memuat data dari server ke klien. Hal ini memungkinkan pemrogram untuk memilih jenis permintaan yang ingin mereka buat.

Mengapa menggunakan GraphQL?

Berikut adalah alasan menggunakan GraphQL:

Ini memberikan kueri yang dapat dibaca manusia.
Di GraphQL, sangat mudah untuk menangani banyak database.
Cocok untuk layanan mikro dan sistem yang kompleks.
Anda dapat mengambil data dengan satu panggilan API.
Ini membantu Anda dengan pengelompokan kueri dan cache.
Anda tidak menghadapi masalah pengambilan berlebihan dan kekurangan.
Menyesuaikan permintaan dengan kebutuhan Anda.
Ini membantu Anda menemukan skema dalam format yang sesuai.
GraphQL secara otomatis menjaga dokumentasi tetap sinkron dengan perubahan API.
Evolusi API dimungkinkan tanpa pembuatan versi.
Bidang GraphQL digunakan dalam beberapa kueri yang dapat dibagikan ke tingkat komponen yang lebih tinggi untuk digunakan kembali.
Anda dapat memilih fungsi mana yang akan diekspos dan cara kerjanya.
Ini dapat digunakan untuk pembuatan prototipe aplikasi cepat.

Penerapan GraphQL

Berikut adalah aplikasi penting dari GraphQL:

Ini menyediakan Relay dan kerangka klien lainnya
GraphQL membantu Anda meningkatkan kinerja aplikasi seluler.
Hal ini dapat mengurangi masalah pengambilan berlebihan untuk menurunkan layanan cloud sisi server dan mengurangi penggunaan jaringan sisi klien.
Ini dapat digunakan ketika aplikasi klien harus menentukan bidang mana yang diperlukan dalam format kueri panjang.
GraphQL dapat dimanfaatkan sepenuhnya ketika Anda harus menambahkan fungsionalitas ke API lama atau yang sudah ada.
Ini digunakan ketika Anda harus menyederhanakan API yang rumit.
Campur dan hancurkan pola fasad, yang biasa digunakan dalam pemrograman berorientasi objek.
Saat Anda harus menggabungkan data dari lebih dari satu tempat ke dalam satu API yang mudah digunakan.
Anda dapat menggunakan GraphQL sebagai abstraksi pada API yang ada untuk menentukan struktur respons berdasarkan kebutuhan pengguna.

Apa yang perlu Anda pelajari sebelum mempelajari GraphQl?

Tutorial GraphQL ini didasarkan pada Mengekspresikan dan NodeJs. Oleh karena itu, Anda dapat mempelajari GraphQL dengan sangat mudah dengan pemahaman dasar tentang NodeJS.

Komponen Utama GraphQL

Sekarang dalam tutorial GraphQL ini, mari pelajari komponen utama GraphQL:

Seperti yang ditunjukkan pada gambar di atas, ada tiga komponen utama GraphQL: 1) Query, 2) Resolver, dan 3) Skema.

Pertanyaan

Query adalah permintaan API yang dibuat oleh aplikasi mesin klien. Ini mendukung penambahan dan menunjuk ke array. Kueri digunakan untuk membaca atau mengambil nilai.

Bagian dari Kueri:

Berikut adalah bagian-bagian penting dari Query

Bidang:

Kolom hanya menunjukkan bahwa kita meminta informasi tertentu kepada server. Berikut ini adalah contoh GraphQL dari kolom dalam query graphQL.

query {
    team {
        id name
    }
}

"data": {
    "team":[ {
        "id": 1, 
        "name": "Avengers"
    }
    ,
    …
]
}
}

Dalam contoh GraphQL di atas, kami meminta server untuk bidang yang disebut tim dan subbidangnya seperti id dan nama. Server GraphQL mengembalikan data yang kami minta.

kasus

In ISTIRAHAT, kita hanya dapat meneruskan satu set argumen sebagai segmen URL dan parameter kueri. Untuk mendapatkan profil tertentu, panggilan REST yang umum akan terlihat seperti berikut:

GET /api'team?id=2 Content-Type: application JSON
 {
    "id": 2, 
    "name": "Justice League."
}

Memecahkan

Resolver memberikan arahan untuk mengubah operasi GraphQL menjadi data. Mereka menyelesaikan kueri ke data dengan mendefinisikan fungsi penyelesai.

Ini menampilkan server proses serta lokasi untuk mengambil data sesuai dengan bidang tertentu. Resolver juga memisahkan skema database dan skema API. Informasi yang dipisahkan membantu mengubah konten yang diperoleh dari database.

Skema

Skema GraphQL adalah pusat implementasi GraphQL. Ini menjelaskan fungsionalitas yang tersedia untuk klien yang terhubung dengannya.

Fitur GraphQL

Berikut adalah fitur penting dari GraphQL:

Ini menyediakan bahasa kueri deklaratif, yang tidak bersifat keharusan.
Bersifat hierarkis dan berpusat pada produk.
GraphQL memiliki tipe yang kuat. Artinya, kueri dieksekusi dalam konteks sistem tertentu.
Kueri di GraphQL dikodekan di klien, bukan di server.
Ia memiliki semua fitur lapisan aplikasi model OSI.

Klien GraphQL

Klien GraphQL adalah kode yang membuat permintaan POST ke Server GraphQL yang relevan. Anda dapat menanyakan API GraphQL secara langsung, namun pendekatan yang baik adalah memanfaatkan pustaka klien khusus menggunakan Relay.

Kredensial mikro JavaPustaka skrip dikembangkan oleh Facebook untuk membuat aplikasi React dengan GraphQL. Klien GraphQL dapat berupa CMS seperti Drupal, aplikasi satu halaman, aplikasi seluler, dll.

Server GraphQL

Server GraphQL adalah implementasi sisi server dari spesifikasi GraphQL. Ini menggambarkan data Anda sebagai API GraphQL, yang dapat dikueri oleh program klien Anda Database.

Gerbang GraphQL

Gateway adalah pola layanan mikro tempat Anda dapat membangun layanan terpisah untuk mengatasi layanan backend lainnya. Ini menawarkan dokumentasi yang bisa diterapkan dan memberikan cara mudah untuk mengumpulkan data dari lebih dari satu sumber dengan satu permintaan.

Apa variabel di GraphQL?

A Variabel dalam GraphQL digunakan untuk memisahkan nilai dinamis dari kueri klien dan meneruskan kueri sebagai kamus unik. Variabel di GraphQL juga dapat digunakan untuk menggunakan kembali kueri atau mutasi yang ditulis oleh klien dengan argumen individual. Di graphQL, Anda tidak bisa meneruskan argumen dinamis secara langsung dalam string kueri. Alasannya adalah kode sisi klien perlu memanipulasi string kueri secara dinamis pada saat Anda menjalankan program.

GraphQL memiliki satu cara yang baik untuk memfaktorkan nilai dinamis dari kueri. Ia meneruskannya sebagai kamus terpisah. Nilai-nilai ini dikenal sebagai variabel. Setiap kali kita bekerja dengan variabel, kita perlu melakukan tiga hal berikut:

Ganti nilai statis dalam kueri dengan nama variabel.
Deklarasikan nama variabel sebagai salah satu variabel yang diterima oleh query GraphQL.
Berikan nilai dalam kamus variabel khusus transportasi.

Inilah tampilannya secara keseluruhan:

query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}
{
  "episode": "JEDI"
}
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Han Solo"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Seperti yang Anda lihat pada contoh GraphQL di atas, kami hanya meneruskan variabel lain selain perlu membuat kueri baru.

Apa itu Mutasi?

Mutasi adalah cara untuk mengubah dataset di GraphQL. Ini mengubah data di penyimpanan data dan mengembalikan nilai. Mutasi membantu Anda menyisipkan, memperbarui, atau menghapus data. Umumnya, mutasi didefinisikan sebagai bagian skema.

Hal-hal yang perlu dipertimbangkan saat merancang mutasi GraphQL

Berikut adalah poin penting saat mendesain GraphQL:

Penamaan: Pertama-tama, Anda harus memberi nama kata kerja mutasi Anda. Kemudian kata benda, atau “objek” jika ada. Gunakan camelCase saat memberi nama mutasi.
Kekhususan: Anda harus membuat mutasi sespesifik mungkin. Mutasi harus mewakili tindakan semantik yang dilakukan oleh pengguna.
Objek masukan: Gunakan satu tipe objek masukan yang unik dan wajib sebagai argumen untuk mengeksekusi mutasi pada klien.
Jenis muatan unik: Anda harus menggunakan jenis muatan unik untuk setiap mutasi. Anda juga dapat menambahkan keluaran mutasi sebagai bidang untuk jenis muatan tertentu.
Bersarang: Gunakan penyatuan mutasi Anda jika memungkinkan. Ini memungkinkan Anda untuk sepenuhnya memanfaatkan API GraphQL.

Perbedaan antara GraphQL dan REST

Tabel berikut menunjukkan perbedaan penting antara GraphQL dan REST.

GraphQL	ISTIRAHAT
Mengikuti arsitektur yang digerakkan oleh klien.	Mengikuti arsitektur berbasis server.
GraphQL dapat diatur dalam bentuk skema.	REST dapat diatur dalam bentuk titik akhir.
GraphQL adalah komunitas yang berkembang.	REST adalah komunitas yang sangat besar.
Kecepatan pengembangan di GraphQL cepat.	Kecepatan pengembangan di REST Lambat.
Kurva pembelajaran di GraphQL sulit.	Kurva pembelajaran di REST adalah moderat.
Identitas dipisahkan dari cara Anda mengambilnya.	Titik akhir yang Anda panggil di REST adalah identitas objek tertentu.
Di GraphQL, server menentukan sumber daya yang tersedia.	Bentuk dan ukuran sumber daya ditentukan oleh server di REST.
GraphQL memberikan konsistensi tinggi di semua platform.	Sulit untuk mendapatkan konsistensi di semua platform.

Kekurangan GraphQL

Berikut kelemahan GraphQL:

Ekosistem muda
Kurangnya sumber daya di bagian backend.
Pola desain hilang untuk aplikasi yang rumit.
Masalah kinerja dengan kueri yang rumit.
Berlebihan untuk aplikasi kecil
GraphQL tidak bergantung pada metode caching HTTP yang memungkinkan penyimpanan konten permintaan.
GraphQL tidak memahami file. Oleh karena itu, fitur pengunggahan file tidak disertakan di dalamnya.
Dengan GraphQL, bersiaplah untuk mendapatkan banyak pendidikan pra-pengembangan seperti mempelajari Bahasa Definisi Skema.

Aplikasi dan Alat Sumber Terbuka yang digunakan oleh GraphQL

Aplikasi dan alat open source penting yang digunakan oleh GraphQL adalah sebagai berikut:

gatsby: Gastby adalah aplikasi yang didukung oleh GraphQL yang dapat menggunakan data yang berasal dari lebih dari satu sumber API GraphQL. Anda dapat menggunakannya untuk mengembangkan aplikasi React statis dan berbasis klien.
GrafikQL: Ini adalah ID yang terintegrasi dengan browser dan juga berinteraksi dengan API GraphQL. Beberapa fungsi yang disertakan GraphiQL adalah mutasi, kueri data, dan kueri pelengkapan otomatis.
Taman Bermain GraphQL: Ini adalah IDE kuat yang memiliki editor bawaan untuk menangani mutasi, validasi, kueri GraphQl, langganan, dll. Pengembang dapat menggunakan IDE ini untuk memvisualisasikan struktur skema.
Prisma: Prisma adalah lapisan abstraksi database yang mengubah database Anda menjadi API GraphQL dengan operasi CRUD (Buat, Baca, Perbarui, dan Hapus).
Bit: Ini adalah alat dan platform sumber terbuka yang mengubah kode yang dapat digunakan kembali menjadi komponen. Pengembang dapat menggunakannya untuk berbagi dan mengembangkan berbagai proyek.

Kesimpulan

GraphQL adalah teknologi sisi server lapisan aplikasi yang dikembangkan oleh Facebook untuk mengeksekusi kueri dengan data yang ada.
Anda dapat menggunakan GraphQL untuk mengambil data dengan satu panggilan API.
GraphQL membantu Anda meningkatkan kinerja aplikasi seluler.
Komponen kueri GraphQL yang penting adalah: 1) Kueri, 2) Resolver, 3) Skema.
GraphQL memiliki tipe yang kuat. Artinya, kueri dieksekusi dalam konteks sistem tertentu.
Klien GraphQL adalah kode yang membuat permintaan POST ke Server GraphQL yang relevan.
Server GraphQL adalah implementasi sisi server dari spesifikasi GraphQL.
Gateway adalah pola layanan mikro tempat Anda dapat membangun layanan terpisah untuk mengatasi layanan backend lainnya.
GraphQL memiliki satu cara yang baik untuk memfaktorkan nilai dinamis dari kueri.
Mutasi adalah cara untuk mengubah dataset di GraphQL.
Poin penting saat mendesain GraphQL adalah: 1) Penamaan, 2) Kekhususan, 3) Objek masukan Jenis muatan unik, dan 4) Bersarang.
GraphQL dapat diatur dalam bentuk skema, sedangkan REST dapat diatur dalam bentuk titik akhir.
Kerugian dari GraphQL adalah kurangnya sumber daya di bagian backend.

Anda mungkin ingin: