Dasar-Dasar GraphQL untuk Pengembang React

REST menyediakan titik akhir dengan bentuk tetap: GET /users/:id mengembalikan seluruh objek pengguna, terlepas dari data yang dibutuhkan klien. GraphQL memungkinkan klien menentukan dengan tepat bidang yang diinginkan, sehingga menghilangkan pengambilan data berlebihan (terlalu banyak data) dan pengambilan data yang kurang (data tidak cukup sehingga memerlukan beberapa permintaan).

Satu kueri GraphQL dapat mengambil pengguna, postingannya, dan penulis setiap postingan dalam satu perjalanan pulang-pergi.

Setiap API GraphQL ditentukan oleh skema yang ditulis dalam Schema Definition Language (SDL). Skema tersebut mendeklarasikan tipe, bidangnya, serta tipe akar Query, Mutation, dan Subscription yang dapat dioperasikan oleh klien.

Skema adalah kontrak antara klien dan server. Tim frontend dan backend dapat bekerja secara paralel setelah skema disepakati.

Kueri GraphQL memilih bidang: { user(id: "1") { name email posts { title } } }. Bidang bertingkat menelusuri hubungan dalam satu permintaan. Alias mengganti nama bidang: { me: user(id: "1") { name } }. Fragmen menggunakan kembali pilihan bidang di beberapa kueri.

Variabel membuat kueri dapat digunakan kembali: query GetUser($id: ID!) { user(id: $id) { name } } dengan variabel: { id: "1" }.

Setiap bidang dalam skema GraphQL memiliki fungsi resolver di server. Saat klien meminta user.name, resolver pengguna mengambil objek pengguna dan resolver nama (atau resolver bawaan) mengembalikan bidang name.

Penyelesaian pada tingkat bidang inilah yang memungkinkan GraphQL mengambil hanya data yang diminta secara tepat.

Jika Anda meminta daftar 100 postingan dan setiap postingan menyertakan penulisnya, implementasi naif akan menjalankan 100 kueri basis data terpisah untuk para penulis. Masalah N+1 ini membuat API GraphQL lambat tanpa pengoptimalan.

DataLoader mengatasi N+1 dengan mengelompokkan semua pencarian penulis menjadi satu kueri basis data menggunakan tembolok per permintaan dan fungsi pengelompokan.

Apollo Studio dan GraphQL Playground adalah antarmuka pengguna berbasis peramban untuk menjelajahi API GraphQL secara interaktif. Keduanya melengkapi bidang secara otomatis berdasarkan skema, menampilkan hasil kueri, dan menampilkan dokumentasi tipe secara langsung.

Menggunakan lingkungan eksplorasi tersebut adalah cara tercepat untuk memahami API GraphQL yang belum dikenal sebelum menulis kode klien.

API GraphQL mengekspos skemanya sendiri melalui kueri introspeksi: { __schema { types { name } } }. Klien dapat membuat kueri terhadap skema itu sendiri untuk menemukan tipe, bidang, dan argumen yang tersedia.

Alat pembuat kode seperti graphql-codegen menggunakan introspeksi untuk menghasilkan tipe TypeScript yang sesuai dengan skema API secara otomatis.

Mutasi GraphQL mengubah data: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } }. Langganan membuat koneksi yang bertahan lama (biasanya WebSocket) dan mengirim pembaruan: subscription { postAdded { id title } }.

Ketiga tipe akar (Query, Mutation, Subscription) menggunakan sintaks pemilihan bidang yang sama.

GraphQL sangat unggul dalam aplikasi dengan persyaratan data yang kompleks dan bertingkat, beberapa jenis klien (seluler, web, TV) yang memerlukan bagian bidang berbeda, atau API yang berkembang pesat ketika penandaan bidang sebagai usang lebih disukai daripada pembuatan versi titik akhir.

REST lebih sederhana untuk API CRUD dengan bentuk sumber daya yang datar dan dapat diprediksi, serta karakteristik penyimpanan cache HTTP yang sangat baik melalui ETags dan header cache.

Apollo Client adalah klien GraphQL yang paling kaya fitur: cache ternormalisasi, pengelolaan status lokal, langganan, dan tautan penanganan kesalahan. URQL lebih ringan dengan cache dokumen dan API yang lebih sederhana. React Query dengan graphql-request adalah pendekatan paling sederhana untuk kueri+mutasi dasar tanpa kemampuan cache yang canggih.

Pilih berdasarkan kebutuhan cache Anda: gunakan cache ternormalisasi untuk entitas yang digunakan bersama oleh beberapa kueri (Apollo), atau cache dokumen yang lebih sederhana untuk kueri independen (URQL atau React Query).

SDL sederhana: type User { id: ID! name: String! posts: [Post!]! } type Post { id: ID! title: String! author: User! } type Query { user(id: ID!): User users: [User!]! }. Tanda seru menunjukkan bidang yang tidak boleh bernilai null.

Skema ini memberi tahu klien secara tepat bidang apa yang ada pada setiap tipe dan kueri apa saja yang tersedia, sehingga memungkinkan pembuatan kode yang aman terhadap tipe.

Apa arti "pengambilan data berlebih" dalam konteks REST dibandingkan dengan GraphQL?

GraphQL memungkinkan klien meminta tepat bidang yang mereka perlukan (tanpa pengambilan data berlebih atau kurang) menggunakan bahasa kueri yang ditentukan oleh skema. Penyelesai menjawab setiap bidang; DataLoader mengatasi masalah N+1. Introspeksi memungkinkan pembuatan kode untuk tipe TypeScript. Apollo Client, URQL, dan React Query adalah klien GraphQL utama yang kompatibel dengan React.

Pilih GraphQL untuk persyaratan data yang kompleks, bertingkat, dan digunakan oleh banyak klien; pilih REST untuk CRUD sederhana dengan bentuk yang dapat diprediksi.