Asas GraphQL untuk Pembangun React

REST mendedahkan titik akhir berbentuk tetap: GET /users/:id memulangkan keseluruhan objek pengguna tanpa mengira perkara yang diperlukan oleh klien. GraphQL membolehkan klien menentukan medan yang diperlukan dengan tepat, sekali gus menghapuskan pengambilan berlebihan (terlalu banyak data) dan pengambilan tidak mencukupi (data tidak mencukupi sehingga memerlukan beberapa permintaan).

Satu pertanyaan GraphQL boleh mendapatkan pengguna, kiriman mereka dan pengarang setiap kiriman dalam satu perjalanan pergi balik.

Setiap API GraphQL ditakrifkan oleh skema yang ditulis dalam Bahasa Definisi Skema (SDL). Skema mengisytiharkan jenis, medan dan jenis akar Query, Mutation serta Subscription yang boleh dikendalikan oleh klien.

Skema ialah kontrak antara klien dan pelayan. Pasukan bahagian hadapan dan bahagian belakang boleh bekerja secara selari sebaik sahaja skema dipersetujui.

Pertanyaan GraphQL memilih medan: { user(id: "1") { name email posts { title } } }. Medan bersarang merentasi hubungan dalam satu permintaan. Alias menamakan semula medan: { me: user(id: "1") { name } }. Fragmen menggunakan semula pilihan medan merentas beberapa pertanyaan.

Pemboleh ubah menjadikan pertanyaan boleh digunakan semula: query GetUser($id: ID!) { user(id: $id) { name } } dengan pemboleh ubah: { id: "1" }.

Setiap medan dalam skema GraphQL mempunyai fungsi penyelesai pada pelayan. Apabila klien membuat pertanyaan user.name, penyelesai pengguna mendapatkan objek pengguna dan penyelesai name (atau penyelesai lalai) memulangkan medan name.

Penyelesaian pada peringkat medan inilah yang membolehkan GraphQL mendapatkan hanya data yang diminta dengan tepat.

Jika anda membuat pertanyaan untuk senarai 100 kiriman dan setiap kiriman menyertakan pengarangnya, pelaksanaan naif akan melaksanakan 100 pertanyaan pangkalan data berasingan untuk pengarang. Masalah N+1 ini menjadikan API GraphQL perlahan tanpa pengoptimuman.

DataLoader menyelesaikan N+1 dengan mengumpulkan semua carian pengarang ke dalam satu pertanyaan pangkalan data menggunakan cache setiap permintaan dan fungsi kelompok.

Apollo Studio dan GraphQL Playground ialah antara muka pengguna berasaskan pelayar untuk meneroka API GraphQL secara interaktif. Kedua-duanya melengkapkan medan secara automatik daripada skema, memaparkan hasil pertanyaan dan menunjukkan dokumentasi jenis secara sebaris.

Menggunakan alat ini ialah cara terpantas untuk memahami API GraphQL yang tidak biasa sebelum menulis kod klien.

API GraphQL mendedahkan skemanya sendiri melalui pertanyaan introspeksi: { __schema { types { name } } }. Klien boleh membuat pertanyaan terhadap skema itu sendiri untuk menemukan jenis, medan dan argumen yang tersedia.

Alat penjanaan kod seperti graphql-codegen menggunakan introspeksi untuk menjana jenis TypeScript yang sepadan dengan skema API secara automatik.

Mutasi GraphQL mengubah suai data: mutation CreatePost($input: PostInput!) { createPost(input: $input) { id title } }. Langganan mewujudkan sambungan berterusan, biasanya WebSocket, dan menolak kemas kini: subscription { postAdded { id title } }.

Ketiga-tiga jenis akar (Query, Mutation, Subscription) menggunakan sintaks pemilihan medan yang sama.

GraphQL sangat sesuai untuk aplikasi yang mempunyai keperluan data yang kompleks dan bersarang, pelbagai jenis klien (mudah alih, web, TV) yang memerlukan subset medan berbeza, atau API yang berkembang pesat apabila penyusutan medan lebih diutamakan daripada pemversian titik akhir.

REST lebih ringkas untuk API CRUD dengan bentuk sumber yang rata dan boleh dijangka serta ciri pencachean HTTP yang sangat baik melalui ETag dan pengepala cache.

Apollo Client ialah klien GraphQL yang paling kaya ciri: cache ternormalisasi, pengurusan keadaan setempat, langganan dan pautan pengendalian ralat. URQL lebih ringan dengan cache dokumen dan API yang lebih ringkas. React Query dengan graphql-request ialah pendekatan paling mudah untuk pertanyaan+mutasi asas tanpa kecanggihan pencachean.

Pilih berdasarkan keperluan pencachean anda: cache ternormalisasi untuk entiti yang dikongsi merentas pertanyaan (Apollo), atau cache dokumen yang lebih ringkas untuk pertanyaan bebas (URQL atau React Query).

SDL ringkas: 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 medan yang tidak boleh bernilai nol.

Skema ini memberitahu klien dengan tepat medan yang wujud pada setiap jenis dan pertanyaan yang tersedia, sekali gus membolehkan penjanaan kod yang selamat dari segi jenis.

GraphQL membolehkan klien meminta tepat medan yang diperlukan, tanpa pengambilan data berlebihan atau kurang, menggunakan bahasa pertanyaan yang ditakrifkan oleh skema. Penyelesai menjawab setiap medan; DataLoader menyelesaikan masalah N+1. Introspeksi membolehkan penjanaan kod untuk jenis TypeScript. Apollo Client, URQL dan React Query ialah klien GraphQL utama yang serasi dengan React.

Pilih GraphQL untuk keperluan data yang kompleks, bersarang dan melibatkan berbilang klien; pilih REST untuk CRUD yang ringkas dengan bentuk yang boleh dijangka.