Penulis materi, terjemahan yang kami terbitkan hari ini, mengatakan bahwa misi pengembang Klien Apollo adalah menjadikan alat ini solusi paling modern dan nyaman untuk mengelola keadaan aplikasi Bereaksi. Komunitas Bereaksi sedang mengembangkan dan menguasai cara-cara baru dan efektif untuk mengembangkan antarmuka pengguna. Pencipta Klien Apollo berusaha keras untuk memastikan bahwa proyek mereka mendukung semua yang paling relevan dari dunia Bereaksi. Mengikuti tradisi ini, pengembang Apollo Client memperkenalkan versi baru dari sistem yang dilengkapi dengan dukungan
hook React.
Kait diperkenalkan di
Bereaksi 16.8 . Ini adalah mekanisme baru yang memungkinkan Anda untuk membuat komponen stateful tanpa harus berurusan dengan masalah khusus untuk komponen berbasis kelas. Sekarang Apollo Client mencakup tiga kait yang dapat digunakan dalam aplikasi - di semua tempat di mana komponen orde tinggi atau mekanisme alat peraga render digunakan. Ini adalah useQuery,
useMutation dan
useSubscription . Kait ini mudah dipelajari, mereka memiliki banyak keunggulan dibandingkan API yang sudah ada sebelumnya. Secara khusus, ini menyangkut mengurangi ukuran bundel aplikasi dan mengurangi jumlah kode boilerplate.
Memulai
Jika Anda akan membuat proyek Apollo baru, kami sarankan untuk menginstal paket berikut setelah Anda mengkonfigurasi instance Klien Apollo Anda:
npm install @apollo/react-hooks
Paket ini mengekspor komponen
ApolloProvider , yang digunakan untuk menghubungkan Klien Apollo ke aplikasi Bereaksi. Dengan cara yang sama, pekerjaan diatur menggunakan API lama.
Jika Anda sudah memiliki proyek yang menggunakan Apollo, itu berarti Anda memiliki beberapa cara untuk beralih ke pengait. Pilihan metode tertentu tergantung pada seberapa tepatnya Anda ingin melakukan transisi. Detail tentang ini dapat ditemukan di
sini .
Mengapa kait masa depan?
Klien Apollo masih mendukung API berdasarkan komponen tingkat tinggi dan render props. API ini akan hadir dalam sistem untuk beberapa waktu mendatang. Kami percaya bahwa di masa depan, kait akan menjadi mekanisme terbaik untuk memuat data menggunakan Klien Apollo. Meskipun mereka yang sudah menggunakan Apollo tidak harus beralih ke kait sekarang, mereka harus menggunakan kait untuk komponen baru. Rekomendasi ini memiliki beberapa alasan yang sekarang akan kita pertimbangkan.
▍Ketika menggunakan kait, Anda membutuhkan lebih sedikit kode yang digunakan untuk bekerja dengan data
Hooks mengurangi jumlah kode boilerplate yang digunakan untuk bekerja dengan data. Ini mengarah pada pengurangan ukuran komponen dan fakta bahwa komponen seperti itu lebih mudah dipahami. Akibatnya, pengembang tidak perlu lagi menyelidiki bagaimana komponen tingkat tinggi diatur, atau menganalisis logika kompleks alat peraga render. Untuk memuat data, cukup memanggil fungsi
useQuery saja:
const LAST_LAUNCH = gql` query lastLaunch { launch { id timestamp } } `; export function LastLaunch() { const { loading, data } = useQuery(LAST_LAUNCH); return ( <div> <h1>Last Launch</h1> {loading ? <p>Loading</p> : <p>Timestamp: {data.launch.timestamp}</p>} </div> ); }
useQuery sini adalah memuat data menggunakan Apollo Client
useQuery hook
useQueryLihatlah aplikasi tutorial
ini di mana Anda dapat melihat contoh kerja menggunakan kait Klien Apollo.
▍Beberapa mutasi
Saat Anda melakukan banyak mutasi dalam satu komponen, menggunakan komponen tingkat tinggi atau mekanisme render props dapat menyebabkan kode yang sulit dimengerti. Penggunaan API render prop, konstruksi struktur yang terdiri dari komponen
Mutation tertanam satu sama lain, memberikan pengertian yang salah tentang kode terstruktur dan hierarki yang jelas. Hook
useMutation baru menghindari masalah ini sepenuhnya. Faktanya adalah penggunaannya direduksi menjadi panggilan fungsi sederhana. Contoh berikut menunjukkan bagaimana beberapa mutasi dan kueri dapat berinteraksi satu sama lain. Semua ini terjadi dalam komponen yang sama:
function Message() { const [saveMessage, { loading }] = useMutation(SAVE_MESSAGE); const [deleteMessage] = useMutation(DELETE_MESSAGE); const { data } = useQuery(GET_MESSAGE); return ( <div> <p> {loading ? 'Loading ...' : `Message: ${data && data.message ? data.message.content : ''}`} </p> <p> <button onClick={() => saveMessage()}>Save</button> <button onClick={() => deleteMessage()}>Delete</button> </p> </div> ); }
Hook
useMutation digunakan di
useMutation . Anda dapat melihat banyak mutasi beraksi di
sini . Aplikasi sampel ini juga berisi komponen serupa yang dibuat menggunakan render props. Ini memberi Anda kesempatan untuk membandingkan komponen ini dengan yang dibuat menggunakan kait.
▍ Peningkatan dukungan TypeScript
Bukan rahasia lagi bahwa kami adalah penggemar besar TypeScript. Kemampuan kait baru cocok dengan definisi tipe otomatis yang dihasilkan oleh Apollo CLI. Ini sangat memudahkan penulisan kode tipe-aman untuk komponen Bereaksi. Beginilah pemuatan data menggunakan kait useQuery dan TypeScript:
import { RocketData, RocketVars } from './types'; const GET_ROCKET_INVENTORY = gql` query getRocketInventory($year: Int!) { rocketInventory(year: $year) { id year } } `; export function RocketInventoryList() { const { loading, data } = useQuery<RocketData, RocketVars>( GET_ROCKET_INVENTORY, { variables: { year: 2019 } } ); return (); }
Kait Apollo dan TypeScript memudahkan untuk mengembangkan komponen Bereaksi yang diketik dengan kuat.
Penambahan Klien Apollo tambahan untuk Pengembang Bereaksi
Meskipun rilis Apollo ini berfokus pada kaitan baru, kita dapat berbicara tentang beberapa fitur baru yang lebih menarik.
▍ Mengurangi ukuran bundel hingga 50%
Sementara ukuran paket gzip yang diperkecil dan dikompresi
react-apollo@2 adalah
10,6 Kb , ukuran paket
react-apollo@3 hanya
7,8 Kb . Selain itu, jika paket
@apollo/react-hooks cukup untuk Anda, maka ukuran bundel berkurang menjadi hanya
5,1 Kb . Ini memberikan penghematan 50% dibandingkan dengan
react-apollo@2 .
▍ Eksekusi permintaan tertunda
useQuery mengeksekusi kueri pada saat fungsi dipanggil. Tapi ini justru perilaku sistem yang tidak selalu dibutuhkan. Bayangkan, misalnya, bidang untuk memasukkan permintaan pencarian yang memberikan permintaan pengguna. Anda mungkin perlu menampilkan komponen dengan bidang yang siap menerima apa yang dimasukkan pengguna. Tetapi pada saat yang sama, eksekusi permintaan ke server pencarian akan ditunda sampai saat ketika pengguna mulai memasukkan sesuatu ke dalam bidang. Untuk mengimplementasikan skenario ini, Anda dapat menggunakan hook
useLazyQuery , yang mengembalikan tuple dengan fungsi
execute di posisi kedua:
const [execute, { loading, data }] = useLazyQuery(GET_INVENTORY);
Permintaan tidak akan dieksekusi sampai Anda memanggil fungsi
execute . Pada titik ini, komponen akan dirender lagi dan skema eksekusi query yang biasa diimplementasikan menggunakan
useQuery akan diterapkan.
Documentation Dokumentasi API baru
Kami memperbarui
dokumentasi Klien Apollo dengan menambahkan informasi kait. Kami merekomendasikan mereka untuk digunakan oleh mereka yang baru saja mulai bekerja dengan sistem kami. Namun, meskipun demikian, kami tidak menghapus informasi dari dokumentasi tentang cara bekerja dengan komponen tingkat tinggi dan dengan mekanisme alat peraga render. Dalam contoh kode yang dapat ditemukan dalam dokumentasi, Anda sekarang dapat menggunakan menu drop-down baru yang memungkinkan Anda untuk beralih di antara kode yang menunjukkan solusi untuk masalah yang sama menggunakan pendekatan yang paling disukai pembaca.
Berbagai opsi kode tersedia dalam dokumentasi
Ringkasan
Pembuat Apollo Client mengatakan bahwa apa yang paling mereka sukai tentang React adalah bahwa tim inti pengembang perpustakaan ini dan komunitas penggemar di sekitarnya terus berupaya meningkatkan kegunaan React dari sudut pandang programmer. Penampilan kait, yang direkomendasikan untuk dicoba oleh semua orang, adalah salah satu contoh paling cemerlang dari aspirasi semacam itu.
Kami berharap bahwa Bereaksi kait yang diperkenalkan di Apollo Client akan menarik bagi mereka yang menggunakan proyek ini untuk mengembangkan aplikasi mereka.
Pembaca yang budiman! Apakah Anda menggunakan Klien Apollo?
