Tutorial GraphQL untuk Pemula: Apa itu, Fitur & Contoh

Apa itu GraphQL?

GraphQL GraphQL adalah teknologi lapisan aplikasi sisi server yang dikembangkan oleh Facebook, yang sekarang bernama Meta, untuk mengeksekusi kueri dengan data yang sudah ada. Teknologi ini dirilis secara publik pada tahun 2015 dan diatur oleh GraphQL. Foundation Sejak 2018, GraphQL dapat mengoptimalkan panggilan API RESTful. Ia memberikan cara deklaratif untuk mengambil dan memperbarui data Anda. GraphQL membantu Anda memuat data dari server ke klien. Ini memungkinkan programmer untuk memilih jenis permintaan yang ingin mereka buat.

Apa yang perlu Anda pelajari sebelum mempelajari GraphQL?

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

Mengapa menggunakan GraphQL?

Berikut adalah alasan menggunakan GraphQL:

• Ini memberikan kueri yang dapat dibaca manusia.
• Di GraphQL, sangat mudah untuk berurusan dengan banyak basis data.
• 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 data berlebihan atau kurang.
• 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 secara cepat.ping.

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 absoluttracmenggunakan API yang sudah ada untuk menentukan struktur respons berdasarkan kebutuhan pengguna.

Semua manfaat tersebut bergantung pada tiga komponen yang bekerja bersama-sama.

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

1. Bidang:

Sebuah field hanya menunjukkan bahwa kita meminta informasi tertentu dari server. Berikut adalah contoh GraphQL dari sebuah field dalam sebuah query GraphQL.

query {
    team {
        id
        name
    }
}

Server merespons dengan dokumen JSON yang bentuknya mencerminkan kueri:

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

Pada contoh GraphQL di atas, kita meminta server untuk field yang disebut team dan subfield-nya seperti id dan name. Server GraphQL mengembalikan data yang persis sama dengan yang kita minta.

2. kasus

In ISTIRAHAT, kita hanya dapat meneruskan satu set argumen saja URL segmen dan parameter kueri. Untuk mendapatkan profil tertentu, panggilan REST tipikal 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. Server ini menggambarkan data Anda sebagai API GraphQL, yang dapat diakses oleh program klien Anda untuk mendapatkan informasi yang dibutuhkan. Database.

Gerbang GraphQL

Gateway adalah pola microservice di mana Anda dapat membangun layanan terpisah untuk menangani layanan backend lainnya. Gateway menawarkan dokumentasi yang mudah dipahami dan memberikan cara yang nyaman untuk mengumpulkan data dari lebih dari satu sumber dengan satu permintaan.

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

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

Berikut tampilan keseluruhannya. Pertama, kueri yang mendeklarasikan variabel:

query HeroNameAndFriends($episode: Episode) {
    hero(episode: $episode) {
        name
        friends {
            name
        }
    }
}

Kemudian kamus terpisah berisi nilai variabel dikirim bersamaan dengan itu:

{
    "episode": "JEDI"
}

Dan berikut respons yang dikembalikan oleh server:

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

Kueri membaca dan mutasi menulis. Jenis operasi ketiga mencakup data yang berubah saat klien masih terhubung.

Apa itu Langganan (Subscription) dalam GraphQL?

A berlangganan Subscribe adalah tipe operasi ketiga dalam spesifikasi GraphQL, bersama dengan query dan mutation. Sebuah query dan mutation masing-masing selesai dalam satu permintaan dan respons. Sebaliknya, subscription menjaga koneksi jangka panjang tetap terbuka, biasanya melalui WebSocket, sehingga server mengirimkan hasil baru ke klien setiap kali peristiwa tertentu terjadi.

Sintaksnya menyerupai kueri, dengan kata kunci langganan menggantikan kueri:

subscription OnCommentAdded($postId: ID!) {
    commentAdded(postId: $postId) {
        id
        content
        author {
            name
        }
    }
}

Tiga poin membedakan langganan dalam praktiknya.

• Berdasarkan peristiwa, bukan jajak pendapat: Klien hanya mendaftarkan minat sekali. Tidak ada informasi lebih lanjut yang dikirim hingga server menerbitkan peristiwa yang sesuai, yang jauh lebih murah daripada melakukan polling berulang kali.
• Satu kolom utama per langganan: Spesifikasi tersebut hanya mengizinkan satu field tingkat atas, tidak seperti query yang dapat meminta beberapa field sekaligus.
• Sebaiknya tetap berukuran kecil: Hanya tampilkan kolom yang perlu diperbarui pada antarmuka. Obrolan langsung, notifikasi, dan tampilan harga adalah contoh penggunaan umumnya.

Perbedaan antara GraphQL dan REST

Tabel berikut menunjukkan perbedaan penting antara GraphQL dan REST.

Aplikasi dan Alat Sumber Terbuka yang digunakan oleh GraphQL

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

• gatsbyGatsby 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 IDE yang terintegrasi dengan browser dan juga berinteraksi dengan API GraphQL. Beberapa fungsi yang termasuk dalam GraphiQL adalah mutasi, kueri data, dan kueri pelengkap otomatis.
• Taman Bermain GraphQL: Ini adalah IDE yang andal dengan editor bawaan untuk menangani mutasi, validasi, kueri GraphQL, langganan, dan lain-lain. Pengembang dapat menggunakan IDE ini untuk memvisualisasikan struktur skema. Proyek ini sekarang sudah dihentikan, dan fitur-fiturnya telah digabungkan kembali ke GraphiQL.
• Prisma: Prisma adalah basis data abstraclapisan tion, yang kini disajikan sebagai ORM yang aman tipe, yang banyak dipasangkan dengan server GraphQL untuk mengekspos operasi CRUD (Create, Read, Update, dan Delete).
• 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.

Pertanyaan Umum Demo Slot